compass/frameworks/blueprint/stylesheets/blueprint/_liquid.scss

//  --------------------------------------------------------------
//  SASS Gridification
//  * Author:   Geoff Garside
//  A SASS adaptation of Blueprint CSS
//  * Version:         0.7.1 (2008-02-25)
//  * Website:         http://code.google.com/p/blueprintcss/
//  Based on work by:
//  * Chris Eppstein    [eppsteins.net]
//  * Lorin Tacket      [lorintackett.com]
//  * Olav Bjorkoy      [bjorkoy.com]
//  * Nathan Borror     [playgroundblues.com]
//  * Jeff Croft        [jeffcroft.com]
//  * Christian Metts   [mintchaos.com]
//  * Khoi Vinh         [subtraction.com]
//  Liquid grid work by:
//  * Ben Listwon
//  * David Bedingfield
//  * Andrei Michael Herasimchuk
//  Involution Studios, http://www.involutionstudios.com
//  Read more about using a grid here:
//  * subtraction.com/archives/2007/0318-oh-yeeaahh.php
//  -----
//  By default, the grid is 80% of window width, with 24 columns.
//
//  To make the grid fixed, simply change the .container width
//  property to a pixel value. e.g., 960px.
//  -----
//  To use:
//  This module is a REPLACEMENT for the grid module. Simply import it:
//  @import blueprint
//  @import blueprint/liquid
//  -------------------------------------------------------------------

@import "compass/utilities/general/clearfix";
@import "compass/utilities/general/float";

// Main layout grid, override these constants to build your grid and container sizes.
// The width shown gives the right floored percentage values.
$blueprint-liquid-grid-columns: 24 !default;

$blueprint-liquid-grid-width: 3.167% !default;

$blueprint-liquid-grid-margin: 1.042% !default;

// Do not edit below this line unless you really know what you're doing.
$blueprint-liquid-container-width: 80% !default;

$blueprint-liquid-container-min-width: 950px !default;

$blueprint-liquid-grid-push-pull: -($blueprint-liquid-grid-margin + $blueprint-liquid-grid-width) !default;

@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); } } }

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

@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; } }

@mixin last {
  margin-right: 0; }

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

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

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

@mixin pull($n, $last: false) {
  margin-left: $blueprint-liquid-grid-push-pull * $n; }

@mixin push($n) {
  @include float-right;
  margin: {
    top: 0;
    left: $blueprint-liquid-grid-margin;
    right: $blueprint-liquid-grid-push-pull * $n;
    bottom: 0; }; }

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

@mixin colborder {
  padding-right: $blueprint-liquid-grid-margin * 2;
  margin-right: $blueprint-liquid-grid-margin * 2;
  @include border; }

@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; }

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