Susy: Use different layouts for different screen sizes

Question

I am building a mobile first website using Susy and would like to have different layouts for different screen sizes. Each layout will have its own set of columns, column widths and gutter widths.

How do I do this?

---

My Attempts:

1. Old Susy method

In old Susy, you would do it like this:

$base-font-size: 10px;
$show-grid-backgrounds  : true;


$total-columns       : 4;
$column-width        : 6.250em;
$gutter-width        : 1em;
$gutter-padding      : $gutter-width;

body {
background:pink;    
}


@media only screen and (min-width: 480px) {
$total-columns       : 3;
/*$column-width        : 12.567em;
$gutter-width        : 3em;
$gutter-padding      : $gutter-width;*/

body {
background:yellow;  
}


}

@media only screen and (min-width: 600px) {
$total-columns       : 6;
/*$column-width        : 7.500em;
$gutter-width        : 2em;
$gutter-padding      : $gutter-width;*/

body {
background:blue;    
}

}

@media only screen and (min-width: 768px) {
$total-columns       : 6;
/*$column-width        : 7.500em;
$gutter-width        : 2em;
$gutter-padding      : $gutter-width;*/

body {
background:green;   
}

}

@media only screen and (min-width: 960px) {
$total-columns       : 6;
/*$column-width        : 8.833em;
$gutter-width        : 3em;
$gutter-padding      : $gutter-width;*/

body {
background:red; 
}

}

[The background colors is so I can tell it is working]

In New Susy, when I do this, the number of columns is always 6 regardless of screen size. They are also not the correct column size.

2. Breakpoint Method New Susy has a new break point method which lets you specify different columns for different layouts. This is how I have used it:

$base-font-size: 10px;
$show-grid-backgrounds  : true;


$total-columns       : 4;
$column-width        : 6.250em;
$gutter-width        : 1em;
$gutter-padding      : $gutter-width;

body {
background:pink;    
}

.layout-primary {
  @include container;
  @include susy-grid-background;
}


@include at-breakpoint(480px 3) {
  .layout-primary {
  @include container;
 }

}

@include at-breakpoint(600px 6) {
  .layout-primary {
  @include container;
 }
}

@include at-breakpoint(768px 6) {
  .layout-primary {
  @include container;
 }
}

When I use this code, the columns are now always stuck at 4, regardless of layout. You also cannot use this method to specify different column widths/padding values.

Susy is so awesome that I know I am misunderstanding something. But I've spent a long time going over the docs and trying different things, and cannot see what I am doing wrong.

I know I have asked this question before, but that was for the old Susy version.

Answer 1

The reason you are seeing 4-columns in the background at each breakpoint, is beacuase you have only declared @include susy-grid-background; in the 4-column context. I think someone has already filed a bug to create a breakpoint/background shortcut, so that will be coming soon. In the meantime, you'll have to re-call that mixin everywhere you call container.

@include at-breakpoint(600px 6) {
  .layout-primary {
    @include container;
    @include susy-grid-background;
  }
}

But you're right, at-breakpoint only allows for changes to column-count at this point. I would like to expand that, so if you file a bug on github, I'll happily take a look at it. In the meantime there is a with-grid-settings mixin that allows you to change all the basic settings (I'm also hoping to get the advanced settings in there if I can soon).

@include at-breakpoint(600px 6) {
  @include with-grid-settings(6,6em,1em,1em) {
    .layout-primary {
      @include container;
      @include susy-grid-background;
    }
  }
}