GRIDS is a user-friendly framework compatible with the numerous devices we encounter daily. This tool-kit features various view-port and size configurations, twelve fluid-width columns, gridline overlays, breakpoint markers and column modiferier guides to aid in page layout.

The Basics

GRIDS is made up of a parent element with a class of grid and direct children that have a class name of col-{number}. Each grid row is made up of 12 fluid columns. A direct child is allowed to span multiple columns by specifying a number from 1 to 12 in the col-{number} class name.

The following example is an element that spans 6 columns, taking up one half of the row (since 6 out of 12 is one half).

.col-6
<!-- element spanning six columns -->
<div class="grid">
  <div class="col-6">.col-6</div>
</div>

Next, lets create a grid that has two elements, that when combined, will take up the whole row. Note, that to span the entire grid width/row, the sum of the columns must equal 12. We will use col-3 and col-9 (3 + 9 is 12 total columns

.col-3
.col-9
<!-- two column grid row -->
<div class="grid">
  <div class="col-3">.col-3</div>
  <div class="col-9">.col-9</div>
</div>

To demonstrate this once more, how about we create a grid with three columns. The first with a span of 3, second spannig 6, and the third spanning the remaining 3.

.col-3
.col-6
.col-3
<!-- grid row with three columns -->
<div class="grid">
  <div class="col-3">.col-3</div>
  <div class="col-6">.col-6</div>
  <div class="col-3">.col-3</div>
</div>

To round off the basics, you can see from this example all the variations of spanning multiple columns

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-7
col-5
col-8
col-4
col-9
col-3
col-10
col-2
col-11
col-1
col-12

"Push It"

Ok, so far we know how to create a simple grid, with each element spanning one or multiple columns, but what if we want a space between columns? This is where the col-push-{number} class will come in handy.

Thinking back to our original example (a single element taking up the first half of our grid), let's expand on this and first push it all the way to the right (6 colums over), and then push it to the center (3 columns over). To help visualize this a bit more, click the gridlines button here, or in the bottom-left corner of this page to enable the grid overlay (this is one of the helper tools that comes with this framework, but more on that later).

.col-push-6 .col-6
.col-push-3 .col-6
<!-- pushing columns (inserting blank space) is easy -->
<div class="grid">
  <div class="col-push-6 col-6">.col-push-6 .col-6</div>
</div>
<div class="grid">
  <div class="col-push-3 col-6">.col-push-3 .col-6</div>
</div>					

col-push-{number} can also be used in combination with other columns within a row.

.col-2
.col-push3 .col-5
<!-- two columns with the second pushed to the right -->
<div class="grid">
  <div class="col-2">.col-2</div>
  <div class="col-push-3 col-5">.col-push3 .col-5</div>
</div>

Stack Point

GRIDS allows you to configure the browser width at which it will stack all columns on top of one another. By default this is done at a browser width of 500px (landscape width of some larger smart phones). This value can be easily changed by updating the $grid-breakpoint-stack varialbe found in the top portion of the source file grids.scss.

To see where the "stack point" threshold is visually, click the markers button here or in the bottom-left of the page. Take note of the green line with the label of stack that is now displayed on the top of the page. This indicates the view-point width at which all grid columns on the page will stack on top of one another. In addition to just stacking, each column will also span the entire width of the grid row. With the markers lines enabled, resize your browser's width to be smaller than the stack line.

Once your browser width triggers the "stack point", you will see the two columns below "stack" on top of one another. When the marker lines are enabled, you will also see the marker indicator bar at the bottom of the page display the current break point (more on the additional marker lines in the next section).

.col-6
.col-6
<!-- columns will stack once the browser's width falls below the stack point -->
<div class="grid">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>

There may be situations where you do NOT want to stack columns. This is done by adding the col-nostack class to the columns that should ignore the "stack point". Using the previous two column example, now we will add the col-nostack class to each column. After resizing the browser to trigger the stack break point, notice the two columns still remain side by side.

It is easy to see which columns have the col-nostack class applied to them when you have the markers helper tool enabled (each col-nostack column will have a green dotted outline displayed aroud it when triggered).

.col-6 .col-nostack
.col-6 .col-nostack
<!-- columns will not stack due to the "col-nostack" class -->
<div class="grid">
  <div class="col-6 col-nostack">.col-6 .col-nostack</div>
  <div class="col-6 col-nostack">.col-6 .col-nostack</div>
</div>

The "stack point" only applies to columns that do NOT have the col-nostack class applied to them. In other words, if we only apply the col-nostack class to the first column in our example, the second column will inherit the stack properties. At the stack breakpoint, the second column will have a width of 100% and push itself to the next line in order to fit within the page.

.col-6 .col-nostack
.col-6
<!-- "col-nostack" only applied to the first column; the second column will stack (width: 100%) -->
<div class="grid">
  <div class="col-6 col-nostack">.col-6 .col-nostack</div>
  <div class="col-6">.col-6</div>
</div>

Breakpoints & Markers

GRIDS allows for the definition of seven different Breakpoints (CSS Media Queries). We have already gone over the most import and unique breakpoint, the stack point. Just like configuring the stack point, all other breakpoints can be changed in the beginning of the grids.scss source file. See the default values for these breakpoints below:

// view-port width (breakpoint) to auto-stack all columns
// (should be in px, em, or rem)
$grid-breakpoint-stack: 360px !default;

// view-port widths (breakpoints) allowing layout change
// based on GRIDS class names (should be in px, em, or rem)
$grid-breakpoint-xxs:   320px !default;
$grid-breakpoint-xs:    480px !default;
$grid-breakpoint-s:     568px !default;
$grid-breakpoint-m:     768px !default;
$grid-breakpoint-l:     880px !default;
$grid-breakpoint-xl:    1000px !default;

As you have probably already noticed, when the markers helper is enabled, each breakpoint line is overlayed on the screen, as well as a marker indicator bar along the bottom of the page which displays which breakpoint is currently being triggered (if any).

Up to this point we have just defined "default" column sizes using the col-{number} class. With that understanding we can now really start to customise our layout at different screen sizes by using Breakpoints. Let's start out by targeting the "medium" Breakpoint. We will use our two column example and have each column span 6 until we reach a screen size of "medium", at which point we will have each column drop down to span only 3 by adding a col-m-{number} class.

.col-6 .col-m-3
.col-6 .col-m-3
<!-- two column grid spanning 6 each; spanning 3 each at medium breakpoint -->
<div class="grid">
  <div class="col-6 col-m-3">.col-6 .col-m-3</div>
  <div class="col-6 col-m-3">.col-6 .col-m-3</div>
</div>

Enable the markers helper and re-examine the previous example. Notice the blue outlines around our two columns when the browser width falls bellow the "medium" breakpoint line. Each breakpoint is color coded (as seen by the breakpoint line overlays) and their correspoinding color will be used to outline any affected elements when a breakpoint is triggered. This can be very helpful when designing a layout for different view-ports and visualizing which elements have inherited a new col-{breakpoint}-{number} class.

In addition to specifying new column spans at different breakpoints, we can also specify breakpoint push classes using the same pattern: col-push-{breakpoint}-{number}. Let's apply this to the previous example by not only shrinking both columns at the "medium" breakpoint, but also pushing the second column over by 6.

.col-6 .col-m-3
.col-6 .col-m-push-6 .col-m-3
<!-- shrink columns to span 3 at medium breakpoint and push the second over by 6 -->
<div class="grid">
  <div class="col-6 col-m-3">.col-6 .col-m-3</div>
  <div class="col-6 col-m-push-6 col-m-3">.col-6 .col-m-push-6 .col-m-3</div>
</div>

Our default base column class col-{number} will always be used up until the stack breakpoint is reached (unless the col-nostack is set on an element). In addition, you can also specify one or all of the other breakpoint classes on an element. To demonstrate this, examine the example grid below at each breakpoint (slowly resize your browser past each breakpoint).

.col-push-1 .col-11 .col-xl-push-2 .col-xl-10 .col-l-push-3 .col-l-9 .col-m-push-4 .col-m-8 .col-s-push-5 .col-s-7 .col-xs-push-6 .col-xs-6 .col-nostack
<!-- column with differnt spans and pushes defined at every breakpoint -->
<div class="grid">
  <div class="col-push-1 col-11 col-xl-push-2 col-xl-10 col-l-push-3 col-l-9 col-m-push-4 col-m-8 col-s-push-5 col-s-7 col-xs-push-6 col-xs-6 col-nostack">.col-push-1 .col-11 .col-xl-push-2 .col-xl-10 .col-l-push-3 .col-l-9 .col-m-push-4 .col-m-8 .col-s-push-5 .col-s-7 .col-xs-push-6 .col-xs-6 .col-nostack</div>
</div>

So you can now customize column spans at diffenent breakpoints, but what if you want to hide a column instead. Easy, just specify a 0 for the number value in any of the col-{number} or col-{breakpoint}-{number} classes. Below, the second column will be hidden at the "medium" breakpoint.

.col-6
.col-6 .col-m-0
<!-- hide the second column once the medium breakpoint is triggered -->
<div class="grid">
  <div class="col-6">.col-6</div>
  <div class="col-6 col-m-0">.col-6 .col-m-0</div>
</div>

Just like hiding columns, you can set a push value of zero for each breakpoint as well. Below, the second column's push value will be removed (set to zero) once the "medium" breakpoint is met.

.col-5
.col-push-2 .col-5 .col-m-push-0
<!-- the second column's push value is removed at the medium breakpoint -->
<div class="grid">
  <div class="col-5"><div class="content">.col-5</div></div>
  <div class="col-push-2 col-5 col-m-push-0"><div class="content">.col-push-2 .col-5 .col-m-push-0</div></div>
</div>

One important thing to note in the above example is that we only removed the push value at the "medium" breakpoint. Its base span of 5 .col-5 was retained (inherited) and kept in place.

With this knowledge in place, the combination of classes and different breakpoint will allow you to setup a vast array of layouts. Below is a quick reference of each:

Installation & Toolkit

Both the gridlines and markers are only inserted into the page if you include the helper javascript file (which you would leave out in production): grids--gridlines-markers-helper.js

Optional Utility Classes
Top/Bottom Margin and Padding
{grid/col}-{margin/padding}-{top/bottom}-{0x/1x/2x/3x}
{grid/col}-{breakpoint}-{margin/padding}-{top/bottom}-{0x/1x/2x/3x}
grid-nostack
grid-reverse
grid-{breakpoint}-{reverse/Xreverse}
grid-nostack-{reverse/Xreverse}
col-{newline/Xnewline}
col-{breakpoint}-{newline/Xnewline}
col-{throwright/Xthrowright}
col-{breakpoint}-{throwright/Xthrowright}
I need a cup of Coffee