Different gutter widths depending on layout size

[wheresrhys]

@danskinner requested a smaller gutter width of 10px (rather than 20px) when on small screens. I've done an override in next for now, but this should really be part of o-grid.

[AlbertoElias]

I've just checked and $o-grid-responsive-half-gutter is 10px and that's the variable used in both padding-left and padding-right. What do you mean?

[wheresrhys]

Something like

$o-grid-small-gutter: 10px !default;
  ...
$o-grid-extra-large-gutter: 20px !default;

$_o-grid-gutter-widths: (
     S: $o-grid-small-gutter,
       ...
     XL: $o-grid-extra-large-gutter
)

... and then when constructing the grid selectors use e.g. $_o-grid-gutter-widths.S (wrong syntax, but you get the idea) instead of $o-grid-half-gutter for the small layout etc.

I think it also makes a lot of sense to stop using half- in the variable name, and just divide the value by 2 when needed

[wheresrhys]

... don't feel you have to stick to that implementation... just thought it was easier to explain in code

[AlbertoElias]

But you said that we need a smaller gutter of 10px when the current one is this 'half gutter' of 10px. The current padding is 10px, so what we actually need is a larger padding?

[wheresrhys]

you in OSB tomorrow? will take a second to show you what I mean in a demo.

[AlbertoElias]

Yes, that way you can also explain the o-grid-page thing

[AlbertoElias]

Added in #55

[AlbertoElias]

@wheresrhys Can this be closed?

[AlbertoElias]

Nudging @wheresrhys

[wheresrhys]

yep