General

variables

grid-show-preview

$grid-show-preview: false !default;

Description

Defines whether to render the preview css or not. The preview shows an overlay of the default columns on the page.

Type

Bool

Example

<!-- To see the preview, copy this into your html -->
<div class="grid-preview">
  <div class="grid-preview__row">
    <div class="grid-preview__col"></div>
    <div class="grid-preview__col"></div>
    <div class="grid-preview__col"></div>
    <!-- ...however many columns you've defined -->
  </div>
</div>

grid-tech

$grid-tech: inline !default;

Description

Defines the default layout technique to be used. Currently two techniques are suppoerted:

inline layouts using display: inline-block
float layouts using float: left

Type

String

grid-columns

$grid-columns: 12 !default;

Description

Defines the default number of columns.

Type

Number

grid-gutter

$grid-gutter: 20px !default;

Description

Defines the default gutter between columns. At the moment only px values are supported.

For best results choose an even number because of the maths involved.

Type

Number

Used by

[function] grid-width
[function] grid-width
[function] grid-width

grid-max-width

$grid-max-width: 1400px !default;

Description

Defines the max-width of the grid. This is used on grid-container elements. Set to false to disable max-width

Type

Number</code> or <code>Bool

grid-margins

$grid-margins: ( df: 16px ) !default;

Description

Defines the (optionally responsive) margins of the grid.

df defines the default margins.
Further keys define margins for specific breakpoints.

Responsive margins require the sass-mq mixin

Type

Map

Example

// sass-mq breakpoints
$mq-breakpoints: (
  mobile:  320px,
  tablet:  740px,
  desktop: 980px
);

// sass-nitty responsive margins
$grid-margins: (
  df:      12px,
  mobile:  16px,
  tablet:  20px,
  desktop: 22px
);

Used by

[mixin] grid-container
[mixin] grid-container

grid-font-size

$grid-font-size: 1rem !default;

Description

Defines the font-size to be set on column items. This is needed as part of the layout technique involves resetting the font size on rows.

Just leave it alone In 99% of cases you don't need to touch this.

Type

Number

Used by

[mixin] grid-col

mixins

grid-container

@mixin grid-container($center: true, $row: false, $max-width: $grid-max-width) { ... }

Description

Define a container element. This may be a single wrapper overarching all content or several sections on the same page.

Centers the content, sets a max-width and defines the site margins.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$center`	Whether to center the container	`Bool`	`true`
`$row`	Treat container as a row element. You won't need to define a row element.	`Bool`	`false`
`$max-width`	Defines the max-width of the container.	`Number`	`$grid-max-width`

Example

// Set site-wide max-width
$grid-max-width: 1400px;

// Set site-wide margin
$grid-margins: ( df: 20px );

// Set site-wide responsive margins (requires sass-mq)
$grid-margins: (
  df:      12px,
  mobile:  16px,
  tablet:  20px,
  desktop: 22px
);

// Usually this will do
.wrapper {
  @include grid-container;
}

// Custom max-width
.header {
  @include grid-container( $max-width: 45rem );
}

// Set row to true to use container as a grid row
.page-content {
  @include grid-container( $row: true );

  &__sidebar {
    @include grid-col( 4 );
  }

  &__main {
    @include grid-col( 8 );
  }
}

Requires

[variable] grid-margins
[variable] grid-margins

grid-row

@mixin grid-row($gutter: $grid-gutter, $tech: $grid-tech, $align: left) { ... }

Description

Defines a grid row

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$gutter`	Defines the gutter between columns	`Number` or `Bool`	`$grid-gutter`
`$tech`	Defines the layout technique. One of `inline` or `float`	`String`	`$grid-tech`
`$align`	Alignment for the grid; `left`, `right` or `center`. Only applicable when `$grid-tech: inline`	`String`	`left`

grid-col

@mixin grid-col($width: 1, $of: $grid-columns, $gutter: $grid-gutter, $align: $top, $push: false, $prefix: false, $suffix: false) { ... }

Description

Defines a grid column

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$width`	Number of columns to span	`Number`	`1`
`$of`	Total number of columns	`Number`	`$grid-columns`
`$gutter`	Gutter between columns	`Number`	`$grid-gutter`
`$align`	How to align the columns to each other. One of `top`, `bottom` and `center`.	`String`	`$top`
`$push`	Number of columns to push or pull the column. Use for custom source order.	`Number` or `Bool`	`false`
`$prefix`	Number of empty columns before this column.	`Number` or `Bool`	`false`
`$suffix`	Number of empty columns after this column.	`Number` or `Bool`	`false`

Requires

[variable] grid-font-size

functions

grid-width

@function grid-width($width: 1, $of: $grid-columns, $add-gutters: 0) { ... }

Description

Calculate a width based on the grid.

Use for custom positioning and widths that align to the grid. Calculations are based on the parent element width. Use the $of parameter to define the parent base.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$width`	Number of columns to span	`Number`	`1`
`$of`	Total number of columns	`Number`	`$grid-columns`
`$add-gutters`	Number of gutters to add to the width.	`Number`	`0`

Example

// Define a container
.header {
  @include grid-container;

  position: relative; // For absolute positioning child elements
}

// Align an element inside .header
.header__logo {
  position: absolute;
  left: grid-width( 4, $add-gutters: 1 );
  width: grid-width( 5 );
}

Requires

[variable] grid-gutter
[variable] grid-gutter
[variable] grid-gutter