Grids

Basic Grids

The layout object provides us with a column-style layout system. This file contains the basic structural elements, but classes should be complemented with width utilities, for example:


<div class="o-layout">
  <div class="o-layout__item u-1/1">
  </div>
  <div class="o-layout__item u-1/2">
  </div>
  <div class="o-layout__item u-1/2">
  </div>
</div>

.o-layout__item .u-1/1

.o-layout__item .u-1/2

.o-layout__item .u-1/3

.o-layout__item .u-1/4

.o-layout__item .u-1/5

.o-layout__item .u-1/6

Aligning Grids

The below cause the system to fill up from either the center or the right hand side. Default behaviour is to fill up the layout system from the left.


<div class="o-layout o-layout--[right|center]">

.-layout__item .u-1/2

Responsive Grids

The below will create a two-column structure in which each column will fluidly fill half of the width of the parent. We can have more complex systems:


<div class="o-layout">
  <div class="o-layout__item u-1/3@tablet">
  </div>
  <div class="o-layout__item u-1/3@tablet u-1/2">
  </div>
  <div class="o-layout__item u-1/3@tablet u-1/2">
  </div>
</div>

.o-layout__item .u-1/2@desktop

.o-layout__item .u-1/3@desktop .u-1/2@tablet