Skip to content

Instantly share code, notes, and snippets.

@svoisen
Created February 13, 2013 23:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save svoisen/4949482 to your computer and use it in GitHub Desktop.
Save svoisen/4949482 to your computer and use it in GitHub Desktop.
Sass for generating a Gridset style 1-4-8 column responsive grid
$font-size: 1em
$line-height: 1.5em
@mixin column($width, $offset)
margin-left: $offset
width: $width
float: left
padding: 0 $line-height/2 0 $line-height/2
-webkit-box-sizing: border-box
box-sizing: border-box
.m1
@include column(100%, 0)
@media only screen and (min-width: 767px)
@for $i from 1 through 4
.t#{$i}
@include column(25% * $i, 0)
@for $j from 1 through $i
.t#{$j}-#{$i}
@include column(25% * ($i - $j + 1), 25% * ($j - 1))
@media only screen and (min-width: 1023px)
@for $i from 1 through 8
.d#{$i}
@include column(12.5% * $i, 0)
@for $j from 1 through $i
.d#{$j}-#{$i}
@include column(12.5% * ($i - $j + 1), 12.5% * ($j - 1))
@svoisen
Copy link
Author

svoisen commented Feb 13, 2013

Just the bare bones to get started.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment