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).