// -------------------------------------------------------------- // 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 Tackett [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: // * http://www.subtraction.com/2007/03/18/oh-yeeaahh // -------------------------------------------------------------- @import compass/utilities/general/float.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 .column, #{enumerate("div.span", 1, !blueprint_grid_columns)} +column-base // The last column in a row needs this class (or mixin) or it will end up on the next row. .last, div.last +last // Use these classes (or mixins) to set the width of a column. @for !n from 1 to !blueprint_grid_columns .span-#{!n} +span(!n) .span-#{!blueprint_grid_columns}, div.span-#{!blueprint_grid_columns} +span(!blueprint_grid_columns) :margin 0 input, textarea, select @for !n from 1 through !blueprint_grid_columns &.span-#{!n} +span(!n, true) // 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. #{enumerate(".pull", 1, !blueprint_grid_columns)} +pull-base @for !n from 1 through !blueprint_grid_columns .pull-#{!n} +pull-margins(!n) #{enumerate(".push", 1, !blueprint_grid_columns)} +push-base @for !n from 1 through !blueprint_grid_columns .push-#{!n} +push-margins(!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, !override = false) !width = !blueprint_grid_width * !n + (!blueprint_grid_margin * (!n - 1)) @if !override :width = !width !important @else :width = !width =column-base(!last = false) +float-left @if !last +last @else :margin-right = !blueprint_grid_margin * html & :overflow-x hidden // Use this mixins to set the width of n columns. =column(!n, !last = false) +column-base(!last) +span(!n) // 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 =pull-base +float-left :position relative =pull-margins(!n, !last = false) @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 move it n columns to the left =pull(!n, !last = false) +pull-base +pull-margins(!n, !last) =push-base +float-right :position relative =push-margins(!n) :margin= 0 (-!blueprint_grid_outer_width * !n) 1.5em (!blueprint_grid_outer_width * !n) // mixin to a column to push it n columns to the right =push(!n) +push-base +push-margins(!n) // Border on right hand side of a column. =border(!border_color = #eee, !border_width = 1px) :padding-right = !blueprint_grid_margin / 2 - !border_width :margin-right = !blueprint_grid_margin / 2 :border-right #{!border_width} solid #{!border_color} // Border with more whitespace, spans one column. =colborder(!border_color = #eee, !border_width = 1px) :padding-right= floor((!blueprint_grid_width + 2 * !blueprint_grid_margin - !border_width)/2) :margin-right= ceil((!blueprint_grid_width + 2 * !blueprint_grid_margin - !border_width)/2) :border-right #{!border_width} solid #{!border_color} // Mixin this to an hr to make a horizontal ruler across a column. =colruler(!border_color = #ddd) :background= !border_color :color= !border_color :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