Source on Github

Blueprint Grid

The blueprint grid.

This file can be imported using: @import "blueprint/grid"

Examples

Two Column Layout
A semantic two-column layout

Imports

  1. Clearfix – Mixins for clearfixing.
  2. Float – Mixins for cross-browser floats.

Configurable Variables help

24

The number of columns in the grid.

30px

The width of a column

10px

The amount of margin between columns

Constants

$blueprint-grid-width + $blueprint-grid-margin

The width of a column including the margin. With default settings this is 40px.

$blueprint-grid-outer-width * $blueprint-grid-columns - $blueprint-grid-margin

The width of the container. With default settings this is 950px.

Functions

view source 

@function span($n)
  @return $blueprint-grid-width * $n + $blueprint-grid-margin * ($n - 1)

@function span($n) {
  @return $blueprint-grid-width * $n + $blueprint-grid-margin * ($n - 1);
}

Return the width in pixels of $n columns.

Mixins

view source 

=blueprint-grid
  // A container should group all your columns
  .container
    +container
  .column
    +column-base
  // The last column in a row needs this class (or mixin) or it will end up on the next row.
  .last
    +last
  // Use these classes (or mixins) to set the width of a column.
  @for $n from 1 to $blueprint-grid-columns
    .span-#{$n}
      @extend .column
      width: span($n)
  .span-#{$blueprint-grid-columns}
    @extend .column
    width: span($blueprint-grid-columns)
    margin: 0
  input, textarea, select
    @for $n from 1 through $blueprint-grid-columns
      &.span-#{$n}
        width: span($n)
  // Add these to a column to append empty cols.
  @for $n from 1 to $blueprint-grid-columns
    .append-#{$n}
      +append($n)
  // Add these to a column to prepend empty cols.
  @for $n from 1 to $blueprint-grid-columns
    .prepend-#{$n}
      +prepend($n)
  // Use these classes on an element to push it into the
  // next column, or to pull it into the previous column.
  #{enumerate(".pull", 1, $blueprint-grid-columns)}
    +pull-base
  @for $n from 1 through $blueprint-grid-columns
    .pull-#{$n}
      +pull-margins($n)
  #{enumerate(".push", 1, $blueprint-grid-columns)}
    +push-base
  @for $n from 1 through $blueprint-grid-columns
    .push-#{$n}
      +push-margins($n)
  .prepend-top
    +prepend-top
  .append-bottom
    +append-bottom

@mixin blueprint-grid {
  // A container should group all your columns
  .container {
    @include container;
  }
  .column {
    @include column-base;
  }
  // The last column in a row needs this class (or mixin) or it will end up on the next row.
  .last {
    @include last;
  }
  // Use these classes (or mixins) to set the width of a column.
  @for $n from 1 to $blueprint-grid-columns {
    .span-#{$n} {
      @extend .column;
      width: span($n);
    }
  }
  .span-#{$blueprint-grid-columns} {
    @extend .column;
    width: span($blueprint-grid-columns);
    margin: 0;
  }
  input, textarea, select {
    @for $n from 1 through $blueprint-grid-columns {
      &.span-#{$n} {
        width: span($n);
      }
    }
  }
  // Add these to a column to append empty cols.
  @for $n from 1 to $blueprint-grid-columns {
    .append-#{$n} {
      @include append($n);
    }
  }
  // Add these to a column to prepend empty cols.
  @for $n from 1 to $blueprint-grid-columns {
    .prepend-#{$n} {
      @include prepend($n);
    }
  }
  // Use these classes on an element to push it into the
  // next column, or to pull it into the previous column.
  #{enumerate(".pull", 1, $blueprint-grid-columns)} {
    @include pull-base;
  }
  @for $n from 1 through $blueprint-grid-columns {
    .pull-#{$n} {
      @include pull-margins($n);
    }
  }
  #{enumerate(".push", 1, $blueprint-grid-columns)} {
    @include push-base;
  }
  @for $n from 1 through $blueprint-grid-columns {
    .push-#{$n} {
      @include push-margins($n);
    }
  }
  .prepend-top {
    @include prepend-top;
  }
  .append-bottom {
    @include append-bottom;
  }
}

Generates presentational class names that you can use in your html to layout your pages.

Note:

Best practices discourage using this mixin, but it is provided to support legacy websites and to test the sass port against blueprint's example pages.

view source 

=container
  width: $blueprint-container-size
  margin: 0 auto
  +clearfix

@mixin container {
  width: $blueprint-container-size;
  margin: 0 auto;
  @include clearfix;
}

A container for your columns.

Note:

If you use this mixin without the class and want to support ie6 you must set text-align left on your container element in an IE stylesheet.

view source 

=last
  margin-right: 0

@mixin last {
  margin-right: 0;
}

The last column in a row needs this mixin or it will end up on the next row in some browsers.

view source 

=column($n, $last: false)
  +column-base($last)
  width: span($n)

@mixin column($n, $last: false) {
  @include column-base($last);
  width: span($n);
}

Use this mixins to set the width of n columns.

view source 

=span($n, $important: false)
  @warn "The span mixin is deprecated. Please use the span function instead. E.g. width: span(#{$n})"
  @if $important
    width: span($n) !important
  @else
    width: span($n)

@mixin span($n, $important: false) {
  @warn "The span mixin is deprecated. Please use the span function instead. E.g. width: span(#{$n})";
  @if $important {
    width: span($n) !important;
  }
  @else {
    width: span($n);
  }
}

Set only the width of an element to align it with the grid. Most of the time you'll want to use +column instead.

This mixin is especially useful for aligning tables to the grid.

@deprecated Please use the span function with the width property instead.

view source 

=column-base($last: false)
  +float-left
  @if $last
    +last
  @else
    margin-right: $blueprint-grid-margin
  * html &
    overflow-x: hidden

@mixin column-base($last: false) {
  @include float-left;
  @if $last {
    @include last;
  }
  @else {
    margin-right: $blueprint-grid-margin;
  }
  * html & {
    overflow-x: hidden;
  }
}

The basic set of styles needed to make an element behave like a column:

Note:

This mixin gets applied automatically when using +column so you probably don't need to use it directly unless you need to deviate from the grid or are trying to reduce the amount of generated CSS.

view source 

=append($n)
  padding-right: $blueprint-grid-outer-width * $n

@mixin append($n) {
  padding-right: $blueprint-grid-outer-width * $n;
}

Mixin to a column to append n empty columns to the right by adding right padding to the column.

view source 

=prepend($n)
  padding-left: $blueprint-grid-outer-width * $n

@mixin prepend($n) {
  padding-left: $blueprint-grid-outer-width * $n;
}

Mixin to a column to append n empty columns to the left by adding left padding to the column.

view source 

=append-bottom($amount: 1.5em)
  margin-bottom: $amount

@mixin append-bottom($amount: 1.5em) {
  margin-bottom: $amount;
}

Adds trailing margin.

view source 

=prepend-top($amount: 1.5em)
  margin-top: $amount

@mixin prepend-top($amount: 1.5em) {
  margin-top: $amount;
}

Adds leading margin.

view source 

=pull-base
  +float-left
  position: relative

@mixin pull-base {
  @include float-left;
  position: relative;
}

Base styles that make it possible to pull an element to the left.

Note:

This mixin gets applied automatically when using +pull so you probably don't need to use it directly unless you need to deviate from the grid or are trying to reduce the amount of generated CSS.

view source 

=pull-margins($n, $last: false)
  @if $last
    margin-left: -$blueprint-grid-outer-width * $n + $blueprint-grid-margin
  @else
    margin-left: -$blueprint-grid-outer-width * $n

@mixin pull-margins($n, $last: false) {
  @if $last {
    margin-left: -$blueprint-grid-outer-width * $n + $blueprint-grid-margin;
  }
  @else {
    margin-left: -$blueprint-grid-outer-width * $n;
  }
}

The amount of pulling for element to the left.

Note:

This mixin gets applied automatically when using +pull so you probably don't need to use it directly unless you need to deviate from the grid or are trying to reduce the amount of generated CSS.

view source 

=pull($n, $last: false)
  +pull-base
  +pull-margins($n, $last)

@mixin pull($n, $last: false) {
  @include pull-base;
  @include pull-margins($n, $last);
}

Moves a column n columns to the left.

This mixin can also be used to change the display order of columns.

If pulling past the last (visually) element in a row, pass true as the second argument so the calculations can adjust accordingly. For example:

HTML:

One


Two

Sass:

#one
  +column(18, true)
  +prepend(6)
#two
  +column(6)
  +pull(18, true)
Blueprint Pull Example
Uses pull to change the display order of columns.
view source 

=push-base
  +float-left
  position: relative

@mixin push-base {
  @include float-left;
  position: relative;
}
view source 

=push-margins($n)
  margin: 0 -$blueprint-grid-outer-width * $n 1.5em $blueprint-grid-outer-width * $n

@mixin push-margins($n) {
  margin: 0 -$blueprint-grid-outer-width * $n 1.5em $blueprint-grid-outer-width * $n;
}
view source 

=push($n)
  +push-base
  +push-margins($n)

@mixin push($n) {
  @include push-base;
  @include push-margins($n);
}

mixin to a column to push it n columns to the right

view source 

=border($border-color: $blueprint-border-color, $border-width: 1px)
  padding-right: $blueprint-grid-margin / 2 - $border-width
  margin-right: $blueprint-grid-margin / 2
  border-right: #{$border-width} solid #{$border-color}

@mixin border($border-color: $blueprint-border-color, $border-width: 1px) {
  padding-right: $blueprint-grid-margin / 2 - $border-width;
  margin-right: $blueprint-grid-margin / 2;
  border-right: #{$border-width} solid #{$border-color};
}

Border on right hand side of a column.

view source 

=colborder($border-color: $blueprint-border-color, $border-width: 1px)
  padding-right: floor(($blueprint-grid-width + 2 * $blueprint-grid-margin - $border-width) / 2)
  margin-right: ceil(($blueprint-grid-width + 2 * $blueprint-grid-margin - $border-width) / 2)
  border-right: #{$border-width} solid #{$border-color}

@mixin colborder($border-color: $blueprint-border-color, $border-width: 1px) {
  padding-right: floor(($blueprint-grid-width + 2 * $blueprint-grid-margin - $border-width) / 2);
  margin-right: ceil(($blueprint-grid-width + 2 * $blueprint-grid-margin - $border-width) / 2);
  border-right: #{$border-width} solid #{$border-color};
}

Border with more whitespace, spans one column.

view source 

=colruler($border-color: #dddddd)
  background: $border-color
  color: $border-color
  clear: both
  float: none
  width: 100%
  height: 0.1em
  margin: 0 0 1.45em
  border: none

@mixin colruler($border-color: #dddddd) {
  background: $border-color;
  color: $border-color;
  clear: both;
  float: none;
  width: 100%;
  height: 0.1em;
  margin: 0 0 1.45em;
  border: none;
}

Mixin this to an hr to make a horizontal ruler across a column.

view source 

=colspacer
  +colruler
  background: white
  color: white
  visibility: hidden

@mixin colspacer {
  @include colruler;
  background: white;
  color: white;
  visibility: hidden;
}

Mixin this to an hr to make a horizontal spacer across a column.