Skip to content

Instantly share code, notes, and snippets.

@corvine74
Created June 18, 2014 14:43
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 corvine74/4bebdb0abcb9d5b0e58c to your computer and use it in GitHub Desktop.
Save corvine74/4bebdb0abcb9d5b0e58c to your computer and use it in GitHub Desktop.
//
// Grid system
// --------------------------------------------------
@default-width: (@remCalc * 1200);
@default-columns: 12;
@default-colspan: 1;
@default-padding: 0;
@default-margin: 0 auto;
@default-gutter: 0;
.row (@width:@default-width; @row-padding:false; @margin:@default-margin;) {
max-width: @width;
width: 100%;
margin: @margin;
.row-padding(@row-padding);
&:before,
&:after {
content:"";
display:table;
}
&:after {
clear:both;
}
}
.row-padding (
@row-padding) when (
@row-padding = false) {
padding: @default-padding;
}
.row-padding (
@row-padding) when (
@row-padding = true) {
padding-top: @default-padding;
padding-bottom: @default-padding;
}
.cols (@colspan:@default-colspan; @total-cols:@default-columns; @padding:@default-padding; @gutter:@default-gutter; @edge:false;) {
@total-gutter: (@total-cols - 1) * @gutter;
@spanned-gutters: (@colspan - 1) * @gutter;
width: (@colspan * ((100 - @total-gutter) / @total-cols)) + @spanned-gutters + 0%;
float: left;
padding: @padding;
.ifEdge (@edge; @gutter);
}
.ifEdge (
@edge;@gutter;) when (
@edge = false) {
margin-right: @gutter + 0%;
}
.ifEdge (
@edge;@gutter;) when (
@edge = true) {
margin-right: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment