// ————————————————————– // SASS Gridification // * Author: Geoff Garside // A SASS adaptation of Blueprint CSS // * Version: 0.7.1 (2008-02-25) // * Website: 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, 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; }