Used to provide structural templates.
Pattern
t-template-name
t-template-name--modifier-name
t-template-name__subcomponent-name--subcomponent-modifier-name
Examples
t-icon
t-icon--large
t-btn
t-btn--large
t-media
t-media__img
t-media__img--large
t-media__opt
t-media__body
Used to indicate the state of a component. Used as boolean value.
Pattern
is-state-type
Examples
is-hidden
is-collapsed
is-expanded
is-selected
So far this is just a "draft". Sometimes "states can have modes". Like .is-active could be active as in "mode-1" or "mode-2" for example. Modes are like modifiers to state.
is-active[data-mode="mode-1"]
As modes are declared in data-* attributes, they can be easily changed with JavaScript without removing/adding classes. This way - instead of using classes - we prevent the possibility of accidentally having multiple modes e.g. <span class="is-active mode-1 mode-2"></span>
, because we are not adding classes, instead we are changing the value of our data-* attribute.
Also when styling with .is-active[data-mode="mode-1"]
we make sure the "mode1" does not affect the element when it's not in "active" state.
Good idea is to prefix the "mode" with the state name, e.g. data-active-mode
since there could be cases where element has multiple (boolean) states.
Used to provide JS-only hooks for a component. Can be used to provide a JS-enhanced UI or to abstract other JS behaviours.
Pattern
js-action-name
Examples
js-submit
js-action-save
js-ui-collapsible
js-ui-dropdown
js-ui-dropdown--control
js-ui-dropdown--menu
js-ui-carousel
Could reuse the Template Component naming convention, for example:
specific-name
specific-name--modifier-name
specific-name__subcomponent-name
specific-name__subcomponent-name--subcomponent-modifier-name
Or just let anything go.