Components

This is where majority of our work takes place.

Format: .c-component-name[<element>|<modifier>] {}

.c-component {}
.c-component__child {}
.c-component--modifier {}


/* Example */

.c-alert {}
.c-alert__icon {}
.c-alert--success {}

<div class="c-alert c-alert--success">
    <i class="c-alert__icon"></i> ...
</div>

Example

To give you an idea of how idea of how components work, we use alert component as an example:

Success! This is positive notification.

<div class="c-alert c-alert--success">
    <i class="c-alert__icon fa fa-check-circle"></i> Success! This is positive notification.
</div>