Global
Use classes to apply properties to an element. Like the rest of the framework, it uses BEM terminology: the block (first word of the class) is the property is the block, and the second word is the modifier.
Responsive
Show
| Class | Description |
|---|---|
|
Show element if viewport is smaller than 1280px |
|
Show element if viewport is smaller than 1024px |
|
Show element if viewport is smaller than 768px |
|
Show element if viewport is smaller than 568px |
|
Show element if viewport is smaller than 350px |
|
Show elements on touch devices |
Hide
| Class | Description |
|---|---|
|
Hide element if viewport is smaller than 1280px |
|
Hide element if viewport is smaller than 1024px |
|
Hide element if viewport is smaller than 768px |
|
Hide element if viewport is smaller than 568px |
|
Hide element if viewport is smaller than 350px |
|
Hide elements on touch devices |
Spacing and size
Margin
| Class | Description |
|---|---|
|
Apply margin around (half the |
|
Apply margin around, multiple of the `$spacing-sm variable (from 1 to 20) |
|
Apply top margin (half the |
|
Apply top margin, multiple of the `$spacing-sm variable (from 1 to 20) |
|
Apply right margin (half the |
|
Apply right margin, multiple of the `$spacing-sm variable (from 1 to 20) |
|
Apply bottom margin (half the |
|
Apply bottom margin, multiple of the `$spacing-sm variable (from 1 to 20) |
|
Apply left margin (half the |
|
Apply left margin, multiple of the `$spacing-sm variable (from 1 to 20) |
Padding
| Class | Description |
|---|---|
|
Apply padding around (half the |
|
Apply padding around, multiple of the `$spacing-sm variable (from 1 to 20) |
|
Apply top padding (half the |
|
Apply top padding, multiple of the `$spacing-sm variable (from 1 to 20) |
|
Apply right padding (half the |
|
Apply right padding, multiple of the `$spacing-sm variable (from 1 to 20) |
|
Apply bottom padding (half the |
|
Apply bottom padding, multiple of the `$spacing-sm variable (from 1 to 20) |
|
Apply left padding (half the |
|
Apply left padding, multiple of the `$spacing-sm variable (from 1 to 20) |
Width
| Class | Description |
|---|---|
|
Apply a custom width, in percentage of the parent width (increments of 5%) |
|
Apply a custom width, multiple of the `$spacing-sm variable (from 1 to 20) |
Display
General display
Override the display propery of an element.
| Class | Description |
|---|---|
|
Apply |
|
Apply |
|
Apply |
|
Apply |
Flexbox
This framework used mainly flexbox for positionning elements (see Grid component). If your element has a flex or inline-flex property applied, you can use the following classes to override flexbox properties.
| Class | Description |
|---|---|
|
Applye |
|
Applye |
|
Applye |
|
Applye |
|
Applye |
|
Applye |
|
Applye |