Variables module
/* CSS Custom Properties */
--variablesName-propertyName
/* e.g: */
--primary-dark
Viewports
| Custom Properties | width |
|---|---|
--viewport-sm | 40em = 640px |
--viewport-md | 64em = 1024px |
--viewport-lg | 75em = 1200px |
Elements module
/* CSS Custom Properties */
--elementsName-propertyName
/* e.g: */
--body-fontFamily
Components module
/* CSS Custom Properties */
--ConmponentName-propertyName
/* e.g: */
--Button-fontSize
Classies
Inspired by SUIT CSS naming conventions
Tools Module
Responsive classies
.t-[sm-|md|lg-]toolName
/* e.g: */
.t-xs-width2of12 { }
Naming conventions
Inspired by SUIT CSS naming conventions
Abbreviations
Size level Suffix
| abbr (Suffix) | Base | Level |
|---|---|---|
*-gt | Gargantuan | +4 |
*-hg | Huge | +3 |
*-xl | Extra Large | +2 |
*-lg | Large | +3 |
*-bs(md) | Base (Medium) | 0 |
*-sm | Small | -1 |
*-xs | Extra Small | -2 |
*-tn | Tiny | -3 |
*-mi | Minimal | -4 |
*-nn or 0 | None | - |