For Developers.
OUR CLASS NAMING
Syntax: ct<componentName>[--modifierName|-descendantName]
Component driven development offers several benefits when reading and writing HTML and CSS:
- It helps to distinguish between the classes for the root of the component, descendant elements, and modifications.
- It keeps the specificity of selectors low.
- It helps to decouple presentation semantics from document semantics.
You can think of components as custom elements that enclose specific semantics, styling, and behaviour.
Component.
ct-[componentName]
The component's name is written in camel case.
.ct-myComponent { /* … */ }
<article class="ct-myComponent"> … </article>
DESCENDANT.
ct-[componentName]-[descendantName]
A component descendant is a class that is attached to a descendant node of a component. It's responsible for applying presentation directly to the descendant on behalf of a particular component. Descendant names are written in camel case.
<article class="ct-tweet">
<header class="ct-tweet-header">
<img class="ct-tweet-avatar" src="{$src}" alt="{$alt}"> …
</header>
<div class="ct-tweet-body"> … </div>
</article>
MODIFIER.
ct-[componentName]--[modifierName]
A component modifier is a class that modifies the presentation of the base component in some form. Modifier names are written in camel case and are separated from the component name by two hyphens. The class is included in the HTML in addition to the base component class.
.ct-personBox{ /* … */ }
/* Default style */
.ct-personBox--default { /* … */ }
.ct-personBox--secundary{ /* … */ }
<div class="ct-personBox ct-personBox--primary">… </div>
JavaScript.
ct-js-[targetName]
JavaScript-specific classes reduce the risk that changing the structure or theme of components will inadvertently affect any required JavaScript behavior and complex functionality. It is not necessary to use them in every case.
<a href="/login" class="btn btn-primary ct-js-login"></a>
JavaScript-specific classes are not, under any circumstances, styled.
Utilities.
ct-u-[targetName]
Utility classes are low-level structural and positional traits. Utilities are applied directly to any element; multiple utilities are used together; and utilities are used alongside component classes.
Utilities exist because certain CSS properties and patterns are used frequently. For example: floats, containing floats, vertical alignment, text truncation. Utilities help to reduce repetition and provide consistent implementations.
Utilities use a camel case name, prefixed with a u namespace. What follows is an example of how various utilities can be used to create a simple structure within a component.
<div class="ct-u-uppercase">
<p class="ct-u-textTruncate">{$text}</p>
<img class="ct-u-block" src="{$src}" alt="">
<img class="ct-u-block" src="{$src}" alt="">
<img class="ct-u-block" src="{$src}" alt="">
</div>
Polyfills.
ct-m-[propertyName]
Mixins generate polyfills for browser prefixed properties. We provide a mixins.css file with the most common browser specific properties.
An example of a border radius mixin:
.ct-m-borderRadius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}