Skip to content

Instantly share code, notes, and snippets.

@anderssvendal

anderssvendal/grid.sass

Created August 19, 2012 17:41
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anderssvendal/3396633 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anderssvendal/3396633 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. anderssvendal created this gist Aug 19, 2012.
    22 changes: 22 additions & 0 deletions grid.sass
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,22 @@
    // 12 column grid
    $column-width: 60px !default
    $gutter-width: 20px !default
    $grid-columns: 12 !default

    $grid-width: $column-width * $grid-columns + $gutter-width * ($grid-columns - 1)

    @function column-width($n)
    @return $column-width * $n + $gutter-width * ($n - 1)

    @mixin container
    margin-left: -$gutter-width
    +pie-clearfix

    @mixin span($n, $padding: 0)
    margin-left: $gutter-width
    width: column-width($n) - ($padding * 2)
    padding: $padding
    float: left

    @mixin offset($n)
    margin-left: +column-width($n) + $gutter-width * 2