Alignments
Left
Center
Right
Appearances
Display
dn | The element will not be displayed at all.
di | Displays an element as an inline element (like <span>).
dib | Displays an element as an inline-level block container.
db | Displays an element as a block element (like <p>).
df | Displays an element as an block-level flex container.
dt | Let the element behave like a <table> element.
dtc | Let the element behave like a <td> element.
Visibility
invisible | Makes the element invisible but keep its space on the page
Toggle purposes
hide | Hide content
show | Show content (block)
Opacity
Borders
Widths
None
All
bdr-w-0 | Removes all borders.
Top
bdr-top-w-0 | Removes top border.
Right
bdr-right-w-0 | Removes right border.
Bottom
bdr-bottom-w-0 | Removes bottom border.
Left
bdr-left-w-0 | Removes left border.
1px
All
bdr-w-1 | Set a 1px-width border to all sides.
Top
bdr-top-w-1 | Set a 1px-width top border.
Right
bdr-right-w-1 | Set a 1px-width right border.
Bottom
bdr-bottom-w-1 | Set a 1px-width bottom border.
Left
bdr-left-w-1 | Set a 1px-width bottom border.
Colors
Normal
bdr-col-normal
Pale
bdr-col-pale
Focus
bdr-col-focus
Alpha
bdr-col-alpha
Colors
Texts
text-col-green-dark | Dark green color
text-col-red-dark | Dark red color
text-col-light | light color
text-col-meta |
text-col-disabled | disabled color
text-col-success | success color
text-col-warning | warning color
text-col-default | default color
text-col-system | system color
text-col-error | error color
Backgrounds
bgr-default | Sets white background
bgr-silver | Sets silver (gray) background
bgr-dark | Sets dark background
Theme based
Texts
Theme based properties may be used when *[data-theme='THEME_NAME'] is applied to a parent element.
theme-color | Set base color
theme-color-middark | Set middark color
theme-color-dark | Set dark color
Backgrounds
theme-bgr | Set base background color
theme-bgr-middark | Set middark background color
theme-bgr-dark | Set dark background color
Borders
theme-border | Set border color
theme-border-middark | Set middark border color
theme-border-dark | Set dark border color
Non theme-based border color options.
Dimentions
Fixed dimensions
Width
From w100 to w500 through 25
Including: w520 w670 w740 w800 w920 w964
Height
From h100 to h500 through 25
Including: h34 h40 h535 600
Limited dimensions
Min width
From minw100 to minw500 through 25
Including: minw50 minw75
Max width
From maxw100 to maxw500 through 25
Including: maxw50 maxw75
Min height
From minh100 to minh500 through 25
Including: minh50 minh75
Max height
From maxh100 to maxh500 through 25
Including: maxh50 maxh75
Floats
Note: Use clear property class cf or clearfix to control the behaviour of floating elements.
Left
pull-left | Floats the container to the left.
Right
pull-right | Floats the container to the right.
Placeholders
In progress...
Spaces
Paddings
The number is equivalent to the value of the property in pixels.
For example p0 sets padding: 0 for all sides of the given container.
from p0 to p80 through 5 | All sides padding.
from pt0 to pt80 through 5 | Top padding.
from pr0 to pr80 through 5 | Right padding.
from pb0 to pb80 through 5 | Bottom padding.
from pl0 to pl80 through 5 | Left padding.
Margins
The number is equivalent to the value of the property in pixels.
For example mb15 sets margin-bottom: 15px to the bottom side of the given container.
from m0 to m80 through 5 | All sides margin.
from mt0 to mt80 through 5 | Top margin.
from mr0 to mr80 through 5 | Right margin.
from mb0 to mb80 through 5 | Bottom margin.
from ml0 to ml80 through 5 | Left margin.