Better syntax handling for responsive container and has-layout #297

Zauberfisch opened this Issue Feb 13, 2014 · 2 comments

2 participants


it took me quiet a while to figure out how setting multiple layouts works in susy.

I am talking about the following code:

@import "susy";
$border-box-sizing: true;
$column-width: 4em;
$gutter-width: 1em;
$grid-padding: $gutter-width;

$mobile-grid: 6;
$tablet-grid: 9 lt-ie9;
$computer-grid: 55em 12 lt-ie9;

$total-columns: 6;

.page {
    @include container($mobile-grid, $tablet-grid, $computer-grid);

now, ... the whole thing of using multiple layouts was not clear to me at the beginning, but I figured it out, some more in depth examples would be useful.

but there is one thing in particular that the docs should have told me, because I spent hours trying to figure it out:
For the clearfix to work in IE 8, one needs to trigger hasLayout (zoom: 1), however, susy only does that if the first layout (in this case $mobile-grid) is the default layout. so $total-columns needs to be set to the mobile column count (in this case 6). otherwise there is no clearfix in IE8.

I think documentation/examples on responsive grid in general should be improved.
And really need to make clear to the developer what value to set to $total-columns.

(should it in fact mention it somewhere, and I missed it, I beg your forgiveness)

OddBird member

I think this should be treated as a bug in the code, not a documentation problem. We should consider changing the way responsive containers work.

As for more examples: that's always true. The problem is — I use Susy in one way, and other people use it in vastly different ways. It's not possible for me to make examples that cover the range of options, but I happily welcome contributions. I plan to solicit tutorials for the new site, more officially. In the meantime, if you want to write up your approach, I'll happily consider publishing it.


@mirisuzanne mirisuzanne added susyone bug and removed Susy Next labels Mar 10, 2014
OddBird member

closed by 8fa9399 (in susy 2 gem, susyone language module).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment