Skip to content

Instantly share code, notes, and snippets.

@jethrolarson
Last active September 27, 2015 07:37
Show Gist options
  • Save jethrolarson/1233995 to your computer and use it in GitHub Desktop.
Save jethrolarson/1233995 to your computer and use it in GitHub Desktop.
Super simple compass grid system for modern browsers (IE8+)
/*
F'n Sweet Grid system
Reduced fluid version of http://960.gs with fixed-width gutters
No support for < IE8
Basic usage:
In some stylesheet:
@include grid();
In your html:
<div class="container">
<div class="grid_4">4</div>
<div class="grid_8">8</div>
</div>
*/
//Gutter width
@mixin grid($p: 10px, $containerClass: 'container', $cellClass:'grid', $base: 12){
.#{$containerClass}{
//clearfix
&:before{
content: '.';
display: block;
clear: both;
visibility: hidden;
height:0;
}
zoom:1;
margin: 0;padding: 0;
&>*{
float: left;
//This puts the padding on the inside. Teh Magic.
// You can replace this with `` if using compass
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-left: $p;
}
&>.alpha,
//First-child makes you not need .alpha most of the time
&>*:first-child {
padding-left: 0 !important;
}
//Full width cells don't need gutters
&>.#{$cellClass}_#{$base} {
padding: 0;
}
}
@for $i from 1 to $base{
$percent: $i / $base * 100%;
.#{$cellClass}_#{$i} {
width: $percent;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment