|
||
---|---|---|
.. | ||
base | ||
components | ||
generic | ||
objects | ||
settings | ||
tools | ||
utilities | ||
README.md | ||
style-editor.scss | ||
style.scss |
CSS Structure
This loosely follows ITCSS.
01 Settings
Typography, colors, any spacing variables, etc should be set here.
02 Tools
This contains any mixins. We inherit the following libraries:
- breakpoint
- kube
- modular-scale
03 Generic
Any generic styles. Used for normalize & reset styles. We inherit:
- kube
- normalize
04 Base (aka Elements)
Styles for plain html elements. We inherit the base theme's styling here.
05 Objects
These are pieces of UI. These should be self-contained (or nested so that they are self-contained). Blocks should be defined here.
06 Components
This section puts together the base and objects to create pages. Page-specific styles are defined here.
07 Utilities
The is-*
/has-*
classes, these custom classes override previous styles. For example, has-background
would be
defined here. This is where block styles should live.
Editor Styles
Editor styles will use a custom import of a subset of the above folders, TBD?