Modules

Offset

This module helps to specify the offset of the element to the left, right, down or up.

Usage #

Specifying offset for an element has two parameters.


o-{side}-{size}

Where {side} is one of:

  • left
  • right
  • top
  • bottom

The {size} in offset is based on the Spacing scale. So using any spacing value you can set the offset for the element to one or more sides relative to the parent element.


<img class="o-top-5 o-left-3" src="...">
<img class="o-bottom-3" src="...">

Use o-off class to turn off the offset of the element.


<div class="item-with-offset o-off">...</div>

Responsive #

Use -sm suffix to change offset on small screens or to turn it off.


<div class="o-left-4 o-left-2-sm">...</div>
<div class="o-left-4 o-off-sm">...</div>
<div class="o-top-2 o-top-off-sm">...</div>