Add breakpoint based column gaps

[timacdonald]

This is a new feature adding breakpoint based column gap classes i.e. is-variable is-8-desktop

<div class="columns is-variable is-mobile is-0-mobile is-8-tablet is-0-desktop is-8-widescreen">

Proposed solution

Allow different column gaps at different screen widths. I needed this in my current project and thought I'd PR to see if it would be worthwhile in the core.

I believe I've implemented this to match how you've used the mixins - but please let me know if its done incorrectly - would be happy to adjust as needed.

Tradeoffs

Generates a fair few classes.

Testing Done

You can see it in action and play in this codepen

[jgthms]

I like the idea, but you can simplify the code:

    @for $i from 0 through 8
      &.is-#{$i}
        --columnGap: #{$i * 0.25rem}
      +mobile
        &.is-#{$i}-mobile
          --columnGap: #{$i * 0.25rem}
      +tablet
        &.is-#{$i}-tablet
          --columnGap: #{$i * 0.25rem}
      +tablet-only
        &.is-#{$i}-tablet-only
          --columnGap: #{$i * 0.25rem}
      +touch
        &.is-#{$i}-touch
          --columnGap: #{$i * 0.25rem}
      +desktop
        &.is-#{$i}-desktop
          --columnGap: #{$i * 0.25rem}
      +desktop-only
        &.is-#{$i}-desktop-only
          --columnGap: #{$i * 0.25rem}
      +widescreen
        &.is-#{$i}-widescreen
          --columnGap: #{$i * 0.25rem}
      +widescreen-only
        &.is-#{$i}-widescreen-only
          --columnGap: #{$i * 0.25rem}
      +fullhd
        &.is-#{$i}-fullhd
          --columnGap: #{$i * 0.25rem}

[timacdonald]

@jgthms I've adjusted this for ya. Can't believe I missed that haha...must have been a long day 😅 If there is anything else you'd like addressed on this one let me know 👍