Skip to content

Instantly share code, notes, and snippets.

@jcemer jcemer/grid.styl
Created Sep 18, 2012

Embed
What would you like to do?
A semantic.gs working stylus file
// .-. .-. .-. .-.
// Semantic.gs // for Stylus: http://learnboost.github.com/stylus/
// .-. .-. .-. .-.
// Defaults which you can freely override
$columnwidth = 60
$gutterwidth = 20
$columns = 12
gridwidth($c = $columns)
($columnwidth * $c) + ($gutterwidth * $c)
// Set $gridtotalwidth to 100% for a fluid layout
$gridtotalwidth = 100%
gridtotalwidth($c = $columns)
if $gridtotalwidth is defined
$gridtotalwidth
else
unit(gridwidth($c), px)
// .-. .-. GRID .-. .-.
row($c = $columns)
$w = gridwidth($c)
$tw = gridtotalwidth($c)
display: block
overflow: hidden
width: ($tw * ($gutterwidth + $w) / $w)
margin: 0 $tw * ($gutterwidth * .5 / $w * -1)
columnrow($x, $c = $columns)
$w = gridwidth($c)
$tw = gridtotalwidth($c)
float: left
width: ($tw * (($gutterwidth + $columnwidth) * $x) / $w)
column($x, $c = $columns)
$w = gridwidth($c)
$tw = gridtotalwidth($c)
float: left
width: ($tw * ((($gutterwidth + $columnwidth) * $x) - $gutterwidth) / $w)
margin: 0 $tw * ($gutterwidth * .5 / $w)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.