MediaQuery with Breakpoint Support & Grid helpers
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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; } | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$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; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment