2019-10-02 00:17:48 +03:00
|
|
|
# CSS Structure
|
|
|
|
|
|
|
|
|
|
This loosely follows [ITCSS.](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/)
|
|
|
|
|
|
|
|
|
|
## 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
|
2019-10-02 00:20:49 +03:00
|
|
|
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?
|
