Skip to main content
Version: 1.0.x

Columns

This file is diffrent from the other utilities files because it's a requirement for the grid system.
It generates classes to specify the size of a column in responsive contexts.

More examples and details are available on the Grid layout page.

a simple col
a simple col
a simple col
a simple col
<div class="o-row">
<div class="o-col u-12 u-6@tb u-3@lg">a simple col</div>
<div class="o-col u-12 u-6@tb u-3@lg">a simple col</div>
<div class="o-col u-12 u-6@tb u-3@lg">a simple col</div>
<div class="o-col u-12 u-6@tb u-3@lg">a simple col</div>
</div>

Remove gutters

The class .u-no-gutters can be applied to a .o-row to remove gutters between columns

a simple col
a simple col
a simple col
a simple col
<div class="o-row u-no-gutters">
<div class="o-col u-12 u-6@tb u-3@lg">a simple col</div>
<div class="o-col u-12 u-6@tb u-3@lg">a simple col</div>
<div class="o-col u-12 u-6@tb u-3@lg">a simple col</div>
<div class="o-col u-12 u-6@tb u-3@lg">a simple col</div>
</div>