Documentation
Index
Effects
They don't have a value in themselves (except for the hide/show properties), but they do add specific features to the displayed style.
Borders and Rounding
As their name suggests, they add rounding to object edges and a gray border to elements.
| code | display |
|---|---|
| <div class="border">>Lorem ipsum dolor sit amet,</div> <div class="border round">>consectetur adipiscing elit.</div> |
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
|
Visibility (show/hide)
Designed for responsive features, it allows elements to be shown and hidden based on screen dimensions. This has defined the operation of these elements, assuming that development will begin from smaller to larger screens.
If a show or hide attribute is defined starting from a certain dimension, elements on smaller screens will have the opposite property. That is, if an element is defined as show-m, it indicates that it will be hidden for screens smaller than medium, but visible for those screens and larger.
Likewise, if an element is defined as hide-l, it indicates that it will be hidden for large screens and larger, but will be displayed on medium or smaller screens.
| code | display |
|---|---|
| <div class="show">Lorem ipsum dolor sit amet,</div> <div class="show-s">consectetur adipiscing elit.</div> <div class="show-m">Vivamus mauris nulla,</div> <div class="show-l">mollis eget arcu ac,</div> <div class="hide-l">hendrerit dictum ligula.</div> <div class="hide-m">Cras justo diam,</div> <div class="hide-s">interdum vestibulum maximus in,</div> <div class="hide">tincidunt eget neque.</div> |
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Vivamus mauris nulla,
mollis eget arcu ac,
tincidunt eget neque.
|
| <div class="show-v">Maecenas vestibulum venenatis diam,</div> <div class="show-h">id sagittis augue venenatis nec.</div> <div class="hide-v">Nunc vehicula neque eget</div> <div class="hide-h">neque bibendum dapibus.</div> |
Maecenas vestibulum venenatis diam,
id sagittis augue venenatis nec.
|
Notification Elements
These are auxiliary elements, created to add color to certain notification conditions.
| code | display |
|---|---|
| <span class="note">123456789</span> abcdefgh <span class="error">ABCDEFGH</span> | 123456789 abcdefgh ABCDEFGH |
| · <div class="text-critical"> <strong>A</strong> </div> · <div class="text-danger"> <strong>B</strong> </div> · <div class="text-alert"> <strong>C</strong> </div> · <div class="text-warning"> <strong>D</strong> </div> · <div class="text-success"> <strong>E</strong> </div> · <div class="text-inform"> <strong>F</strong> </div> · <div class="text-note"> <strong>G</strong> </div> · |
·
A ·
B ·
C ·
D ·
E ·
F ·
G ·
|
| · <div class="border-critical"> <strong>A</strong> </div> · <div class="border-danger"> <strong>B</strong> </div> · <div class="border-alert"> <strong>C</strong> </div> · <div class="border-warning"> <strong>D</strong> </div> · <div class="border-success"> <strong>E</strong> </div> · <div class="border-inform"> <strong>F</strong> </div> · <div class="border-note"> <strong>G</strong> </div> · |
·
A ·
B ·
C ·
D ·
E ·
F ·
G ·
|
| · <div class="bkg-critical"> <strong>A</strong> </div> · <div class="bkg-danger"> <strong>B</strong> </div> · <div class="bkg-alert"> <strong>C</strong> </div> · <div class="bkg-warning"> <strong>D</strong> </div> · <div class="bkg-success"> <strong>E</strong> </div> · <div class="bkg-inform"> <strong>F</strong> </div> · <div class="bkg-note"> <strong>G</strong> </div> · |
·
A ·
B ·
C ·
D ·
E ·
F ·
G ·
|