Modifier Classes
There is no limitation to extend your type classes with individual state, size and position modifier. Proper handling of context and type should prevent the need of adjoining classes.
Syntax
State related syntax:
.{type}-{state}
.{type}-{context}-{state}
Size related syntax:
.{type}-{size}
.{type}-{context}-{size}
Position related syntax:
.{type}-{position}
.{type}-{context}-{position}
Overview
Suffix | Tag | Example |
---|---|---|
-active | * | .item-active |
-idle | * | .item-idle |
-hover | * | .item-hover |
-touch | * | .item-touch |
-small | * | .item-small |
-medium | * | .item-medium |
-large | * | .item-large |
-first | * | .item-first |
-second | * | .item-second |
-third | * | .item-third |
-last | * | .item-last |
-odd | * | .item-odd |
-even | * | .item-even |
Functional Classes
Functional classes using pure CSS are marked with the is
, no
, has
and fn
prefix. JavaScript enhanced and therefore reusable classes on the other hand can be identified by the js
prefix. Each of them should never have styles for painting.
Syntax
Pure CSS related syntax:
.is-{state}
.has-{context}
.no-{feature}
.fn-{action}
JavaScript related syntax:
.js-{action}
.js-{context}
Overview
Prefix | Tag | Example |
---|---|---|
is- | * | .is-active |
has- | * | .has-tooltip |
no- | * | .no-webgl |
fn- | * | .fn-clearfix |
js- | * | .js-click |
Exceptions
There are exceptions that are not following the specifications.
Syntax
.wrapper
.wrapper-{name}
.wrapper-{context}
.wrapper-{component}
.wrapper-{type}
Overview
Prefix | Tag | Example |
---|---|---|
wrapper- | * | .wrapper-body |