Grid

Documentation of grids, wrappers and layout utility classes.

Files

app/styles/components/grid/config.scss
app/styles/components/grid/style.scss

Wrappers

By default there is one main wrapper class .wrapper-main.

wrapper-main: width: 1280px

Code:

<div class='wrapper-main'>
  ...
</div>

Grid

Grid consists of 12 columns.

Note

Start by creating horizontal container with a class of .row. Now you can add elements with a class beginning with .col- and specify width of each with .col--[width], where width is number 1-12.

Basic

Example:

Code:

<div class="row">
  <div class="col--4"> … </div>
  <div class="col--4"> … </div>
  <div class="col--4"> … </div>
</div>

<div class="row">
  <div class="col--4"> … </div>
  <div class="col--8"> … </div>
</div>

<div class="row">
  <div class="col--7"> … </div>
  <div class="col--5"> … </div>
</div>

Automatic sizing

In addition to exact sizing, columns can take all available space or just the space they need using .col--fill and .col--shrink

Example:

Fill all available space

Shrink

Fill all available space

Shrink

Code:

<div class="row">
  <div class="col col--3"> ... </div>
  <div class="col col--fill"> ... </div>
  <div class="col col--shrink"> ... </div>
</div>

<div class="row">
  <div class="col col--fill"> ... </div>
  <div class="col col--fill"> ... </div>
  <div class="col col--fill"> ... </div>
  <div class="col col--fill"> ... </div>
</div>

<div class="row">
  <div class="col col--shrink"> ... </div>
  <div class="col col--shrink"> ... </div>
  <div class="col col--shrink"> ... </div>
  <div class="col col--shrink"> ... </div>
</div>

Alignment

Grid alignment utilities are covered in Utilites section.

Nesting

Rows and columns can be also nested.

Example:

Nested 6

Code:

<div class="row">
  <div class="col--3 mb-none"> ... </div>
  <div class="col--9 mb-none">
    <div class="row row--space">
      <div class="col--6 mb-none"> ... </div>
      <div class="col--6 mb-none"> ... </div>
    </div>
  </div>
</div>

Offsets

Colums can be moved to the right by using classes like .ofst--[width]. You can also center column with class .ofst--center.

Example:

6 osft 1

7 ofst 1

8 osft center

Code:

<div class="row">
  <div class="col--6 ofst--1">
    ...
  </div>
  <div class="col--7 ofst--1">
    ...
  </div>
</div>
<div class="row">
  <div class="col--8 ofst--center">
    ...
  </div>
</div>

Vertical space

Vertical space between rows can be created by using class .row--space.

Example:

col 6 nospace

Code:

<div class="row row--space">
  <div class="col">
    ...
  </div>
</div>
<div class="row row--space">
  <div class="col col--6 col--space col--nospace">
    ...
  </div>
  <div class="col col--6 col--space col--nospace">
    ...
  </div>
</div>

Grid layout

Grid layout sizes its children into an evenly spaced layout. Use .grid to set the base styles and add modifiers and number of items in one row .grid--[number]

To add spacing between items use .grid--spaced. You can even break the layout using .col--[width] on any grid item.

Example:

.grid.grid--4

.grid.grid--2.grid--spaced


                            .col--4


                            .col--4


                            .col--4

Code:

<div class="grid grid--4">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="grid grid--spaced grid--2">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>