Helping Danny understand Susy's responsive grids and breakpoints

Help Danny Get Responsive Susy

// Hey Eric, I'm hoping you can help me "get" the responsive part
// of Susy 1.0. I think I'm still a little unsure about it, and
// I'd like to make sure I'm implementing it correctly.

// Please feel free to adjust below into what should be a proper use case.

#main {
  @include container;
  section.nav {
    @include span-columns(12);
    //Say I want to make this a fixed element on mobile....Say IPhone dimensions in this example
  }
}

That's an advanced example. The default system is to simply add or remove columns without changing any other settings. I'd also recommend writing everything mobile-first.

$total-columns: 4;

#main {
  @include container(4,30em 12); // at min-width 30-em we establish a 12-column grid
  section.nav {
    @include span-columns(4); // by default we have 4 columns
    @include at-breakpoint(30em 12) { // at 30em we want 12 columns
      @include span-columns(12); // now we have 12
  }
}

You can change the grid settings any time you want, but there are no shortcuts for it. Takes a bit of work.

I think that cleared it up. Thanks man.