What is the best way of creating nested grids with different layouts in Susy 2?

Question

I've got a site layout which is as follows, if you can imagine the structure!

• header

  • branding | search

• navigation

  • home | about | blog | news | contact

• main

  • news
  • promotion 1 | promotion 2 | promotion 3
  • more content | more content
• side bar first

• sidebar second

• footer

  • privacy policy | etc

The widths of these different sections above are all different - some have more gutting/padding than other.

I'm trying to figure out how in Susy 2 the best way of managing different layout contexts and am trying to figure it out in the documentation but with no proper examples, am struggling a little bit. I've tried using, for example, @include layout under the main section but that fails to do what I'm trying to do so I'm guessing I'm not quite understanding the fundamental concepts of Susy 2.

Any help/advice would be appreciated!

Thank you

Just to clarify, I'm not asking for the code for my site structure to be offered, I'm asking for the functions in the Susy 2 library to be clarified a little as there are no examples of the functions in use and how they should be used is not that apparent.

Answer 1

You probably want to use the with-layout mixin, which changes grid settings for a block of nested code:

nav {
  @include with-layout($nav-settings) {
    // nav layout code, uses nested settings.
  }
}

main {
  // main layout code, uses global settings.
}