Home Documentation
Getting started General
Components
Forms
Utilities
Check changelog.
0.5.3

Others

Hide elements

You can hide an element with the .hide class.
Just use our breakpoints with the .hide- prefix to make them depend on the screensize.

I'm invisible on sm screen and below
I'm invisible lg screen and above

Blockquote

This is a blockquote, Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis assumenda sapiente blanditiis ratione iure amet quae, dolorum laudantium necessitatibus earum facilis quas placeat velit voluptas porro tenetur praesentium? Saepe, maiores.

Truncate class

The .truncate makes your text able to truncate himself.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis eius necessitatibus consectetur aut culpa veniam, sapiente minima non recusandae impedit magnam iure numquam quia, fugiat modi pariatur animi odit dicta.

Divider class

The .divider class is creating a horizontal ling, taking the full width of your element.
This is helpful to separate content.

Header
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis eius necessitatibus consectetur aut culpa veniam, sapiente minima non recusandae impedit magnam iure numquam quia, fugiat modi pariatur animi odit dicta. hello

Cursors

The cursors classes allow you to modify the cursor appearance when you hover the element.
The classes are .cursor-{cursorName} where cursorName can be :
default | pointer | not-allowed | grab | wait | zoom-in | zoom-out | none

Example :

.cursor-pointer

Adding the .cursor-pointer class change the cursor to a pointer on all the element.

Overflow

The overflow classes allow you to modify the overflow of the element.
The classes are .overflow-{propertyName}, .overflow-x-{propertyName} and .overflow-y-{propertyName}
where propertyName can be :
hidden | scroll | auto | visible | initial | inherit

The .overflow-x- and the .overflow-y- prefixes are applying the overflow property on the X and Y axes, while the simple .overflow- prefix apply the property for the X and Y axes.

Opacity

The opacity classes allow you to modify the opacity of the element.
The classes are .opacity-{value}, where value can be :
0 | 10 | 20 | ... | 100

Positions

Class name Description
.absolute-pos Change the element position to absolute.
.fixed-pos Change the element position to fixed.
.relative-pos Change the element position to relative.

Z-index

The z-index classes allow you to modify the z-index of the element.
The classes are .z-index-{value}, where value can be :
0 | 1 | 2 | ... | 10

Others

Class name Description
.w100 Make the element take all the width possible.
.h100 Make the element take all the height possible.
.lowercase Put all the text in lowercase.
.uppercase Put all the text in uppercase.
.capitalize Put the first letter of all the words in uppercase.