// -------------------------------------------------------------- // SASS Gridification // * Author: Chris Eppstein // A SASS adaptation of Blueprint CSS // * Version: 0.7.1 (2008-02-25) // * Website: http://code.google.com/p/blueprintcss/ // Based on work by: // * Lorin Tacket [lorintackett.com] // * Olav Bjorkoy [bjorkoy.com] // * Nathan Borror [playgroundblues.com] // * Jeff Croft [jeffcroft.com] // * Christian Metts [mintchaos.com] // * Khoi Vinh [subtraction.com] // Read more about using a grid here: // * subtraction.com/archives/2007/0318_oh_yeeaahh.php // -------------------------------------------------------------- @import compass/utilities/general/clearfix.sass // Main layout grid, override these constants to build your grid and container sizes. !blueprint_grid_columns ||= 24 !blueprint_grid_width ||= 30px !blueprint_grid_margin ||= 10px !blueprint_grid_outer_width = !blueprint_grid_width + !blueprint_grid_margin !blueprint_container_size = !blueprint_grid_outer_width * !blueprint_grid_columns - !blueprint_grid_margin =blueprint-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_grid_columns + 1 .span-#{!n} +span(!n) div &.span-#{!n} +column(!n, !n == !blueprint_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_grid_columns .append-#{!n} +append(!n) // Add these to a column to prepend empty cols. @for !n from 1 to !blueprint_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_grid_columns + 1 .pull-#{!n} +pull(!n) @for !n from 1 to !blueprint_grid_columns + 1 .push-#{!n} +push(!n) // Columns // Note: If you use this mixin without the class and want to support ie6 // you must set text-align left on your container element in an IE stylesheet. =container :width = !blueprint_container_size :margin 0 auto +clearfix // The last column in a row needs this mixin or it will end up on the next row. // TODO add this to span mixin when we have optional arguments =last :margin :right 0 =span(!n) :width = !blueprint_grid_width * !n + (!blueprint_grid_margin * (!n - 1)) // Use this mixins to set the width of n columns. =column(!n, !last = false) :float left +span(!n) @if !last +last @else :margin-right = !blueprint_grid_margin // Mixin to a column to append n empty cols. =append(!n) :padding-right = (!blueprint_grid_outer_width) * !n // Mixin to a column to prepend n empty cols. =prepend(!n) :padding-left = (!blueprint_grid_outer_width) * !n // mixin to a column to move it n columns to the left =pull(!n, !last = false) :float left :position relative @if !last :margin-left = (-!blueprint_grid_outer_width * !n) + !blueprint_grid_margin @else :margin-left = -!blueprint_grid_outer_width * !n // mixin to a column to push it n columns to the right =push(!n) :float right :position relative :margin :top 0 :right = -!blueprint_grid_outer_width * !n :bottom 1.5em :left = !blueprint_grid_outer_width * !n // Border on right hand side of a column. =border :padding-right = !blueprint_grid_margin / 2 - 1 :margin-right = !blueprint_grid_margin / 2 :border-right 1px solid #eee // Border with more whitespace, spans one column. =colborder :padding-right= !blueprint_grid_width - 0.5 * !blueprint_grid_margin - 1 :margin-right= !blueprint_grid_width - 0.5 * !blueprint_grid_margin :border-right 1px solid #eee // Mixin this to an hr to make a horizontal ruler across a column. =colruler :background #ddd :color #ddd :clear both :float none :width 100% :height .1em :margin 0 0 1.45em :border none // Mixin this to an hr to make a horizontal spacer across a column. =colspacer +colruler :background #fff :color #fff