Grid & System Font Stack mainly for codepen imports

grid.scss

// System Font Stack
$system-font: -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;

// Gird
$columns: 12;
$gutter: 2%;

@function grid-width($cols, $has-gutter:false) {
    @if $has-gutter {
      @return calc(((100% / #{$columns}) * #{$cols}) - #{$gutter});
    }
    @else {
      @return calc((100% / #{$columns}) * #{$cols});
    }
}

// mixins – media queries
/*==========
df  -  0-359
xs  -  360
sm  -  400
md  -  700
mdl -  1000
lg  -  1200
xl  -  1500
===========*/

@mixin breakpoint($class) {
  @if $class == xs {
    @media (min-width: 360px) { @content; }
  }

  @if $class == sm {
    @media (min-width: 400px) { @content; }
  }

  @else if $class == md {
    @media (min-width: 700px) { @content; }
  }

  @else if $class == mdl {
    @media (min-width: 1000px) { @content; }
  }

  @else if $class == lg {
    @media (min-width: 1200px) { @content; }
  }

  @else if $class == xl {
    @media (min-width: 1500px) { @content; }
  }

  @else {
    @warn "Breakpoint mixin supports: xs, sm, md, mdl, lg, xl";
  }
}