Utility classes

The template includes a set a custom utility classes, to change the look of an element:

Align

align-left
text-align: left
align-center
text-align: center
align-right
text-align: right

Floating elements

float-left
float: left
float-right
float: right
clear-left
clear: left
clear-right
clear: right
clear-both
clear: both

Padding

with-padding
padding: 20px
with-mid-padding
padding: 10px
with-small-padding
padding: 5px
no-padding
padding: 0

Mouse events

This class disables mouse events on compatible browsers, a polyfill is provded in setup.js for others

no-pointer-events
pointer-events: none

Responsive classes

Those classes allow hiding or showing content depending on the active media query:

only-on-mobile
Shown only on mobile sizes
only-on-tablet
Shown only on tablet sizes
only-on-desktop
Shown only on desktop sizes
hidden-on-mobile
Hidden only on mobile sizes
hidden-on-tablet
Hidden only on tablet sizes
hidden-on-desktop
Hidden only on desktop sizes

Margins

large-margin-top
margin-top: 30px
margin-top
margin-top: 16px
mid-margin-top
margin-top: 8px
small-margin-top
margin-top: 4px
no-margin-top
margin-top: 0
large-margin-right
margin-right: 30px
margin-right
margin-right: 16px
mid-margin-right
margin-right: 8px
small-margin-right
margin-right: 4px
no-margin-right
margin-right: 0
large-margin-left
margin-left: 30px
margin-left
margin-left: 16px
mid-margin-left
margin-left: 8px
small-margin-left
margin-left: 4px
no-margin-left
margin-left: 0
large-margin-bottom
margin-bottom: 30px
margin-bottom
margin-bottom: 16px
mid-margin-bottom
margin-bottom: 8px
small-margin-bottom
margin-bottom: 4px
no-margin-bottom
margin-bottom: 0

Absolute positioning

relative
position: relative
absolute-left
absolutely positioned on left (vertically centered)
absolute-right
absolutely positioned on right (vertically centered)

Show on parent hover

This class is only active if the device does not handle touch

show-on-parent-hover
Element is visible only on parent hover