// ————————————————————– // 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; }