Susy, magic grid and columns - susy-compass

Question

I'm starting using Susy and there's something I'd like to accomplish but I don't know how, although I'm reading Susy's documentation and online tutorials.
I have this html:
<div class="page">
<nav>nav</nav>
<div class="main">
<div class="summary">
summary
</div>
<div class="content">
content
</div>
</div>
<footer>footer</footer>
</div>
and these Susy settings:
$total-columns: 12;
$column-width: 4em;
$gutter-width: 1em;
$grid-padding: $gutter-width;
$show-grid-backgrounds: true;
#include border-box-sizing;
// breakpoint variables
$M: 30em;
$L: 50em;
and this scss:
.page {
#include container;
#include susy-grid-background;
nav {
#include at-breakpoint($M) {
#include span-columns(2,12);
}
}
.main {
#include at-breakpoint($M) {
#include span-columns(10 omega,12);
}
.summary {
#include at-breakpoint($L) {
#include span-columns(2 omega,10);
}
}
.content {
#include at-breakpoint($L) {
#include span-columns(8,10);
}
}
}
footer {clear: both;}
That works as expected, the content is totally fluid with a max-width. However, I would like the same behaviour but starting with a 4 column layout and then changing to 8 columns and then 12 columns.
I do it like this:
$total-columns: 4;
$column-width: 4em;
$gutter-width: 1em;
$grid-padding: $gutter-width;
$show-grid-backgrounds: true;
#include border-box-sizing;
// breakpoint variables
$M: 30em;
$L: 50em;
and the scss:
.page {
#include container;
#include susy-grid-background;
// Now create a media-query breakpoint at the min-width of 30em and use a larger grid and modify the layout
#include at-breakpoint($M 8) {
// This will create a new container with a total of 8 columns
#include container;
#include susy-grid-background;
// Now modify the inner elements to their new home
nav { #include span-columns(2,8); }
.main { #include span-columns(6 omega,8); }
}
#include at-breakpoint($L 12) {
// This will create a new container with a total of 12 columns
#include container;
#include susy-grid-background;
// Now modify the inner elements to their new home
nav { #include span-columns(2,12); }
.main {
#include span-columns(10 omega,12);
.content {
#include span-columns(8,10);
}
.summary {
#include span-columns(2 omega,10);
}
}
}
footer {clear: both;}
}
This also works ok, but I can't make all the layouts liquid as in the first example. For example, at 450px wide the 4 column layout doesn't fill the viewport. The same happens at 768px, the 8 columns don't fill the viewport. I'd like the layout to always fill the available width, as in the first example, as well as change columns according to defined breakpoints.
Is that the normal Susy behaviour or is it possible to do it in another way?
Excuse me if this is a newbie question, but I'm just at the beginning and I'd like to make things clear before using Susy on real projects.
Thanks.

Answer 1

Here is how I handle responsive grids, maybe it will help you.
I have a few variables I define for each breakpoint (which I like to name by the number of columns) for instance:
// 6 Columns -------------------------------------------------------------------
$six-gut-width : .5rem;
$six-padding : 0;
$six-width : 6 * $column-width + 5 * $six-gut-width + $six-padding * 2;
// 8 Columns -------------------------------------------------------------------
$eight-width : 8 * $column-width + 7 * $gutter-width + $grid-padding * 2;
This way I have both the actual width and number of columns to use in my at-breakpoint calls.
Then my breakpoints break down like this:
#include at-breakpoint($six-width 6 $eight-width) {
// Breakpoint specific scss
.page { set-container-width(6); }
}
I like to keep the breakpoint specific stuff in it's own partial in a breakpoints directory (but you don't have to) i.e: breakpoints/_6-cols.scss, breakpoints/_8-cols.scss etc.
If you want to cascade to a larger breakpoint then leave off the third parameter on at-breakpoint(), or set it to something higher than the next level. Also be sure you're setting set-container-width instead of container in your breakpoint declarations. Check out set-container-width on Susy docs
Hope this helps you. Best of luck.