Grid System

_utilties.grid.scss

@mixin apply-basis($frac) {
  > .u-grid__item {
    width: $frac * 100%;
  }
}

.u-grid {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;

  &--2 {
    @include apply-basis(1/1);

    @include media-query('m') {
      @include apply-basis(1/2);
    }
  }

  &--3 {
    @include apply-basis(1/1);

    @include media-query('s') {
      @include apply-basis(1/3);
    }
  }

  &--4 {
    @include apply-basis(1/2);

    @include media-query('s') {
      @include apply-basis(1/4);
    }
  }

  &--5 {
    @include apply-basis(1/1);

    @include media-query('s') {
      @include apply-basis(1/3);
    }
    @include media-query('m') {
      @include apply-basis(1/4);
    }
    @include media-query('l') {
      @include apply-basis(1/5);
    }
  }

  &--6 {
    @include apply-basis(1/2);

    @include media-query('s') {
      @include apply-basis(1/3);
    }
    @include media-query('m') {
      @include apply-basis(1/4);

      > .u-grid__item:nth-child(6n+5),
      > .u-grid__item:nth-child(6n+6) {
        display: none;
      }
    }
    @include media-query('l') {
      @include apply-basis(1/6);

      > .u-grid__item:nth-child(6n+5),
      > .u-grid__item:nth-child(6n+6) {
        display: block;
      }
    }
  }

  &--8 {
    @include apply-basis(1/2);

    @include media-query('s') {
      @include apply-basis(1/4);
    }
    @include media-query('m') {
      @include apply-basis(1/6);
    }
    @include media-query('l') {
      @include apply-basis(1/8);
    }
  }
}

.u-gutter {
  @include spacing('mh', -1);

  > .u-grid__item {
    @include spacing('ph', 1);
  }

  &--small {
    @include spacing('mh', -4);

    > .u-grid__item {
      @include spacing('ph', 4);
    }
  }
}

_utilties.media-queries.scss

/*
** Breakpoints
*/

$breakpoints: (
  xs: 23.4375em, /* 375/16 */
  s: 40.625em, /* 650/16 */
  m: 54.125em, /* 850/16 */
  l: 68.75em, /* 1100/16 */
  xl: 90em, /* 1440/16 */
);

/*
** Media Query Mixin
*/
@mixin media-query($media-query) {
  @each $size, $br in $breakpoints {
    @if $media-query == $size {
      @media only screen and (min-width: map-get($breakpoints, $size)) {
        @content;
      }
    }
  }
}

_utilties.spacing.scss

// Spacing Mixin for applying spacing units to elements directly
$spacing-namespace: 'm', 'mv', 'mh', 'mt', 'mr', 'mb', 'p', 'ph', 'pv';

@mixin spacing($spacing-namespace, $unit: 0, $min: 2.334rem) {
  $result: $base-unit / ($unit * 2);
  $minimum: $min / $unit;

  @if ($unit == 0) {
    $result: $base-unit;
    $minimum: $min;
  }

  @if ($spacing-namespace == 'm') {
    margin: $minimum;

    @include media-query('s') {
      margin: $result;
    }
  }

  @if ($spacing-namespace == 'mv') {
    margin-top: $minimum;
    margin-bottom: $minimum;

    @include media-query('s') {
      margin-top: $result;
      margin-bottom: $result;
    }
  }

  @if ($spacing-namespace == 'mh') {
    margin-left: $minimum;
    margin-right: $minimum;

    @include media-query('s') {
      margin-left: $result;
      margin-right: $result;
    }
  }

  @if ($spacing-namespace == 'mt') {
    margin-top: $minimum;

    @include media-query('s') {
      margin-top: $result;
    }
  }

  @if ($spacing-namespace == 'mr') {
    margin-right: $minimum;

    @include media-query('s') {
      margin-right: $result;
    }
  }

  @if ($spacing-namespace == 'mb') {
    margin-bottom: $minimum;

    @include media-query('s') {
      margin-bottom: $result;
    }
  }

  @if ($spacing-namespace == 'p') {
    padding: $minimum;

    @include media-query('s') {
      padding: $result;
    }
  }

  @if ($spacing-namespace == 'pv') {
    padding-top: $minimum;
    padding-bottom: $minimum;

    @include media-query('s') {
      padding-top: $result;
      padding-bottom: $result;
    }
  }

  @if ($spacing-namespace == 'ph') {
    padding-left: $minimum;
    padding-right: $minimum;

    @include media-query('s') {
      padding-left: $result;
      padding-right: $result;
    }
  }
}

.#{$util-namespace}space {
  @each $ns in $spacing-namespace {
    &-#{$ns} {
      @include spacing($ns);
      @for $unit from 1 through 4 {
        $result: $base-unit / ($unit * 2);

        &--#{$unit} {
          @include spacing($ns, $unit);
        }
      }
    }

    &-mh--neg {
      margin-left: -$base-unit;
      margin-right: -$base-unit;

      padding-left: $base-unit;
      padding-right: $base-unit;
    }
  }
}