Grid System

Our grid system is composed of 12 flexible columns with a gutter between columns of 20px - created by given each column a 10px padding on all sides. All columns are built with flexbox properties. We apply border-box so that the border and padding is included in the width of the grid columns.

Grid sizes with equal widths

grid--full

1 / 1

grid--1of2

1 / 2
1 / 2

grid--1of3

1 / 3
1 / 3
1 / 3

grid--1of4

1 / 4
1 / 4
1 / 4
1 / 4

grid--1of5

1 / 5
1 / 5
1 / 5
1 / 5
1 / 5

grid--1of6

1 / 6
1 / 6
1 / 6
1 / 6
1 / 6
1 / 6

grid--1of8

1 / 8
1 / 8
1 / 8
1 / 8
1 / 8
1 / 8
1 / 8
1 / 8

grid--1of10

1 / 10
1 / 10
1 / 10
1 / 10
1 / 10
1 / 10
1 / 10
1 / 10
1 / 10
1 / 10

grid--1of12

1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12

...

code for grid--1of2

Notes:

All grids are created with flexbox. Each flexbox structure requires two nested elements. The grid class used with the modifiers --wrap or --nowrap are used to apply the flexbox container. The grid-cell class creates the flex item and provides the padding between content blocks. In order to make the flex items responsive we use multiple classes on the flex container to switch the layout at different break points.

e.g. grid--full creates 100% flex items as the default view, and small-grid--1of3 sets up a three column layout on the small break point.

Mixed grid

The grid layout is easily extended by nesting and mixing different column sizes.

u-1of12 / u-11of12

1 / 12
11 / 12

u-2of12 / u-10of12

2 / 12
10 / 12

u-3of12 / u-9of12

3 / 12
9 / 12

u-4of12 / u-8of12

4 / 12
8 / 12

u-5of12 / u-7of12

5 / 12
7 / 12

u-2of12 / u-6of12 / u-4of12

2 / 12
6 / 12
4 / 12

...

code for u-2of12 / u-6of12 / u-4of12

Notes:

When using grid columns of different size the class specification must be placed on the grid-cell element. Uniquely sized columns define their own width so no additonal class declarations are needed for responsive stacking. All uniquely sized columns span 100% at the smallest screen size. Unique widths are engaged at the first break point.

Nested grids

Any combination of grids can be nested.

u-9of12 (u-1of3, u-1of3, u-1of3) / u-2of12

1 / 3
1 / 3
1 / 3
3 / 12

u-2of12 / u-6of12 (u-1of2, u-1of2) / u-4of12

2 / 12
1 / 2
1 / 2
4 / 12

...

code for u-9of12 (u-1of3, u-1of3, u-1of3) / u-2of12

Notes:

To access nested grids add the grid--flexCells to the flexbox container element. This class updates all the first level decendant grid-cell classes to be flexbox containers themselves. Once the grid-cell have been converted to flexbox containers the normal classes can be applied to the new container. e.g. grid--full and small-grid--1of3. To avoid doubling the grid gutters the class grid--int-gutters should be used for interior grids. Do not use the class grid--gutters in the nested grid element(s).

Grid gutters

Our flexbox grids consist of two gutters systems one for exterior grids, without nested elements, and one for interior grids when nesting is used.

exterior gutters

Our exterior flexbox items have a 10px padding set on all sides. This padding declaration results in a 20px gutter between columns and a 10px gutter on the outer edges.

1 / 3
1 / 3
1 / 3

interior gutters

Our interior flexbox items have a 10px padding set top and bottom for the smallest of screens. With no padding overrides on the first and last item to ensure the padding is not doubled from the exterior gutter. This padding is switched to 10px left and right sides at the small break point. Again the first and last element remove padding form the outer edges to avoid any double padding.

1 / 2
1 / 2
8 / 12

...

code for u-4of12 (small-grid--1of2) / u-8of12

Notes:

Exterior grid gutters are set by adding the class grid--gutters to the flexbox container element. When this class is set all direct child elements with the class of grid-cell will contain 10px padding on all sides. We use a direct child selector to target the grid-cell elements.

Similarly interior grid gutters are set by adding grid--int-gutters to any grid-cell containing a nested grid.

Responsive columns

Grid sizes with equal widths are all set in percentages. In order to create different grid layouts that adapt to screen size multiple classes need to be used in conjunction. Each grid-cell can be set with the corresponding break point of small, medium and large.

The following table shows the media-query breakpoints and corresponding class names.

equal grid columns

grid--full flex: 0 0 100%;
≥ 60em 48em ≤ 60em 30em ≤ 48em ≤ 30em
large-grid--full med-grid--full small-grid--full grid--full
grid--1of2 flex: 0 0 50%;
≥ 60em 48em ≤ 60em 30em ≤ 48em ≤ 30em
large-grid--1of2 med-grid--1of2 small-grid--1of2 grid--1of2
grid--1of3 flex: 0 0 33.3%;
≥ 60em 48em ≤ 60em 30em ≤ 48em ≤ 30em
large-grid--1of3 med-grid--1of3 small-grid--1of3 grid--1of3
grid--1of4 flex: 0 0 25%;
≥ 60em 48em ≤ 60em 30em ≤ 48em ≤ 30em
large-grid--1of4 med-grid--1of4 small-grid--1of4 grid--1of4
grid--1of5 flex: 0 0 20%;
≥ 60em 48em ≤ 60em 30em ≤ 48em ≤ 30em
large-grid--1of5 med-grid--1of5 small-grid--1of5 grid--1of5
grid--1of6 flex: 0 0 16.6667%;
≥ 60em 48em ≤ 60em 30em ≤ 48em ≤ 30em
large-grid--1of6 med-grid--1of6 small-grid--1of6 grid--1of6
grid--1of8 flex: 0 0 12.5%;
≥ 60em 48em ≤ 60em 30em ≤ 48em ≤ 30em
large-grid--1of8 med-grid--1of8 n/a n/a
grid--1of10 flex: 0 0 10%;
≥ 60em 48em ≤ 60em 30em ≤ 48em ≤ 30em
large-grid--1of10 med-grid--1of10 n/a n/a
grid--1of12 flex: 0 0 8.3333%;
≥ 60em 48em ≤ 60em 30em ≤ 48em ≤ 30em
large-grid--1of12 n/a n/a n/a

mixed grid columns

  ≥ 30em ≤ 30em
u-1of12 8.3333%; 100%;
u-2of12 8.3333%; 100%;
u-2of12 16.6666%; 100%;
u-3of12 25%; 100%;
u-4of12 33.3333%; 100%;
u-5of12 41.6667%; 100%;
u-6of12 50%; 100%;
u-7of12 58.3333%; 100%;
u-8of12 66.6667%; 100%;
u-9of12 75%; 100%;
u-10of12 83.3333%; 100%;
u-11of12 91.6667%; 100%;