Responsive gutter classes

[colourgarden]

In response to a tweet - would anyone find responsive gutter classes like .grid--small--portable useful?

Currently, Avalanche has .grid--small etc where the gutter width can be modified for a grid but maybe there is a need for these to be controlled at a breakpoint level as well?

To achieve this, add a new Sass map to settings for the required gutters:

$av-gutters:  (
  "tiny":   0.25,
  "small":  0.5,
  "large":  2,
  "huge":   4
);

Then loop through these and the breakpoints to create the responsive breakpoint gutter classes:

@each $alias, $query in $av-breakpoints{
  @media #{$query}{
    @each $gutter-alias, $multiplier in $av-gutters{
      .#{$av-namespace}--#{$gutter-alias}--#{$alias}{
        margin-left: -($av-gutter * $multiplier);

        > .#{$av-namespace}__cell{
          padding-left: ($av-gutter * $multiplier);
        }
      }
    }
  }
}

[igaman]

yes, thanks a lot, we implement your avalanche grid system in your framework:
http://sandbox.devbea.fr/bff_avalanche/html/05-grid-avalanche.php

Merci

[colourgarden]

@igaman Hi. There's authentication on the link you sent so I can't access.

[GesJeremie]

I currently need it. I would like to be able to set/unset a grid--right depending the breakpoint. I think it would make sense to include that in the core of Avalanche ⚡️

[GesJeremie]

Something like that:

@if $av-enable-grid-center {

    @each $alias, $query in $av-breakpoints {
        @media #{$query} {

            .#{avCreateBlockClassName('center')}-at-#{$alias} {
                text-align: center;

                > .#{avCreateElementClassName()} {
                    text-align: left;
                }
            }

        }
    }
}

@if $av-enable-grid-right {

    @each $alias, $query in $av-breakpoints {
        @media #{$query} {

            .#{avCreateBlockClassName('right')}-at-#{$alias} {
              text-align: right;

              > .#{avCreateElementClassName()} {
                text-align: left;
              }
            }

        }
    }

}

[colourgarden]

Hi @GesJeremie. Could you submit a PR for this? Seems like a good option.

[colourgarden]

#33