Skip to content

Instantly share code, notes, and snippets.

@cherifGsoul
Forked from barryvdh/gist:2834636
Created August 31, 2013 19:53
Show Gist options
  • Save cherifGsoul/6400238 to your computer and use it in GitHub Desktop.
Save cherifGsoul/6400238 to your computer and use it in GitHub Desktop.
/* ===== Primary Styles =====================================================
Author: Fruitcake Studio (Barry vd. Heuvel)
========================================================================== */
//Generate a custom (semantic) grid
.customGrid(@gridColumnWidth, @gridGutterWidth){
#header, #main {
.row();
}
.block {
.span(3);
}
#content{
.span(9);
}
footer {
#copyright {
.span(12);
}
}
.thumbnails > li {
.span(3);
}
/* ===== Custom grid mixins =================================================
Do not change this mixin below this line!
========================================================================== */
.row() when( isnumber(@gridColumnWidth) ) {
margin-left: @gridGutterWidth * -1;
.clearfix();
}
.row() when(@gridColumnWidth = auto){
margin-left: 0;
}
.span(@columns: 1, @offset: 0) when( isnumber(@gridColumnWidth) ) {
float: left;
margin-left: (@gridColumnWidth * @offset) + (@gridGutterWidth * (@offset - 1)) + (@gridGutterWidth * 2);
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
min-height: 1px; // prevent collapsing columns
}
.span (@columns, @offset: 0) when(@gridColumnWidth = auto){
float: none;
display: block;
width: 100%;
margin-left: 0;
.box-sizing(border-box);
}
}
// Custom grid (default size)
.customGrid(@gridColumnWidth, @gridGutterWidth);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment