Offsets
An offset is another column class, it has a screen size and a width. Instead of setting the column width it pushes the column, a number of column sizes, to the left at the desired screen size.
A column class looks like: grid__col--$screenSize-offset-$width
NOTE: can't be used with easy columns.
Example
Offset 11
Offset 10
Offset 9
Offset 8
Offset 7
Offset 6
Offset 5
Offset 4
Offset 3
Offset 2
Offset 1
Markup: grid/offsets.html
<div class="grid">
<div class="grid__row">
<div class="grid__col--xs-1 grid__col--xs-offset-11">
<div class="styleguide__box">Offset 11</div>
</div>
</div>
<div class="grid__row">
<div class="grid__col--xs-1 grid__col--xs-offset-10">
<div class="styleguide__box">Offset 10</div>
</div>
</div>
<div class="grid__row">
<div class="grid__col--xs-1 grid__col--xs-offset-9">
<div class="styleguide__box">Offset 9</div>
</div>
</div>
<div class="grid__row">
<div class="grid__col--xs-1 grid__col--xs-offset-8">
<div class="styleguide__box">Offset 8</div>
</div>
</div>
<div class="grid__row">
<div class="grid__col--xs-1 grid__col--xs-offset-7">
<div class="styleguide__box">Offset 7</div>
</div>
</div>
<div class="grid__row">
<div class="grid__col--xs-1 grid__col--xs-offset-6">
<div class="styleguide__box">Offset 6</div>
</div>
</div>
<div class="grid__row">
<div class="grid__col--xs-1 grid__col--xs-offset-5">
<div class="styleguide__box">Offset 5</div>
</div>
</div>
<div class="grid__row">
<div class="grid__col--xs-1 grid__col--xs-offset-4">
<div class="styleguide__box">Offset 4</div>
</div>
</div>
<div class="grid__row">
<div class="grid__col--xs-1 grid__col--xs-offset-3">
<div class="styleguide__box">Offset 3</div>
</div>
</div>
<div class="grid__row">
<div class="grid__col--xs-1 grid__col--xs-offset-2">
<div class="styleguide__box">Offset 2</div>
</div>
</div>
<div class="grid__row">
<div class="grid__col--xs-1 grid__col--xs-offset-1">
<div class="styleguide__box">Offset 1</div>
</div>
</div>
</div>
Source:
grid/_grid-examples.scss, line 44