Skip to content

Instantly share code, notes, and snippets.

@joshdcomp
Last active December 15, 2015 18:29
Show Gist options
  • Save joshdcomp/5303705 to your computer and use it in GitHub Desktop.
Save joshdcomp/5303705 to your computer and use it in GitHub Desktop.
You define your own columns and gutters, this builds your widths out for you
//Doing columns better thant the Greeks OR the Romans
// There are no required variables, but someone can pass how many columns in the
// grid (that they can optionally determine with columnPX and gutterPX) they want
// an element to span. This means we can generate infinite grid systems with one mixin.
@mixin grid_builder($colSpan: 6, $columnPx: 73, $gutterPx: 15){
//Calculate the width of the element
$elementWidth: ($columnPx * $colSpan) + ($gutterPx * ($colSpan - 1));
//inline-block to preserve the height in the browser
display: inline-block;
width: $elementWidth + px;
margin-right: $gutterPx;
}//grid_builder()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment