CODEWITHSUNDEEP
gridbreakpointsbourbonresponsiveneat
Ian McLaughlin
Ian McLaughlin

Reputation: 141

Bourbon Neat: variable $column and $gutter for different breakpoints

I need different column and gutter widths for different breakpoints, but this has no effect in _grid-settings.scss

@media screen and (max-width: 539px) {
    $column: percent(100/4);
    $gutter: em(13);
}
@media screen and (min-width: 540px) {
    $column: percent(100/12);
    $gutter: em(13);
}
@media screen and (min-width: 960px) {
    $column: percent(100/12);
    $gutter: em(20);
}

Am I asking Neat to do something it cannot do?

Upvotes: 1

Views: 497

Answers (2)

Design by Adrian
Design by Adrian

Reputation: 2235

In Neat 2.0, you can define multiple grids and choose breakpoints for when each should activate.

See official example in neat/settings/_setting.scss

Upvotes: -1

alexbea
alexbea

Reputation: 1370

You can do this, but it's going to be somewhat complex. Though once you finish, you can have it all adjusted via variables.

First, replace all of these values with variables you'll keep in once spot. This is because you'll be referencing them many times. The trick, and the reason why you may decide not to do this, is that you have to declare the new values within each rule.

I'll show you what I mean with a hypothetical page sidebar. Note that I'm not thinking too hard about the actual design for the sake of the example. And I can't recall off the top of my head if span-columns uses both variables, but let's assume it does for the example as well. No getting distracted.

In _variables.scss:

$bp-small: 540px;
$bp-large: 960px;

$column-sm: percent(100/4);
$column-lg: percent(100/12);
$gutter-sm: em(13);
$gutter-lg: em(20);

$column: $column-sm;
$gutter: $gutter-sm;

You could get away with not declaring the smallest variations (e.g., $column-sm), but I like doing it to make my intentions super clear.

In your partial:

body > aside {
  // Don't need the first media query declared since we're using mobile-first.
  @include span-columns(2 of 2);

  @media screen and (min-width: $bp-small) {
    $column: $column-lg;
    // Don't need to declare the $gutter since it's the same.

    @include span-columns(3 of 12);
  }

  @media screen and (min-width: $bp-large) {
    $column: $column-lg;
    $gutter: $gutter-lg;

    @include span-columns(4 of 12);
  }
}

So essentially you have to declare the changed variables in the same scope as the mixin using them. The mixin will use what's just been declared, but the variables won't be changed globally.

This can obviously get super complicated and verbose. The tricks to keep that down would be to 1) Set them as variables so you can change all at once and you don't have to remember their values. And 2) use layout classes. All I wrote above could go in a class like .l-aside or even in a custom mixin. Along with reusable, component-based SCSS, it shouldn't be that bad.

Upvotes: 0

Related Questions