MediaQuery with Breakpoint Support & Grid helpers

breakpoints.scss

// Breakpoints relative to the site design
$list-bp:
  'small',
  'small-2',
  'medium',
  'large',
  'large-2',
  'large-3';

$watch-page-height: 72px + 82px + 10px;
$aspect-ratio: 16/9;
$bp-small: 260px;
$bp-small-2: 508px;
$bp-medium: 724px;
$bp-large: 940px;
$bp-large-2: 1170px;
$bp-large-2--height: round($bp-large-2 / $aspect-ratio) + $watch-page-height;
$bp-large-3: 1450px;
$bp-large-3--height: round($bp-large-3 / $aspect-ratio) + $watch-page-height;

$bp-offset--small: 10px;
$bp-offset--medium: 20px;
$bp-offset: 40px;


// @respond-to Mixin
// $media = media type, ex: small, medium, large
@mixin respond-to($media) {
  @if index($list-bp, $media) {
    /* responds to #{$media} */
    @if $media == 'small' {
      @media screen and (max-width: $bp-small-2 + $bp-offset--small) { @content; }
    } @else if $media == 'small-2' {
      @media screen and (min-width: ($bp-small-2 + 1 + $bp-offset--small)) and (max-width: $bp-medium + $bp-offset--medium) { @content; }
    } @else if $media == 'medium' {
      @media screen and (min-width: ($bp-medium + 1 + $bp-offset--medium)) and (max-width: $bp-large + $bp-offset--medium) { @content; }
    } @else if $media == 'large' {
      @media screen and (min-width: ($bp-large + 1 + $bp-offset--medium)) and (max-width: $bp-large-2 + $bp-offset) { @content; }
    } @else if $media == 'large-2' {
      @media screen and (min-width: ($bp-large-2 + 1 + $bp-offset)) and (min-height: $bp-large-2--height) { @content; }
    } @else if $media == 'large-3' {
      @media screen and (min-width: ($bp-large-3 + 1 + $bp-offset)) and (min-height: $bp-large-3--height) { @content; }
    }
  }
}

// @respond-until Mixin
// $media = media type, ex: small, medium, large
@mixin respond-until($media) {
  @if index($list-bp, $media) {
    /* responds to #{$media} */
    @if $media == 'small-2' {
      @media screen and (max-width: $bp-small-2 + $bp-offset--small) { @content; }
    } @else if $media == 'medium' {
      @media screen and (max-width: $bp-medium + $bp-offset--medium) { @content; }
    } @else if $media == 'large' {
      @media screen and (max-width: $bp-large + $bp-offset--medium) { @content; }
    } @else if $media == 'large-2' {
      @media screen and (max-width: $bp-large-2 + $bp-offset) and (min-height: $bp-large-2--height) { @content; }
    } @else if $media == 'large-3' {
      @media screen and (max-width: $bp-large-3 + $bp-offset) and (min-height: $bp-large-3--height) { @content; }
    }
  }
}

// @respond-from Mixin
// $media = media type, ex: small, medium, large
@mixin respond-from($media) {
  @if index($list-bp, $media) {
    /* responds to #{$media} */
    @if $media == 'small-2' {
      @media screen and (min-width: ($bp-small-2 + 1 + $bp-offset--small)) { @content; }
    } @else if $media == 'medium' {
      @media screen and (min-width: ($bp-medium + 1 + $bp-offset--medium)) { @content; }
    } @else if $media == 'large' {
      @media screen and (min-width: ($bp-large + 1 + $bp-offset--medium)) { @content; }
    } @else if $media == 'large-2' {
      @media screen and (min-width: ($bp-large-2 + 1 + $bp-offset)) and (min-height: $bp-large-2--height) { @content; }
    } @else if $media == 'large-3' {
      @media screen and (min-width: ($bp-large-3 + 1 + $bp-offset)) and (min-height: $bp-large-3--height) { @content; }
    }
  }
}

grids.scss

$cne-grid-columns: 12;
$cne-grid-gutters: $cne-grid-columns - 1;

$cne-grid-column--small: 18px;
$cne-grid-gutter--small: 4px;

$cne-grid-column--small-2: 35px;
$cne-grid-gutter--small-2: 8px;

$cne-grid-column--medium: 42px;
$cne-grid-gutter--medium: 20px;

$cne-grid-column--large: 60px;
$cne-grid-gutter--large: 20px;

$cne-grid-column--large-2: 70px;
$cne-grid-gutter--large-2: 30px;

$cne-grid-column--large-3: 86px;
$cne-grid-gutter--large-3: 38px;

$list-grid-columns:
  $cne-grid-column--small,
  $cne-grid-column--small-2,
  $cne-grid-column--medium,
  $cne-grid-column--large,
  $cne-grid-column--large-2,
  $cne-grid-column--large-3;

$list-grid-gutters:
  $cne-grid-gutter--small,
  $cne-grid-gutter--small-2,
  $cne-grid-gutter--medium,
  $cne-grid-gutter--large,
  $cne-grid-gutter--large-2,
  $cne-grid-gutter--large-3;

$grid-aspect-ratio: 16 / 9;

// get-width {Function} Set width by columns for any breakpoint
// @param $bp {String} Breakpoint
// @param $columns {Number} Number of columns
// @param $fullWidthNoGutters {Boolean} When true, returns full column width
// @return Width calculated by breakpoint and number of columns
@function get-width($bp, $columns, $fullWidthNoGutters: false) {
  $gutters: $columns - 1;
  $index: index($list-bp, $bp);
  $column: nth($list-grid-columns, $index);
  $gutter: nth($list-grid-gutters, $index);
  @if $fullWidthNoGutters {
    @return (($cne-grid-columns * $column) + ($cne-grid-gutters * $gutter)) / $columns
  } @else if $gutters > -1 {
    @return ($columns * $column) + ($gutters * $gutter);
  }
}

// get-height {Function} Set height with a 16/9 aspect ratio by columns for any breakpoint
// @param $bp {String} Breakpoint
// @param $columns {Number} Number of columns
// @return Height calculated by breakpoint and number of columns with 16/9 aspect ratio
@function get-height($bp, $columns) {
  @return round(get-width($bp, $columns) / $grid-aspect-ratio);
}

// span-columns {Mixin} Sets width and margin-right by columns for any breakpoint
// @param $bp {String} Breakpoint
// @param $columns {Number} Number of columns
@mixin span-columns($bp, $columns) {
  @if $columns < $cne-grid-columns {
    $gutters: $columns - 1;
    $index: index($list-bp, $bp);
    $gutter: nth($list-grid-gutters, $index);
    @if $gutters > -1 {
      width: get-width($bp, $columns);
      margin-right: $gutter;
    }
  }
}

// container {Mixin} Set all widths by breakpoint for columns
// $columns {Number} number of columns
// $from {String} breakpoint from where to start from
@mixin container($columns, $from) {
  $start: index($list-bp, $from);
  $end: length($list-bp);
  @for $i from $start through $end {
    $bp: nth($list-bp, $i);
    @if $bp == 'large' {
      width: get-width($bp, $columns);
    } @else {
      @include respond-to($bp) {
        width: get-width($bp, $columns);
      }
    }
  }
}

// grid-columns {Mixin} Clears rows for columns
// $columns {Number} The number of columns to maintain
@mixin grid-columns($columns) {
  &:nth-of-type(#{$columns}n+1) {
    clear: both;
  }
  &:nth-of-type(#{$columns}n) {
    margin-right: 0;
  }
}