##Problem statement
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.
```name=current
.
├── resources/
│ ├── skins.vector.styles/
│ │ ├── common/
│ │ ├── images/
│ │ └── legacy/
│ └── skins.vector.styles.responsive.less
└── variables.less
```
##Proposed rearrangement
```name=proposal
.
└── resources/
├── skins.vector.styles.common/
│ ├── base/
│ ├── images/
│ ├── components/
│ └── variables.less
├── skins.vector.styles/
│ ├── layouts/
│ ├── components/
│ └── skin.less
├── skins.vector.styles.legacy/
│ ├── layouts/
│ ├── components/
│ └── skin-legacy.less
└── skins.vector.styles.responsive/
```
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.
###Changes include:
- 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 & rename it to `skins.vector.styles.common` following ResourceLoader conventions.
- Move all the common styles into the `skins.vector.styles.common/` folder, including components and images.
- Create dedicated folders for `components/` and `layouts/`.
- Move the `variables.less` file into the `skins.vector.styles.common/` folder. This creates the space to add a legacy or modern specific variables files in the future if needed.
- Organize style modules (i.e. `skins.vector.styles/`, `skins.vector.styles.legacy/` and `skins.vector.styles.common/`) using the same sub-folders (when necessary):
- `base/` = currently holds normalize, print, typography
- `images/` = currently holds images
- `components/` += Add this folder for the CameCase.less files.
- `layouts/` += Add this folder for the files starting with `layout-*` since we seem to have a few of those now.
- `skin.less` = entry file, For the legacy module, this file is currently named `skin-legacy.less`