Fun with Breakpoints
Maybe you don't want to just stack the columns at a smaller screen size? Depending on what you're doing with the Responsive Grid System you can cook up some fun nth-child recipes to adjust the layout.
Go from 8 Column to 4 Column
If you're only using an 8 column grid to show 8 divs of 1 column each (like the screenshots in the Who's Using It section on here) you can switch this down to 4 columns using:
.span_1_of_8 {
width: 22.6%;
margin: 1% 0 1% 3.2%;
}
.span_1_of_8:nth-child(4n+1) {
clear: both;
margin-left: 0;
}
We've upped the width of the column from 11.1% to 22.6% and doubled the margin to 3.2%. The nth-child tomfoolery removes the margin and clears every fourth column.
The Spice Girls can make two become one. We can turn 8 into 4. Much more satisfying.
Go from 12 Column to 4 Column
Again, if you're only using an 12 column grid to show 12 divs of 1 column each you can switch this down to 4 columns using code similar to the previous example:
.span_1_of_12 {
width: 22.6%;
margin: 1% 0 1% 3.2%;
}
.span_1_of_12:nth-child(4n+1) {
clear: both;
margin-left: 0;
}
Just add this in at the breakpoint where you want everything to change.
Code the Responsive Grid Fantastic
I hope that the Responsive Grid System gives you the freedom to adjust your layout at different breakpoints to suit your content.
Stop treating this place like a hotel. Go forth and code the responsive grid fantastic!
SCSS Version
How would you like to get your hands on a .scss version that makes the grid for you? I for one welcome our Sassy Robot Overlords...
@import 'decimal';
$margin: 1.6%;
@for $cols from 2 through 12 {
$span: $cols;
@while $span > 0 {
@if ($span == $cols) {
.span_#{$span}_of_#{$cols} { width: 100%; }
} @else {
.span_#{$span}_of_#{$cols} { width: decimal-round( (((100 - ($margin * ($cols - 1))) / $cols) * $span) + (($span - 1) * $margin) , 2, 'floor'); }
}
$span: $span - 1;
}
}
Just set the margin at the top, the rest is automatic. You're welcome.
(You'll need to grab this rounding function from GitHub).
