Grid

Our grid system uses fractions at breakpoints.
The basic structure consists of a .grid containing one or more .cols.

Here's a simple example showing a grid containing 2 columns:

<div class="grid">
  <div class="col-1/2@mobile"></div>
  <div class="col-1/2@mobile"></div>
</div>

Classname structure

each class is made up of two parts. The fractional width of the column and the breakpoint at which it should be applied.

width: col-1/2 Brealpoint: @mobile

Column widths

Always use the simplest form of any fraction. Eg. 2/4 can be better expressed as 1/2.
The following fractions up to 13ths are available within the system:

1/2
1/3,   2/3
1/4,   (2/4 can be simplified to 1/2),   3/4
1/5,   2/5,   3/5,   4/5
1/6,   5/6
1/7,   2/7,   3/7,   4/7,   5/7,   6/7
1/8,   3/8,   5/8,   7/8
1/9,   2/9,   4/9,   5/9,   7/9
1/10,   3/10,   7/10
1/11,   2/11,   3/11,   4/11,   5/11,   6/11,   7/11,   8/11,   9/11,   10/11
1/12,   5/12,   7/12,   11/12
1/13,   2/13,   3/13,   4/13,   5/13,   6/13,   7/13,   8/13,   9/13,   10/13,   11/13,   12/13

Breakpoints

All columns start at 100% width until a breakpoint occurs and tells them to do something different. We've selected 6 breakpoints which are used for the grid system and other elements within the design system.

These nominally use device names but these are only for readability and should not be taken as a guarantee that a certain size will directly translate to that sort of device. These sizes are measured in REMs, a scale based on the root font size of the site. Changing the base font size will affect all breakpoints.

• mobile: 20rem
• mobilewide: 35rem
• tablet: 47.5rem
• tabletwide: 55rem
• smalldesktop: 70rem
• desktop: 85rem

Chaining classes

To have columns resize based on the viewable screen area we can use more than one column class at a time:

<div class="grid">
  <div class="col-1/2@mobile col-1/4@desktop"></div>
  <div class="col-1/2@mobile col-3/4@desktop"></div>
</div>

This example above will show two 1/2 width columns at mobile but on a desktop the first will be 1/4 and the second will be 3/4.

Nesting grids

Grids can be safely nested within each other to create virtually any layout.

It's worth noting that each grid must sit within a column, directly nesting one .grid inside another will create layout issues.
Also all fractions are relative to the direct parent grid, not the original ancestral grid wrapper.

<div class="grid">
  <div class="col-1/2@mobile col-1/4@desktop"></div>
  <div class="col-1/2@mobile col-3/4@desktop">
    <div class="grid">
      <div class="col-1/3@mobile"></div>
      <div class="col-2/3@mobile"></div>
    </div>
  </div>
</div>