app.scss

// Container Widths
//
// Define container widths, these will be applied to the
// .container element. Values must be ascending.

$container-widths: (
        mobile: 360px,
        mobile--large: 480px,
        tablet: 720px,
        tablet--large: 960px,
        desktop: 1160px,
);

// Device break-points
//
// Define device break-points. Must start with a breakpoint of 0 &
// values must be ascending.

$grid-breakpoints: (
        reset: 0,
        mobile: 424px,
        mobile--large: 544px,
        tablet: 784px,
        tablet--large: 1024px,
        desktop: 1200px,
);

// Columns
//
// Specify amount of columns and the size of the gap.
$columns: 12;
$column-gap: 2rem;

// Minimum device breakpoint width. Smallest breakpoint will be a null value

@function device-min($name, $breakpoints: $grid-breakpoints) {
  $min: map-get($breakpoints, $name);

  @return if(0 != $min, $min, null);
}

// Maximum device breakpoint width. Largest breakpoint will be a null value

@function device-max($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
  $next: if(index($breakpoint-names, $name) < length($breakpoint-names),
          nth($breakpoint-names,
                  index($breakpoint-names, $name) + 1), null);

  @return if($next, device-min($next, $breakpoints) - .02px, null);
}

// Device breakpoint up. If the breakpoint is the smallest it will
// return without media query.
@mixin device-up($name, $breakpoints: $grid-breakpoints) {
  $min: device-min($name, $breakpoints);
  @if $min {
    @media (min-width: $min) {
      @content;
    }
  } @else {
    @content;
  }
}


// Device breakpoint down. If the breakpoint is the largest it will return without media query.
@mixin device-down($name, $breakpoints: $grid-breakpoints) {
  $max: device-max($name, $breakpoints);
  @if $max {
    @media (max-width: $max) {
      @content;
    }
  } @else {
    @content;
  }
}

// Device breakpoint between
@mixin device-between($lower, $upper, $breakpoints: $grid-breakpoints) {
  $min: device-min($lower, $breakpoints);
  $max: device-max($upper, $breakpoints);

  @if $min != null and $max != null {
    @media (min-width: $min) and (max-width: $max) {
      @content;
    }
  } @else if $max == null {
    @include device-up($lower, $breakpoints) {
      @content;
    }
  } @else if $min == null {
    @include device-down($upper, $breakpoints) {
      @content;
    }
  }
}

// Device breakpoint only
@mixin device-only($name, $breakpoints: $grid-breakpoints) {
  $min: device-min($name, $breakpoints);
  $max: device-max($name, $breakpoints);

  @if $min != null and $max != null {
    @media (min-width: $min) and (max-width: $max) {
      @content;
    }
  } @else if $max == null {
    @include device-up($name, $breakpoints) {
      @content;
    }
  } @else if $min == null {
    @include device-down($name, $breakpoints) {
      @content;
    }
  }
}

// Container
.container {
  width: 100%;
  padding-right: ($column-gap / 2);
  padding-left: ($column-gap / 2);
  margin-right: auto;
  margin-left: auto;

  @each $breakpoint, $width in $container-widths {
    @include device-up($breakpoint, $grid-breakpoints) {
      max-width: $width;
    }
  }
}

// Column wrap
.columns {
  display: flex;
  flex-wrap: wrap;
  margin-right: ($column-gap / -2);
  margin-left: ($column-gap / -2);
}

// Build Columns Mixin
@mixin build-columns($columns: $columns, $gap: $column-gap, $breakpoints: $grid-breakpoints) {
  // Set Defaults

  %defaults {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: ($gap / 2);
    padding-left: ($gap / 2);
  }

  // Loop Breakpoints

  @each $breakpoint in map-keys($breakpoints) {
    $min: device-min($breakpoint, $breakpoints);
    $label: if($min, $breakpoint, 'all');

    // Extend Defaults
    .#{$label},
    .#{$label}-auto {
      @extend %defaults;
    }

    @for $i from 1 through $columns {
      .#{$label}-#{$i} {
        @extend %defaults;
      }
    }

    // Set responsive properties

    .#{$label} {
      @include device-up($breakpoint, $breakpoints) {
        &--float{
          &-left {
            float: left !important;
          }

          &-right {
            float: right !important;
          }

          &-none {
            float: none !important;
          }
        }

        &--display {
          &-none {
            display: none !important;
          }

          &-block {
            display: block !important;
          }

          &-inline {
            display: inline !important;

            &-block {
              display: inline-block !important;
            }

            &-flex {
              display: inline-flex !important;
            }
          }

          &-table {
            display: table !important;

            &-row {
              display: table-row !important;
            }

            &-cell {
              display: table-cell !important;
            }
          }

          &-flex {
            display: flex !important;
          }
        }

        &--text {
          &-left {
            text-align: left !important;
          }

          &-right {
            text-align: right !important;
          }

          &-center {
            text-align: center !important;
          }
        }
      }
    }

    // Calculate grid sizes

    @include device-up($breakpoint, $breakpoints) {
      @for $i from 1 through $columns {
        .#{$label}-#{$i} {
          flex: 0 0 calc(100% * #{$i} / #{$columns});
          max-width: calc(100% * #{$i} / #{$columns});

          // Calculate Offset

          @if not ($label == "all" and $i == 0) {
            &--offset {
              $num: $i / $columns;
              margin-left: if($num == 0, 0, calc(100% * #{$i} / #{$columns}));
            }
          }
        }
      }
    }
  }
}

@include build-columns();