mirror of
https://github.com/locomotivemtl/locomotive-boilerplate.git
synced 2026-01-15 00:55:08 +08:00
Change structure/import order of the SCSS to properly follow ITCSS. Add layer description to README.
We were doing it wrong.
This commit is contained in:
17
README.md
17
README.md
@@ -2,3 +2,20 @@ Charcoal-Boilerplate
|
||||
======================
|
||||
|
||||
Boilerplate for [`Charcoal`](#http://charcoal.locomotive.ca) projects by Locomotive.
|
||||
|
||||
|
||||
## SCSS
|
||||
|
||||
### Import order
|
||||
|
||||
* **Settings:** Global variables, site-wide settings, config switches, etc.
|
||||
* **Tools:** Site-wide mixins and functions.
|
||||
* **Generic:** Low-specificity, far-reaching rulesets (e.g. resets).
|
||||
* **Base:** Unclassed HTML elements (e.g. `a {}`, `blockquote {}`, `address {}`).
|
||||
* **Objects:** Objects, abstractions, and design patterns (e.g. `.media {}`).
|
||||
* **Components:** Discrete, complete chunks of UI (e.g. `.carousel {}`). This is
|
||||
the one layer that inuitcss doesn’t get involved with.
|
||||
* **Trumps:** High-specificity, very explicit selectors. Overrides and helper
|
||||
classes (e.g. `.hidden {}`).
|
||||
|
||||
*From [ITCSS](https://twitter.com/itcss_io)*
|
||||
|
||||
Reference in New Issue
Block a user