Singularity multiple gutters being ignored

Question

I'm using Singularity.gs 1.5.1 to produce a grid. When I declare additional gutter dimensions they are ignored. This is what I have:

@include add-grid(12);
@include add-gutter(20px);
@include add-gutter(30px at 640px);
@include add-gutter(40px at 1024px);
@include add-gutter-style('split' 'fixed');
@include sgs-change('output', 'float');

.column-1 {
  @include grid-span(1, 1);
}

This is producing 20px grids at all screen sizes. According to the docs this should produce:

20px gutters at 0 - 640px
30px gutters at 640px - 1024px
40px gutters at 1024px and above

Why is this not working?

possible duplicate of [Singularitygs: Mobile grid persisting all screen sizes](http://stackoverflow.com/questions/25349886/singularitygs-mobile-grid-persisting-all-screen-sizes) — Andrey Mikhaylov - lolmaus, Feb 04 '15 at 08:26
Duplicate of http://stackoverflow.com/q/25349886/901944 . See my answer to that question. — Andrey Mikhaylov - lolmaus, Feb 04 '15 at 08:26

score 0 · Accepted Answer · answered Feb 09 '15 at 19:29

Take a read of the Responsive Grid Quickstart Section of Singularity.

Singularity does not provide responsive grids as you may be use to, but rather a responsive grid context. This allows you to define what you would like your grid options to be for when you call grid-span. In order to attach things to your grid, you still need to call grid-span within your media query when you'd like that to apply.

An alternative recommendation for you, as you're using fixed gutters with a float output style, is to create mixin that has your padding changes and include that.

@mixin column-padding {
  padding-left: 10px;
  padding-right: 10px;

  @include breakpoint(640px) {
    padding-left: 15px;
    padding-right: 15px;
  }

  @include breakpoint(1024px) {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.column-1 {
  @include grid-span(1, 1);
  @include column-padding;
}

Singularity multiple gutters being ignored

1 Answers1