CODEWITHSUNDEEP
singularitygs
BANO
BANO

Reputation: 89

Why change the grid-size when switching media-query?

I have been using singularity for about a small year now and I'm still not 100% I'm using it at its full potential, or the "correct" way really.

The main question I have is why you should change the grid-size depending on a media-query.

I'm using SGS like this at the moment:

grids: 12;
$gutters: 1/2;

.column { 
  // mobile first ... full-width  
  @include breakpoint($from-medium) { // 2 columns on medium devices
    @include grid-span(6, first);
    &:nth-child(even) {
      @include grid-span(6, last);
    }
  }
  @include breakpoint($from-large) { // 3 columns on larger devices
    @include grid-span(4);
    &:nth-child(even) {
      @include grid-span(4); // needed to override previous MQ since I'm only using min-width. 
    }
    &:nth-child(3n) {
      @include grid-span(4, last);
    }
    &:nth-child(3n+1) {
      @include grid-span(4, first);
    }
  }
}

I would love to reduce the code for this and maybe changing grids in between MQ's might help but I'm not seeing how?

Upvotes: 2

Views: 49

Answers (1)

Andrey Mikhaylov - lolmaus
Andrey Mikhaylov - lolmaus

Reputation: 23873

I have different number of columns for different screen sizes so that gutter size is consistent.

If you have one grid definition for all grid columns, then the smaller the screen -- the smaller the gutters. For example, with a grid definition of 12, 0.1 (that is, 12 columns and gutter size is 0.1 of column size), on a portrait phone screen (320px wide) each gutter will be only 2.4px wide. It's ridiculously small and ruins grid looks.

On the other hand, if you had a 3, 0.1 grid for 320px screen, then gutter size would be a substantial 10px.

Not only gutter sizes become consistent throughout your screen sizes, but columns too. Have a look at the bottommost demo on this page: http://lolmaus.github.io/singularity-quick-spanner/ When you adjust browser window width, the width of each item in the grid varies in a predictable range. I. e. it's always between 154 and 180 pixels wide, on any device.

This approach changes your mind model of responsive web design. You can now design with consistent blocks that fit into certain number of columns, regardless of the device.

To make the most out of this approach, i recommend switching from media queries to element queries. Element queries require some JS help, that is you need a JS library. There are several implementations. EQ.js from the author of Singularity is not the ideal, but definitely the best one.

Upvotes: 0

Related Questions