A semantic.gs working stylus file

grid.styl

// .-. .-. .-. .-.
// 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)