Grid

A mobile-first, 12 column grid built for all devices big and small. The syntax is simple and it works on all major browsers including Chrome, Safari, Firefox and Internet Explorer 8+.


Overview

Base includes a flexible, 12-column grid that scales and supports nesting so you can get started right away.


Creating a grid

  1. Create a new element with the class .clear applied to ensure the grid columns are grouped and cleared correctly.
  2. Columns can be created by adding new elements within .clear and applying appropriate column classes (.col-1 - .col-12).

Base is mobile-first, so code for small screens first, and larger devices will inherit those styles.


By default, Base caters for 4 viewports:


Containers

There are 2 types of containers:

The width of containers and breakpoints for each viewport can be updated within _variables.scss.

A summary of the variables and there usage are as follows:

Container and Viewport Variables
Variable Default value Purpose
$container 100% Width applied to mobile container
$container-m 720px Width applied to tablet container
$container-l 960px Width applied to desktop container
$container-xl 1120px Width applied to HD container
$breakpoint-m $container-m + 20 (740px) Tablet breakpoint width
$breakpoint-l $container-l + 20 (980px) Desktop breakpoint width
$breakpoint-xl $container-xl + 20 (1140px) HD breakpoint width

Columns

A list of all available columns for each viewport are as follows:


Mobile-First Grid Example

col-1
col-11
col-2
col-10
col-3
col-9
col-4
col-8
col-5
col-7
col-6
col-6
col-12
<div class="row clear pad-top-5 pad-bottom-5">
  <div class="col-1">col-1</div>
  <div class="col-11">col-11</div>
</div>
<div class="row clear pad-top-5 pad-bottom-5">
  <div class="col-2">col-2</div>
  <div class="col-10">col-10</div>
</div>
<div class="row clear pad-top-5 pad-bottom-5">
  <div class="col-3">col-3</div>
  <div class="col-9">col-9</div>
</div>
<div class="row clear pad-top-5 pad-bottom-5">
  <div class="col-4">col-4</div>
  <div class="col-8">col-8</div>
</div>
<div class="row clear pad-top-5 pad-bottom-5">
  <div class="col-5">col-5</div>
  <div class="col-7">col-7</div>
</div>
<div class="row clear pad-top-5 pad-bottom-5">
  <div class="col-6">col-6</div>
  <div class="col-6">col-6</div>
</div>
<div class="row clear pad-top-5 pad-bottom-5">
  <div class="col-12">col-12</div>
</div>    
    

Mixed Grid Example

col 6 col 3 col 8 col 2
col 6 col 9 col 4 col 10
<div class="row clear pad-top-5 pad-bottom-5">
  <div class="col-6 col-3-m col-8-l col-2-xl">
    content...
  </div>
  <div class="col-6 col-9-m col-4-l col-10-xl">
    content...
  </div>
</div>

Grid Offsets

The grid also includes offsets for pushing and pulling columns into place.

