With the unusual situation of having multiple skin "modes" in one repo, the CSS folder structure in Vector has strayed away from MediaWiki conventions and led to some unintuitive folder structures:
- Some folders are not named after their ResourceLoader module.
- /resource/skins.vector.styles/legacy represents the skins.vector.legacy.styles module.
- A /resource/skins.vector.styles/common folder holds some styles shared by both legacy and modern mode, but not the shared components.
- Why is the /variables.less file at the root of the repo? This may have made sense in simpler times (like when Vector had one stylesheet), but not today.
. ├── resources/ │ ├── skins.vector.styles/ │ │ ├── common/ │ │ ├── images/ │ │ ├── legacy/ │ │ ├── skin.less │ │ └── skin-legacy.less │ └── skins.vector.styles.responsive.less └── variables.less
. └── resources/ ├── common/ │ ├── images/ │ ├── components/ │ ├── normalize.less │ ├── print.less │ ├── typography.less │ └── variables.less ├── skins.vector.styles/ │ ├── layouts/ │ ├── components/ │ └── skins.vector.styles.less ├── skins.vector.styles.legacy/ │ ├── layouts/ │ ├── components/ │ └── skins.vector.styles.legacy.less └── skins.vector.styles.responsive/ └── skins.vector.styles.responsive.less
The goal of this rearrangement is to reduce the amount of nested folders, provide some more fine-grained structure, and communicate the relationship and dependencies between legacy and modern more clearly.
- Move legacy/ out of skins.vector.styles since it is it's own resourceLoader module and shouldn't be nesting inside another one.
- Move the common/ folder up one level and remove the /base folder, moving the normalize, print, typography files up one level.
- Move all the common styles into the common/ folder, including components and images.
- Create dedicated folders for components/ and layouts/ per skin style module.
- Move the variables.less file into the common/ folder. This creates the space to add a legacy or modern specific variables.less files in the future if needed.
- Organize style modules (i.e. skins.vector.styles/, skins.vector.styles.legacy/ and common/) using the same sub-folders (when necessary):
- images/ = currently holds images
- components/ += Add this folder for the ModuleName.less (camel cased) files.
- layouts/ += Add this folder for the files starting with layout-* since we seem to have a few of those now.
- [module name].less = entry file, For the legacy module, this file is currently named skin-legacy.less