@moodxd/utility-offset v1.0.3

MoO Utility Offset

The Offset classes are used to push a cell to the left or right with margins using the same familiar column widths. Options include xof2, xof3, xof4, xof5, xof6, xof8, xof10, xof12 with an option to use the -sm-, -md- and -lg- breakpoint prefixes.

After

Use u-after[x]of[n] to add a margin-left to the element. You can use u-afterNone to reset the margin-left style to 0

<div class="u-cf">
  <div class="u-after1of2 u-bgYellowLighter u-mB2">1of2</div>
</div>

Before

Use u-before[x]of[n] to add a margin-right to the element. You can use u-beforeNone to reset the margin-right style to 0

<div class="u-cf">
  <div class="u-before1of2 u-bgYellowLighter u-mB2">1of2</div>
</div>

Note: Offset classes should be used along with Grid-cell classes.

Best Practice: While the Offset classes can be used to center one or more cells, using the Grid-cell—centered modifier is cleaner with fewer classes to override.