A list of all available offsets for each viewport are as follows:

  • .push-1
    Applies a left offset of 8.33333% for small devices (mobile) and up
  • .pull-1
    Applies a right offset of 8.33333% for small devices (mobile) and up
  • .push-2
    Applies a left offset of 16.66667% to small devices (mobile) and up
  • .pull-2
    Applies a right offset of 16.66667% to small devices (mobile) and up
  • .push-3
    Applies a left offset of 25% to small devices (mobile) and up
  • .pull-3
    Applies a right offset of 25% to small devices (mobile) and up
  • .push-4
    Applies a left offset of 33.33333% to small devices (mobile) and up
  • .pull-4
    Applies a right offset of 33.33333% to small devices (mobile) and up
  • .push-5
    Applies a left offset of 41.66667% to small devices (mobile) and up
  • .pull-5
    Applies a right offset of 41.66667% to small devices (mobile) and up
  • .push-6
    Applies a left offset of 50% to small devices (mobile) and up
  • .pull-6
    Applies a right offset of 50% to small devices (mobile) and up
  • .push-7
    Applies a left offset of 58.33333% to small devices (mobile) and up
  • .pull-7
    Applies a right offset of 58.33333% to small devices (mobile) and up
  • .push-8
    Applies a left offset of 66.66667% to small devices (mobile) and up
  • .pull-8
    Applies a right offset of 66.66667% to small devices (mobile) and up
  • .push-9
    Applies a left offset of 75% to small devices (mobile) and up
  • .pull-9
    Applies a right offset of 75% to small devices (mobile) and up
  • .push-10
    Applies a left offset of 83.33333% to small devices (mobile) and up
  • .pull-10
    Applies a right offset of 83.33333% to small devices (mobile) and up
  • .push-11
    Applies a left offset of 91.66667% to small devices (mobile) and up
  • .pull-11
    Applies a right offset of 91.66667% to small devices (mobile) and up
  • .push-1-2
    Applies a left offset of 50% to small devices (mobile) and up
  • .pull-1-2
    Applies a right offset of 50% to small devices (mobile) and up
  • .push-1-3
    Applies a left offset of 33.33333% to small devices (mobile) and up
  • .pull-1-3
    Applies a right offset of 33.33333% to small devices (mobile) and up
  • .push-2-3
    Applies a left offset of 66.66667% to small devices (mobile) and up
  • .pull-2-3
    Applies a right offset of 66.66667% to small devices (mobile) and up
  • .push-1-4
    Applies a left offset of 25% to small devices (mobile) and up
  • .pull-1-4
    Applies a right offset of 25% to small devices (mobile) and up
  • .push-3-4
    Applies a left offset of width: 75% to small devices (mobile) and up
  • .pull-3-4
    Applies a right offset of width: 75% to small devices (mobile) and up
  • .push-1-5
    Applies a left offset of 20% to small devices (mobile) and up
  • .pull-1-5
    Applies a right offset of 20% to small devices (mobile) and up
  • .push-2-5
    Applies a left offset of 40% to small devices (mobile) and up
  • .pull-2-5
    Applies a right offset of 40% to small devices (mobile) and up
  • .push-3-5
    Applies a left offset of 60% to small devices (mobile) and up
  • .pull-3-5
    Applies a right offset of 60% to small devices (mobile) and up
  • .push-4-5
    Applies a left offset of 80% to small devices (mobile) and up
  • .pull-4-5
    Applies a right offset of 80% to small devices (mobile) and up
  • .push-1-m
    Applies a left offset of 8.33333% for medium devices (tablet) and up
  • .pull-1-m
    Applies a right offset of 8.33333% for medium devices (tablet) and up
  • .push-2-m
    Applies a left offset of 16.66667% to medium devices (tablet) and up
  • .pull-2-m
    Applies a right offset of 16.66667% to medium devices (tablet) and up
  • .push-3-m
    Applies a left offset of 25% to medium devices (tablet) and up
  • .pull-3-m
    Applies a right offset of 25% to medium devices (tablet) and up
  • .push-4-m
    Applies a left offset of 33.33333% to medium devices (tablet) and up
  • .pull-4-m
    Applies a right offset of 33.33333% to medium devices (tablet) and up
  • .push-5-m
    Applies a left offset of 41.66667% to medium devices (tablet) and up
  • .pull-5-m
    Applies a right offset of 41.66667% to medium devices (tablet) and up
  • .push-6-m
    Applies a left offset of 50% to medium devices (tablet) and up
  • .pull-6-m
    Applies a right offset of 50% to medium devices (tablet) and up
  • .push-7-m
    Applies a left offset of 58.33333% to medium devices (tablet) and up
  • .pull-7-m
    Applies a right offset of 58.33333% to medium devices (tablet) and up
  • .push-8-m
    Applies a left offset of 66.66667% to medium devices (tablet) and up
  • .pull-8-m
    Applies a right offset of 66.66667% to medium devices (tablet) and up
  • .push-9-m
    Applies a left offset of 75% to medium devices (tablet) and up
  • .pull-9-m
    Applies a right offset of 75% to medium devices (tablet) and up
  • .push-10-m
    Applies a left offset of 83.33333% to medium devices (tablet) and up
  • .pull-10-m
    Applies a right offset of 83.33333% to medium devices (tablet) and up
  • .push-11-m
    Applies a left offset of 91.66667% to medium devices (tablet) and up
  • .pull-11-m
    Applies a right offset of 91.66667% to medium devices (tablet) and up
  • .push-1-2-m
    Applies a left offset of 50% to medium devices (tablet) and up
  • .pull-1-2-m
    Applies a right offset of 50% to medium devices (tablet) and up
  • .push-1-3-m
    Applies a left offset of 33.33333% to medium devices (tablet) and up
  • .pull-1-3-m
    Applies a right offset of 33.33333% to medium devices (tablet) and up
  • .push-2-3-m
    Applies a left offset of 66.66667% to medium devices (tablet) and up
  • .pull-2-3-m
    Applies a right offset of 66.66667% to medium devices (tablet) and up
  • .push-1-4-m
    Applies a left offset of 25% to medium devices (tablet) and up
  • .pull-1-4-m
    Applies a right offset of 25% to medium devices (tablet) and up
  • .push-3-4-m
    Applies a left offset of width: 75% to medium devices (tablet) and up
  • .pull-3-4-m
    Applies a right offset of width: 75% to medium devices (tablet) and up
  • .push-1-5-m
    Applies a left offset of 20% to medium devices (tablet) and up
  • .pull-1-5-m
    Applies a right offset of 20% to medium devices (tablet) and up
  • .push-2-5-m
    Applies a left offset of 40% to medium devices (tablet) and up
  • .pull-2-5-m
    Applies a right offset of 40% to medium devices (tablet) and up
  • .push-3-5-m
    Applies a left offset of 60% to medium devices (tablet) and up
  • .pull-3-5-m
    Applies a right offset of 60% to medium devices (tablet) and up
  • .push-4-5-m
    Applies a left offset of 80% to medium devices (tablet) and up
  • .pull-4-5-m
    Applies a right offset of 80% to medium devices (tablet) and up
  • .push-1-l
    Applies a left offset of 8.33333% for large devices (desktop) and up
  • .pull-1-l
    Applies a right offset of 8.33333% for large devices (desktop) and up
  • .push-2-l
    Applies a left offset of 16.66667% to large devices (desktop) and up
  • .pull-2-l
    Applies a right offset of 16.66667% to large devices (desktop) and up
  • .push-3-l
    Applies a left offset of 25% to large devices (desktop) and up
  • .pull-3-l
    Applies a right offset of 25% to large devices (desktop) and up
  • .push-4-l
    Applies a left offset of 33.33333% to large devices (desktop) and up
  • .pull-4-l
    Applies a right offset of 33.33333% to large devices (desktop) and up
  • .push-5-l
    Applies a left offset of 41.66667% to large devices (desktop) and up
  • .pull-5-l
    Applies a right offset of 41.66667% to large devices (desktop) and up
  • .push-6-l
    Applies a left offset of 50% to large devices (desktop) and up
  • .pull-6-l
    Applies a right offset of 50% to large devices (desktop) and up
  • .push-7-l
    Applies a left offset of 58.33333% to large devices (desktop) and up
  • .pull-7-l
    Applies a right offset of 58.33333% to large devices (desktop) and up
  • .push-8-l
    Applies a left offset of 66.66667% to large devices (desktop) and up
  • .pull-8-l
    Applies a right offset of 66.66667% to large devices (desktop) and up
  • .push-9-l
    Applies a left offset of 75% to large devices (desktop) and up
  • .pull-9-l
    Applies a right offset of 75% to large devices (desktop) and up
  • .push-10-l
    Applies a left offset of 83.33333% to large devices (desktop) and up
  • .pull-10-l
    Applies a right offset of 83.33333% to large devices (desktop) and up
  • .push-11-l
    Applies a left offset of 91.66667% to large devices (desktop) and up
  • .pull-11-l
    Applies a right offset of 91.66667% to large devices (desktop) and up
  • .push-1-2-l
    Applies a left offset of 50% to large devices (desktop) and up
  • .pull-1-2-l
    Applies a right offset of 50% to large devices (desktop) and up
  • .push-1-3-l
    Applies a left offset of 33.33333% to large devices (desktop) and up
  • .pull-1-3-l
    Applies a right offset of 33.33333% to large devices (desktop) and up
  • .push-2-3-l
    Applies a left offset of 66.66667% to large devices (desktop) and up
  • .pull-2-3-l
    Applies a right offset of 66.66667% to large devices (desktop) and up
  • .push-1-4-l
    Applies a left offset of 25% to large devices (desktop) and up
  • .pull-1-4-l
    Applies a right offset of 25% to large devices (desktop) and up
  • .push-3-4-l
    Applies a left offset of width: 75% to large devices (desktop) and up
  • .pull-3-4-l
    Applies a right offset of width: 75% to large devices (desktop) and up
  • .push-1-5-l
    Applies a left offset of 20% to large devices (desktop) and up
  • .pull-1-5-l
    Applies a right offset of 20% to large devices (desktop) and up
  • .push-2-5-l
    Applies a left offset of 40% to large devices (desktop) and up
  • .pull-2-5-l
    Applies a right offset of 40% to large devices (desktop) and up
  • .push-3-5-l
    Applies a left offset of 60% to large devices (desktop) and up
  • .pull-3-5-l
    Applies a right offset of 60% to large devices (desktop) and up
  • .push-4-5-l
    Applies a left offset of 80% to large devices (desktop) and up
  • .pull-4-5-l
    Applies a right offset of 80% to large devices (desktop) and up
  • .push-1-xl
    Applies a left offset of 8.33333% for extra large devices (HD) and up
  • .pull-1-xl
    Applies a right offset of 8.33333% for extra large devices (HD) and up
  • .push-2-xl
    Applies a left offset of 16.66667% to extra large devices (HD) and up
  • .pull-2-xl
    Applies a right offset of 16.66667% to extra large devices (HD) and up
  • .push-3-xl
    Applies a left offset of 25% to extra large devices (HD) and up
  • .pull-3-xl
    Applies a right offset of 25% to extra large devices (HD) and up
  • .push-4-xl
    Applies a left offset of 33.33333% to extra large devices (HD) and up
  • .pull-4-xl
    Applies a right offset of 33.33333% to extra large devices (HD) and up
  • .push-5-xl
    Applies a left offset of 41.66667% to extra large devices (HD) and up
  • .pull-5-xl
    Applies a right offset of 41.66667% to extra large devices (HD) and up
  • .push-6-xl
    Applies a left offset of 50% to extra large devices (HD) and up
  • .pull-6-xl
    Applies a right offset of 50% to extra large devices (HD) and up
  • .push-7-xl
    Applies a left offset of 58.33333% to extra large devices (HD) and up
  • .pull-7-xl
    Applies a right offset of 58.33333% to extra large devices (HD) and up
  • .push-8-xl
    Applies a left offset of 66.66667% to extra large devices (HD) and up
  • .pull-8-xl
    Applies a right offset of 66.66667% to extra large devices (HD) and up
  • .push-9-xl
    Applies a left offset of 75% to extra large devices (HD) and up
  • .pull-9-xl
    Applies a right offset of 75% to extra large devices (HD) and up
  • .push-10-xl
    Applies a left offset of 83.33333% to extra large devices (HD) and up
  • .pull-10-xl
    Applies a right offset of 83.33333% to extra large devices (HD) and up
  • .push-11-xl
    Applies a left offset of 91.66667% to extra large devices (HD) and up
  • .pull-11-xl
    Applies a right offset of 91.66667% to extra large devices (HD) and up
  • .push-1-2-xl
    Applies a left offset of 50% to extra large devices (HD) and up
  • .pull-1-2-xl
    Applies a right offset of 50% to extra large devices (HD) and up
  • .push-1-3-xl
    Applies a left offset of 33.33333% to extra large devices (HD) and up
  • .pull-1-3-xl
    Applies a right offset of 33.33333% to extra large devices (HD) and up
  • .push-2-3-xl
    Applies a left offset of 66.66667% to extra large devices (HD) and up
  • .pull-2-3-xl
    Applies a right offset of 66.66667% to extra large devices (HD) and up
  • .push-1-4-xl
    Applies a left offset of 25% to extra large devices (HD) and up
  • .pull-1-4-xl
    Applies a right offset of 25% to extra large devices (HD) and up
  • .push-3-4-xl
    Applies a left offset of width: 75% to extra large devices (HD) and up
  • .pull-3-4-xl
    Applies a right offset of width: 75% to extra large devices (HD) and up
  • .push-1-5-xl
    Applies a left offset of 20% to extra large devices (HD) and up
  • .pull-1-5-xl
    Applies a right offset of 20% to extra large devices (HD) and up
  • .push-2-5-xl
    Applies a left offset of 40% to extra large devices (HD) and up
  • .pull-2-5-xl
    Applies a right offset of 40% to extra large devices (HD) and up
  • .push-3-5-xl
    Applies a left offset of 60% to extra large devices (HD) and up
  • .pull-3-5-xl
    Applies a right offset of 60% to extra large devices (HD) and up
  • .push-4-5-xl
    Applies a left offset of 80% to extra large devices (HD) and up
  • .pull-4-5-xl
    Applies a right offset of 80% to extra large devices (HD) and up

Mixed Offset Example

col 4 with push 8 col 7 with push 5 col 3 with push 9 col 2 with push 10
col 8 with pull 8 col 5 with pull 7 col 9 with pull 3 col 10 with pull 2
<div class="row clear pad-top-5 pad-bottom-5">
  <div class="col-4 push-8 col-7-m push-5-m col-3-l push-9-l col-2-xl push-10-xl">
    content...
  </div>
  <div class="col-8 pull-4 col-5-m pull-7-m col-9-l pull-3-l col-10-xl pull-2-xl">
    content...
  </div>
</div>

Grid helpers

In addition to the grid, there are extra helpers which can easily show / hide content and modify display types for specific devices.

  • .none
    Hides element for small devices (mobile) and up
  • .block
    Sets element to block for small devices (mobile) and up
  • .inline-block
    Sets element to inline-block for small devices (mobile) and up
  • .inline
    Sets element to inline for small devices (mobile) and up
  • .none-m
    Hides element for medium devices (tablet) and up
  • .block-m
    Sets element to block for medium devices (tablet) and up
  • .inline-block-m
    Sets element to inline-block for medium devices (tablet) and up
  • .inline-m
    Sets element to inline for medium devices (tablet) and up
  • .none-l
    Hides element for large devices (desktop) and up
  • .block-l
    Sets element to block for large devices (desktop) and up
  • .inline-block-l
    Sets element to inline-block for large devices (desktop) and up
  • .inline-l
    Sets element to inline for large devices (desktop) and up
  • .none-xl
    Hides element for extra large devices (HD) and up
  • .block-xl
    Sets element to block for extra large devices (HD) and up
  • .inline-block-xl
    Sets element to inline-block for extra large devices (HD) and up
  • .inline-xl
    Sets element to inline for extra large devices (HD) and up

Sub-Pixel Issue

To get around the sub-pixel problem, make sure to add a class of .right to the last column of a .clear.

Example:

<div class="clear">
  <div class="col-8">col-8</div>
  <div class="col-4 right">col-4 right</div>
</div>    


Mixins

A set of helpful mixins to easily modify font sizes, line heights, animations and much more!