Examples for Presentation: Advanced Responsive Web Design Part 5B: Using different grids at different min-widths with Breakpoint

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// Breakpoint (v2.5.0)
// Singularity Extras (v1.0.0)
// Singularity.gs (v1.5.1)
// ----

/**
 * Examples for Presentation: Advanced Responsive Web Design
 * Part 5B: Using different grids at different min-widths with Breakpoint
 * For More Information: http://github.com/tsmith512/arwd
 */
 
@import "compass";
@import "singularitygs";
@import "singularity-extras";
@import "breakpoint";

// SCSS:
@include add-grid(2);
@include add-grid(4 at 500px);
@include add-gutter(1/6);

#nav {
  @include grid-span(1,1);

  @include breakpoint(500px) {
    @include grid-span(3, 2);
  }
}

SassMeister-output.css

/**
 * Examples for Presentation: Advanced Responsive Web Design
 * Part 5B: Using different grids at different min-widths with Breakpoint
 * For More Information: http://github.com/tsmith512/arwd
 */
#nav {
  width: 46.15385%;
  float: left;
  margin-right: -100%;
  margin-left: 0;
  clear: none;
}
@media (min-width: 500px) {
  #nav {
    width: 74.07407%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
}