Singularitygs: Mobile grid persisting all screen sizes

Question

For some reason my grid is only showing the mobile (3 column) grid at all screen sizes. I am using the values below and don't understand what I am doing wrong. Any suggestions would be most welcome

@include add-grid(3);
@include add-grid(6 at 320px);
@include add-grid(12 at 740px);
@include add-gutter(1/3);

I am using the gems below

Using sass 3.3.14
Using breakpoint 2.5.0
Using singularitygs 1.2.1

Answer 1

It is not enough to define grid context.

In order for your responsive grids to work, you have to explicitly use them, e. g.:

@import "breakpoint";
@import "singularitygs";

@include add-grid(3);
@include add-grid(6 at 320px);
@include add-grid(12 at 740px);
@include add-gutter(1/3);

@include add-gutter(0.25);

.foo {

  background-color: deeppink;
  min-height: 10em;

  // Mobile grid
  @include float-span(1);

  // Medium grid
  @include breakpoint(320px) {
    @include float-span(1);
  }

  // Large grid
  @include breakpoint(740px) {
    @include float-span(1);
  }
}

Note that spans leak from smaller breakpoints into larger ones, and, unless overridden, they will mess your layout. In order to avoid that, set media queries with both min-width and max-width. Refer to Breakpoint documentation for details.