Blueprint Liquid

Import this to have a liquid grid.

The original liquid grid documentation is here.

By default the container takes 80% of the canvas, you can override this:

.container {
  width: 99%
}

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

View the Source for this module on Github.

Imports

The following sass files are automatically imported when you import this file:

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

Configurable Variables help

Value
24
Description

Main layout grid, override these constants to build your grid and container sizes. The width shown gives the right floored percentage values.

Value
3.167%

Value
1.042%

Value
80%
Description

Do not edit below this line unless you really know what you’re doing.

Value
950px

Value
-($blueprint_liquid_grid_margin + $blueprint_liquid_grid_width)

Mixins

View Source: Sass | SCSS 

=blueprint-liquid-grid
  // A container should group all your columns
  .container
    +container
  // Use these classes (or mixins) to set the width of a column.
  @for $n from 1 to $blueprint_liquid_grid_columns + 1
    .span-#{$n}
      +span($n)
    div
      &.span-#{$n}
        +column($n, $n == $blueprint_liquid_grid_columns)
  // The last column in a row needs this class (or mixin) or it will end up on the next row.
  div.last
    +last
  // Add these to a column to append empty cols.
  @for $n from 1 to $blueprint_liquid_grid_columns
    .append-#{$n}
      +append($n)
  // Add these to a column to prepend empty cols.
  @for $n from 1 to $blueprint_liquid_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.
  @for $n from 1 to $blueprint_liquid_grid_columns + 1
    .pull-#{$n}
      +pull($n)
  @for $n from 1 to $blueprint_liquid_grid_columns + 1
    .push-#{$n}
      +push($n)

@mixin blueprint-liquid-grid {
  // A container should group all your columns
  .container {
    @include container; }
  // Use these classes (or mixins) to set the width of a column.
  @for $n from 1 to $blueprint_liquid_grid_columns + 1 {
    .span-#{$n} {
      @include span($n); }
    div {
      &.span-#{$n} {
        @include column($n, $n == $blueprint_liquid_grid_columns); } } }
  // The last column in a row needs this class (or mixin) or it will end up on the next row.
  div.last {
    @include last; }
  // Add these to a column to append empty cols.
  @for $n from 1 to $blueprint_liquid_grid_columns {
    .append-#{$n} {
      @include append($n); } }
  // Add these to a column to prepend empty cols.
  @for $n from 1 to $blueprint_liquid_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.
  @for $n from 1 to $blueprint_liquid_grid_columns + 1 {
    .pull-#{$n} {
      @include pull($n); } }
  @for $n from 1 to $blueprint_liquid_grid_columns + 1 {
    .push-#{$n} {
      @include push($n); } } }
View Source: Sass | SCSS 

=container
  min-width: $blueprint_liquid_container_min_width
  width: $blueprint_liquid_container_width
  margin: 0 auto
  +clearfix

@mixin container {
  min-width: $blueprint_liquid_container_min_width;
  width: $blueprint_liquid_container_width;
  margin: 0 auto;
  @include clearfix; }
View Source: Sass | SCSS 

=span($n, $override: false)
  $width: $blueprint_liquid_grid_width * $n + $blueprint_liquid_grid_margin * ($n - 1)
  @if $override
    width: $width !important
  @else
    width: $width

@mixin span($n, $override: false) {
  $width: $blueprint_liquid_grid_width * $n + $blueprint_liquid_grid_margin * ($n - 1);
  @if $override {
    width: $width !important; }
  @else {
    width: $width; } }
View Source: Sass | SCSS 

=last
  margin-right: 0

@mixin last {
  margin-right: 0; }
View Source: Sass | SCSS 

=column($n, $last: false)
  +float-left
  overflow: hidden
  +span($n)
  @if $last
    +last
  @else
    margin-right: $blueprint_liquid_grid_margin

@mixin column($n, $last: false) {
  @include float-left;
  overflow: hidden;
  @include span($n);
  @if $last {
    @include last; }
  @else {
    margin-right: $blueprint_liquid_grid_margin; } }
View Source: Sass | SCSS 

=append($n)
  padding-right: ($blueprint_liquid_grid_width + $blueprint_liquid_grid_margin) * $n

@mixin append($n) {
  padding-right: ($blueprint_liquid_grid_width + $blueprint_liquid_grid_margin) * $n; }
View Source: Sass | SCSS 

=prepend($n)
  padding-left: ($blueprint_liquid_grid_width + $blueprint_liquid_grid_margin) * $n

@mixin prepend($n) {
  padding-left: ($blueprint_liquid_grid_width + $blueprint_liquid_grid_margin) * $n; }
View Source: Sass | SCSS 

=pull($n, $last: false)
  margin-left: $blueprint_liquid_grid_push_pull * $n

@mixin pull($n, $last: false) {
  margin-left: $blueprint_liquid_grid_push_pull * $n; }
View Source: Sass | SCSS 

=push($n)
  +float-right
  margin:
    top: 0
    left: $blueprint_liquid_grid_margin
    right: $blueprint_liquid_grid_push_pull * $n
    bottom: 0

@mixin push($n) {
  @include float-right;
  margin: {
    top: 0;
    left: $blueprint_liquid_grid_margin;
    right: $blueprint_liquid_grid_push_pull * $n;
    bottom: 0; }; }
View Source: Sass | SCSS 

=border
  border-right: 1px solid #eeeeee

@mixin border {
  border-right: 1px solid #eeeeee; }
View Source: Sass | SCSS 

=colborder
  padding-right: $blueprint_liquid_grid_margin * 2
  margin-right: $blueprint_liquid_grid_margin * 2
  +border

@mixin colborder {
  padding-right: $blueprint_liquid_grid_margin * 2;
  margin-right: $blueprint_liquid_grid_margin * 2;
  @include border; }
View Source: Sass | SCSS 

=colruler
  background: #dddddd
  color: #dddddd
  clear: both
  width: 100%
  height: 0.083em
  margin: 0
  margin-left: $blueprint_liquid_grid_margin * 2
  margin-right: $blueprint_liquid_grid_margin * 2
  border: none

@mixin colruler {
  background: #dddddd;
  color: #dddddd;
  clear: both;
  width: 100%;
  height: 0.083em;
  margin: 0;
  margin-left: $blueprint_liquid_grid_margin * 2;
  margin-right: $blueprint_liquid_grid_margin * 2;
  border: none; }
View Source: Sass | SCSS 

=colspacer
  +colruler
  background: white
  color: white

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