Skip to content

Instantly share code, notes, and snippets.

@javorszky
Created June 5, 2013 10:26
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 javorszky/5712973 to your computer and use it in GitHub Desktop.
Save javorszky/5712973 to your computer and use it in GitHub Desktop.
960.gs is an awesome starter grid. Sadly it's content box... so I've made it play nice with border-box
$width: 960px
$cols: 12
$gutter: 16px
@mixin clearfix-micro()
&
*zoom: 1
&:before,
&:after
content: ""
display: table
&:after
clear: both
%rows
padding-left: $gutter / 2
padding-right: $gutter / 2
float: left
min-height: 1px
%pushpull
position: relative
*
-moz-box-sizing: border-box
-webkit-box-sizing: border-box
box-sizing: border-box
.row
+clearfix-micro
margin: 0 auto
width: $width
@for $i from 1 through $cols
.grid_#{$i}
width: ( $width / $cols ) * $i
@extend %rows
.push_#{$i}
@extend %pushpull
left: ( $width / $cols ) * $i
.pull_#{$i}
@extend %pushpull
left: -( ( $width / $cols ) * $i )
@r-dent
Copy link

r-dent commented May 21, 2014

Hey!

I tried to compile it here and there. But i always get syntax errors. I never worked with SASS so i can´t debug.

Do you have a hint for me maybe?

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