// -------------------------------------------------------------- // 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) .prepend-top +prepend-top .append-bottom +append-bottom // 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 =append-bottom(!amount = 1.5em) margin-bottom= !amount =prepend-top(!amount = 1.5em) margin-top= !amount =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 visibility: hidden