For Developers
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
The component's name is written in camel case.
.ct-myComponent { /* … */ }
<article class="ct-myComponent"> … </article>
Descendant
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
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
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
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
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;
}
The Living Room
XXI century gave a rise to yet another revolution in Europe, but this time it's not a french grizzly struggle for human rights. It's a choice of a luxury that came straight from scandinavian lands. Your living room will never be the same!
Read Article
Our Big Fireplace
Once a young russian furniture designer claimed that both "empires of west and east strife for a simplicity in their houses that can keep up the pace with a modern man". Thus began a new trend of house decore.
Read Article
More than garage
Remember the times when music bands and computer companies rose from small, smelly garages? Those times are way behind us, or are they? Learn for yourself why a garage can now become a substitution for your living.
Read ArticleSign UpFor Free
Be the first to receive our latest news about our bookings! Enter your email address: