Q
Version: 0.12.2
Source on Github

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"

Imports

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

Configurable Variables help

24

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

3.167%

1.042%

80%

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

950px

-($blueprint-liquid-grid-margin + $blueprint-liquid-grid-width)

Functions

view source 

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

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

Return the width of $n columns in percents.

Mixins

view source 

=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}
      width: span-fluid($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} {
      width: span-fluid($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 

=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 

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

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

=last
  margin-right: 0

@mixin last {
  margin-right: 0;
}
view source 

=column($n, $last: false)
  +float-left
  overflow: hidden
  width: span-fluid($n)
  @if $last
    +last
  @else
    margin-right: $blueprint-liquid-grid-margin

@mixin column($n, $last: false) {
  @include float-left;
  overflow: hidden;
  width: span-fluid($n);
  @if $last {
    @include last;
  }
  @else {
    margin-right: $blueprint-liquid-grid-margin;
  }
}
view source 

=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 

=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 

=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 

=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 

=border
  border-right: 1px solid #eeeeee

@mixin border {
  border-right: 1px solid #eeeeee;
}
view source 

=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 

=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 

=colspacer
  +colruler
  background: white
  color: white

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