Grid System

The grid system is the result of two Sass mixins: grid-row() and grid-column(). It works like this:

  • grid-row() is a simple container with outer padding set to half the width of a gutter (.5rem by default).
  • grid-column() is a floated block that takes an X and Y parameter and uses that to calculate a width. It also has outer padding that’s set to half the width of a gutter. Combined with grid-row(), this creates a full gutter on both sides of the column.

Float direction is customizable on columns, and the outer padding can be adjusted on both rows and columns.

Note: It is required, and the framework has this set by default, that you have box-sizing set to border-box on elements that use these mixins. Because of this, only IE8+ supports the grid mixin.

Grid Row

grid-row() adds left and right padding so outer padding is consistant with the column gutters.

Parameter options

SASS CSS
$padding-left      (Optional) Padding left for the row (defaults to 0.5rem)
$padding-right     (Optional) Padding right for the row (defaults to 0.5rem)

Grid Column

grid-column() takes a given fraction, and generates a column. The gutter is created from padding.

Parameter options

SASS CSS
$x                  Numerator
$y                  Denominator
$padding-left       (Optional) Padding left for the column (defaults to 0.5rem)
$padding-right      (Optional) Padding right for the column (defaults to 0.5rem)
$float-direction    (Optional) How to float the column (defaults to left)

Examples

Note: Other styles are added to the examples below to show the column structures.

Basic Layout

Content

 

 

Aside

 

Markup
<div class="grid grid--basic">
    <div class="grid--article">
        <p>Content</p>
        <p>&#160</p>
        <p>&#160</p>
    </div>
    <div class="grid--aside">
        <p>Aside</p>
        <p>&#160</p>
    </div>
</div>

SASS CSS
.grid--basic 
{
    @include grid-row();
    background-color: $gray-500;
    margin-bottom: 1.5rem;

    p 
    {
        margin: 0;
        background-color: $warm-gray-100;
        padding: 1rem;
    }
    .grid--article 
    {
        @include grid-column(
            $x: 2, 
            $y: 3
        );
    }
    .grid--aside 
    {
        @include grid-column(
            $x: 1, 
            $y: 3
        );
    }
    
    @media #{$query-small}
    {
        .grid--article,
        .grid--aside 
        {
            @include grid-column(
                $x: 1, 
                $y: 1
            );
        }
    }
}

Two Column Layout

Column

 

 

Column

 

 

Markup
<div class="grid grid--split">
    <div class="grid__column">
        <p>Column</p>
        <p>&#160</p>
        <p>&#160</p>
    </div>
    <div class="grid__column">
        <p>Column</p>
        <p>&#160</p>
        <p>&#160</p>
    </div>
</div>

SASS CSS
.grid--split 
{
    @include grid-row();
    background-color: $gray-500;
    margin-bottom: 1.5rem;

    p 
    {
        margin: 0;
        background-color: $warm-gray-100;
        padding: 1rem;
    }
    .grid__column 
    {
        @include grid-column(
            $x: 1, 
            $y: 2
        );
    }   
    @media #{$query-small}
    {
        .grid__column 
        {
            @include grid-column(
                $x: 1, 
                $y: 1
            );
        }
    }
}

Layered Page Layout

Header

Content

 

 

Aside

 

Footer

Markup
<div class="grid--header__layer">
    <div class="grid--header__wrapper">
        <div class="grid--header">
            <p>Header</p>
        </div>
    </div>
</div>
<div class="grid--content__layer">
    <div class="grid--content__wrapper">
        <div class="grid--article">
            <p>Content</p>
            <p>&#160</p>
            <p>&#160</p>
        </div>
        <div class="grid--aside">
            <p>Aside</p>
            <p>&#160</p>
        </div>
    </div>
</div>
<div class="grid--footer__layer">
    <div class="grid--footer__wrapper">
        <div class="grid--footer">
            <p>Footer</p>
        </div>
    </div>
</div>

SASS CSS
.grid--header__layer,
.grid--content__layer,
.grid--footer__layer 
{
    p 
    {
        margin: 0;
        padding: 1rem;
        background-color: fade-out(white, .4);
    }
}
.grid--header__wrapper,
.grid--content__wrapper,
.grid--footer__wrapper 
{
    @include grid-row();
}
.grid--header__layer 
{
    background-color: $gray-500;

    .grid--header 
    {
        @include grid-column(
            $x: 1, 
            $y: 1
        );
    }
}
.grid--content__layer {
    
    background-color: $warm-gray-100;

    .grid--article 
    {
        @include grid-column(
            $x: 4, 
            $y: 6
        );
    }
    .grid--aside 
    {
        @include grid-column(
            $x: 2, 
            $y: 6
        );
    }
    
    @media #{$query-small}
    {
        .grid--article,
        .grid--aside 
        {
            @include grid-column(
                $x: 1, 
                $y: 1
            );
        }
    }   
}
.grid--footer__layer 
{
    background-color: $gray-500;
    margin-bottom: 2rem;

    .grid--footer 
    {
        @include grid-column(
            $x: 1, 
            $y: 1
        );
    }
}