Revision: 64872
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at September 28, 2013 05:12 by adambuczek
Initial Code
$layout: 1218px; //set desired layout width
$columnsNum: 12; //choose number of columns
$gridGutter: 30px; //set gutter
$gridCol: ($layout - $columnsNum*$gridGutter)/$columnsNum; //column width will set itself
/*
* Mixin takes 2 arguments. Number of columns the content should occupy
* and left hand ofset which defaults to 0
*/
@mixin grid($columns, $offset:0) {
@if $columns <= $columnsNum {
width:$gridCol*$columns + $gridGutter*($columns - 1);
margin: 0 $gridGutter/2;
@if $columns != $columnsNum {
float: left;
}
@if $offset > 0 {
margin-left: $gridCol*$offset + $gridGutter*($offset - 1);
}
} @else {
@warn "No more than "+ $columnsNum +" columns";
}
}
Initial URL
Initial Description
Mixin sets element width without clogging your markup. Set layout width, number of columns and gutter width.
I use it to make sites responsive when if don't need to change the amount of columns.
eg. 1218px, 978px and 768px grids.
Usage:
Full width
`.hero {
text-align: center;
@include grid(12);
}`
Two columns
`article {
@include grid(6);
}`
`article:nth-child(2n) { //for two column layout
@include clearfix; //html5 boilerplate clearfix
}`
Three columns
`a {
@include grid(4);
text-align: center;
img, span {
margin: 0 auto;
display: block;
}
img {
margin-top: rhythm(2);
}
span:nth-child(2) {
margin-top: rhythm(1);
}
}`
`a:nth-child(3n) {
@include clearfix;
}`
Initial Title
Grid building mixin.
Initial Tags
layout
Initial Language
SASS