Skip to content

Refactor to support multiple skins #3

@zshall

Description

@zshall

At the moment, there's only one operating system that Shell.css has implemented. To add more operating systems, it'd be ideal if we could re-skin the entire page by scoping the current implementation to a class like .shell-3.1. This way, we can add additional skins such as shell-95 or shell-os7 and change the entire look of the page, or an individual window or component in the same way that we can already do for color themes.

If we can make the system modular enough it'll make it easier for people to add their own themes and contribute. Therefore, some introspection of the currently supported features will be required.

GUIdebook provides a great resource for studying the looks of other operating systems.

Initial Tasks:

  • Enumerate every component that Shell.css implements currently (Window, Title Bar, Close Button, etc.) and document them, so that we know what each additional skin needs to support.
  • Define a glossary of terms and their aliases so that any developer can figure out what we're talking about. Already in this issue I've mentioned OSes and skins and used the two interchangeably. To cut down on confusion there should be a wiki page where this is kept.
  • Make Shell.css work with.shell-3.1 wrapping class. This is a breaking change; developers currently using Shell.css will need to add this class to the page body to retain compatibility with v1 (since v1 has a global scope)
  • Refactor the source file structure so that each OS gets its own directory. This essentially creates a monorepo for the project and each OS becomes its own sub-project, but since the number of OSes will probably be a dozen or so at most this cuts down on overhead and management.
  • Refactor the build process to compile shell-3.1.css with just the original source, shell.css with all skins, and shell-[os name].css for any other skins that are added.

Metadata

Metadata

Assignees

Labels

documentationImprovements or additions to documentationenhancementNew feature or request

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions