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.less or _variables.scss.

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

Container and Viewport Variables
Variable Default value Purpose
@container-mobile 100% Width applied to mobile container
@container-tablet 720px Width applied to tablet container
@container-desktop 960px Width applied to desktop container
@container-hd 1120px Width applied to HD container
@breakpoint-tablet @container-tablet - 1 (719px) Tablet breakpoint width
@breakpoint-desktop @container-desktop + 20 (980px) Desktop breakpoint width
@breakpoint-hd @container-hd + 20 (1140px) HD breakpoint width

Columns

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

Prefix Mobile Tablet Desktop HD
.col-1 - .col-12 Rules apply on mobile Rules apply on tablet Rules apply on desktop Rules apply on HD
.col-1-tablet - .col-12-tablet Rules don't apply on mobile Rules apply on tablet Rules apply on desktop Rules apply on HD
.col-1-desktop - .col-12-desktop Rules don't apply on mobile Rules don't apply on tablet Rules apply on desktop Rules apply on HD
.col-1-hd - .col-12-hd Rules don't apply on mobile Rules don't apply on tablet Rules don't apply on desktop Rules apply on HD

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="clear">
  <div class="col-1">col-1</div>
  <div class="col-11">col-11</div>
</div>
<div class="clear">
  <div class="col-2">col-2</div>
  <div class="col-10">col-10</div>
</div>
<div class="clear">
  <div class="col-3">col-3</div>
  <div class="col-9">col-9</div>
</div>
<div class="clear">
  <div class="col-4">col-4</div>
  <div class="col-8">col-8</div>
</div>
<div class="clear">
  <div class="col-5">col-5</div>
  <div class="col-7">col-7</div>
</div>
<div class="clear">
  <div class="col-6">col-6</div>
  <div class="col-6">col-6</div>
</div>
<div class="clear">
  <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="clear">
  <div class="col-6 col-3-tablet col-8-desktop col-2-hd">
    content...
  </div>
  <div class="col-6 col-9-tablet col-4-desktop col-10-hd">
    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:

Prefix Mobile Tablet Desktop HD
.push-1 - .push-11 Rules apply on mobile Rules apply on tablet Rules apply on desktop Rules apply on HD
.pull-1 - .pull-11 Rules apply on mobile Rules apply on tablet Rules apply on desktop Rules apply on HD
.push-1-tablet - .push-11-tablet Rules don't apply on mobile Rules apply on tablet Rules apply on desktop Rules apply on HD
.pull-1-tablet - .pull-11-tablet Rules don't apply on mobile Rules apply on tablet Rules apply on desktop Rules apply on HD
.push-1-desktop - .push-11-desktop Rules don't apply on mobile Rules don't apply on tablet Rules apply on desktop Rules apply on HD
.pull-1-desktop - .pull-11-desktop Rules don't apply on mobile Rules don't apply on tablet Rules apply on desktop Rules apply on HD
.push-1-hd - .push-11-hd Rules don't apply on mobile Rules don't apply on tablet Rules don't apply on desktop Rules apply on HD
.pull-1-hd - .pull-11-hd Rules don't apply on mobile Rules don't apply on tablet Rules don't apply on desktop Rules apply on HD

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="clear">
  <div class="col-4 push-8 col-7-tablet push-5-tablet col-3-desktop push-9-desktop col-2-hd push-10-hd">
    content...
  </div>
  <div class="col-8 pull-4 col-5-tablet pull-7-tablet col-9-desktop pull-3-desktop col-10-hd pull-2-hd">
    content...
  </div>
</div>

In addition to the grid, there are extra helpers which can easily show / hide content and remove gutter spacing on columns for specific devices.

Grid helpers are listed below.

Grid Helpers
Class Purpose
.none Hides element on mobile devices and up
.block Sets element to block on mobile devices and up
.inline-block Sets element to inline block on mobile devices and up
.inline Sets element to inline on mobile devices and up
.none-tablet Hides element on tablet devices and up
.block-tablet Sets element to block on tablet devices and up
.inline-block-tablet Sets element to inline block on tablet devices and up
.inline-tablet Sets element to inline on tablet devices and up
.no-padding-tablet Removes padding for tablet devices and up
.no-push-tablet Resets push for tablet devices and up
.no-pull-tablet Resets pull for tablet devices and up
.col-none-tablet Removes float and resets width to auto for tablet devices and up
.none-desktop Hides element on desktop devices and up
.block-desktop Sets element to block on desktop devices and up
.inline-block-desktop Sets element to inline block on desktop devices and up
.inline-desktop Sets element to inline on desktop devices and up
.no-padding-desktop Removes padding for desktop devices and up
.no-push-desktop Resets push for desktop devices and up
.no-pull-desktop Resets pull for desktop devices and up
.col-none-desktop Removes float and resets width to auto for desktop devices and up
.none-hd Hides element on HD devices
.block-hd Sets element to block on HD devices
.inline-block-hd Sets element to inline block on HD devices
.inline-hd Sets element to inline on HD devices
.no-padding-hd Removes padding for HD devices
.no-push-hd Resets push for HD devices
.no-pull-hd Resets pull for HD devices
.no-col-hd Removes float and resets width to auto for HD devices and up

Non-responsive grid

Sometimes, you may be required to create 2 separate versions of a website and may not need responsiveness.

To disable responsiveness, please follow the below steps

  1. Rename _mobile-styles.less to _styles.less within less/base/
  2. Open up style.less in your favourite code editor
  3. Comment out line 21: @import "base/_grid";
  4. Uncomment out line 22: @import "base/_grid-non-responsive";
  5. Replace line 24: @import "_mobile-styles"; to @import "_styles";
  6. Comment out lines 26 - 39 (Tablet Styles, Desktop Styles, HD Styles)
  7. Save the above changes and close _style.less
  8. Styles for your project are now stored within _styles.less
  9. Open index.html and remove line 9:
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  10. Save the above change and close index.html
  11. See the non-responsive grid example in action

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 create SVG fallbacks, border radius, opacity, animations and much more!