Website Logo
0 800 123 4567 Call Us 24/7
Logo Image

Features

Our Features for Developers

Check out variety of our code you can use.

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.less 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;
}