Layout Media
Installation
  yarn add @chewy/kib-layout-stylesImport
  @use '~@chewy/kib-layout-styles/src/media';Functions
get-map-by-key-safe
@function get-map-by-key-safe($map, $key, $error-key: 'item') { ... }@function get-map-by-key-safe($map, $key, $error-key: 'item') { @if not map.has-key($map, $key) { @error ("The #{$error-key} "#{$key}" does not exist."); } @return map.get($map, $key); }
Description
Wrapper function for map.get with error handling.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value | 
|---|---|---|---|
$map | The name of the defined type size.  | Map | — none | 
$key | The key in the map to lookup.  | String | — none | 
$error-key | Friendly name for the type of item in the map.  | String | 'item' | 
Returns
Map value
Requires
- [function] 
get 
Used by
- [function] 
get-spacing - [function] 
get-columns - [function] 
get-gutters - [function] 
get-breakpoint-min - [function] 
get-type-style - [function] 
get-type-style-property - [function] 
get-font-family - [function] 
get-type-size - [function] 
get-type-weight 
Author
CDS
get-breakpoint-sizes
@function get-breakpoint-sizes() { ... }@function get-breakpoint-sizes() { $keys: map.keys(settings.$breakpoints); @return $keys; }
Description
Returns a list of all breakpoint sizes.
Parameters
None.
Returns
List —List of names for each breakpoint size
Requires
- [variable] 
breakpoints 
Used by
- [mixin] 
generate-all-show-hide - [mixin] 
show-on-size - [mixin] 
generate-all-item-spans - [mixin] 
generate-all-item-offsets - [mixin] 
generate-all-item-ordering - [function] 
get-next-breakpoint-size 
Author
CDS
get-next-breakpoint-size
@function get-next-breakpoint-size($size) { ... }@function get-next-breakpoint-size($size) { $keys: get-breakpoint-sizes(); $index: list.index($keys, $size); $keys-length: list.length($keys); @if not $index or $index == $keys-length { @return null; } @return list.nth($keys, $index + 1); }
Description
Returns the next named breakpoint.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value | 
|---|---|---|---|
$size | The breakpoint size.  | String | — none | 
Returns
String —Next breakpoint size name
Requires
- [function] 
get-breakpoint-sizes - [variable] 
size 
Used by
- [function] 
get-breakpoint-max 
Author
CDS
get-breakpoint-min
@function get-breakpoint-min($size) { ... }@function get-breakpoint-min($size) { $breakpoint: get-map-by-key-safe(settings.$breakpoints, $size, 'breakpoint'); @return $breakpoint; }
Description
Returns the minimum width of the breakpoint boundary.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value | 
|---|---|---|---|
$size | The breakpoint size.  | String | — none | 
Returns
Number —Unitless number
Requires
- [function] 
get-map-by-key-safe - [variable] 
breakpoints - [variable] 
size 
Used by
- [function] 
has-min-breakpoint - [function] 
get-breakpoint-max - [mixin] 
query 
Author
CDS
get-breakpoint-max
@function get-breakpoint-max($size) { ... }@function get-breakpoint-max($size) { @if not map.has-key(settings.$breakpoints, $size) { @error ("The breakpoint "#{$size}" does not exist."); } $next-size: get-next-breakpoint-size($size); @return if($next-size, get-breakpoint-min($next-size) - 1, null); }
Description
Returns the maximum width of the breakpoint boundary.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value | 
|---|---|---|---|
$size | The breakpoint size.  | String | — none | 
Returns
Number —Unitless number
Requires
- [function] 
get-next-breakpoint-size - [function] 
get-breakpoint-min - [variable] 
breakpoints - [variable] 
size 
Used by
- [function] 
has-max-breakpoint - [mixin] 
query 
Author
CDS
get-formatted-breakpoint-size
@function get-formatted-breakpoint-size($value) { ... }@function get-formatted-breakpoint-size($value) { @return unit.em($value, 16); }
Description
Formats the raw breakpoint size.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value | 
|---|---|---|---|
$value | Number to convert  | Number | — none | 
Returns
Number —Number formatted as em
Requires
- [function] 
em 
Used by
- [mixin] 
query-simple 
Author
CDS
get-root-size
@function get-root-size($query) { ... }@function get-root-size($query) { $has-modifier: string.index($query, '-'); @return if($has-modifier, string.slice($query, $has-modifier + 1), $query); }
Description
Returns the named breakpoint regardless of query modifiers.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value | 
|---|---|---|---|
$query | A named breakpoint size. This may include a   | String | — none | 
Returns
String —Root breakpoint name
Used by
- [mixin] 
item-span - [mixin] 
item-offset 
Author
CDS
Mixins
query-simple
@mixin query-simple($min, $max) { ... }@mixin query-simple($min, $max) { @if $max { @if not $min or $min == 0 { @if $min == 0 { @warn 'query-simple: min is 0, only max is needed'; } // has a max size @media (max-width: functions.get-formatted-breakpoint-size($max)) { @content; } } @else { // has a min and max size @media (min-width: functions.get-formatted-breakpoint-size($min)) and (max-width: functions.get-formatted-breakpoint-size($max)) { @content; } } } @else if $min != null and $min != 0 { // has a min size @media (min-width: functions.get-formatted-breakpoint-size($min)) { @content; } } @else { // no sizes @if $min == 0 { @warn 'query-simple: min is 0, no query is needed'; } @else { @warn 'query-simple: no widths provided'; } @content; } }
Description
Wraps styles in a media query with a min-width and/or max-width.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value | 
|---|---|---|---|
$min | The minimum width of the breakpoint boundary.  | Number | — none | 
$max | The maximum width of the breakpoint boundary.  | Number | — none | 
Example
Min and max query
@use '~@chewy/kib-layout-styles/src/media';
.my-layout {
  display: flex;
  flex-direction: column;
  @include media.query-simple(648, 1024) {
    flex-direction: row;
  }
}Min width query
@use '~@chewy/kib-layout-styles/src/media';
.my-layout {
  display: flex;
  flex-direction: column;
  @include media.query-simple(648) {
    flex-direction: row;
  }
}Max width query
@use '~@chewy/kib-layout-styles/src/media';
.my-layout {
  display: flex;
  flex-direction: row;
  @include media.query-simple($max: 647) {
    flex-direction: column;
  }
}Requires
- [function] 
get-formatted-breakpoint-size 
Used by
- [mixin] 
query 
query
@mixin query($query, $custom) { ... }@mixin query($query, $custom) { @if $custom { // custom query @media #{$custom} { @content; } } @else { $has-modifier: string.index($query, '-'); $size: if($has-modifier, string.slice($query, $has-modifier + 1), $query); $min: functions.get-breakpoint-min($size); $max: functions.get-breakpoint-max($size); @if not $min and not $max { @warn 'Media query "#{$query}" not found'; } @else { @if $has-modifier { @if string.index($query, 'min-') == 1 { @if not $min { @warn 'Media query "#{$query}" not found'; } @else if $min == 0 { @content; } @else { @include query-simple($min) { @content; } } } @else if string.index($query, 'max-') == 1 { @if not $max { @warn 'Media query "#{$query}" not found'; } @else { @include query-simple($max: $max) { @content; } } } } @else if $min == 0 { @include query-simple($max: $max) { @content; } } @else { @include query-simple($min, $max) { @content; } } } } }
Description
Wraps styles in a media query using named breakpoints or a custom query.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value | 
|---|---|---|---|
$query | A named breakpoint size. This may include a   | String | — none | 
$custom | A custom media query that negates the named query.  | String | — none | 
Example
Breakpoint size
@use '~@chewy/kib-layout-styles/src/media';
.my-layout {
  display: flex;
  flex-direction: column;
  @include media.query(md) {
    flex-direction: row;
  }
}Breakpoint size with modifier
@use '~@chewy/kib-layout-styles/src/media';
.my-layout {
  display: flex;
  flex-direction: column;
  @include media.query(min-md) {
    flex-direction: row;
  }
}Custom breakpoint
@use '~@chewy/kib-layout-styles/src/media';
.my-layout {
  display: flex;
  flex-direction: row;
  @include media.query($custom: '(max-width: 640px)') {
    flex-direction: column;
  }
}Requires
- [mixin] 
query-simple - [function] 
get-breakpoint-min - [function] 
get-breakpoint-max - [variable] 
size 
Variables
breakpoints
$breakpoints: (...) !default;$breakpoints: (map.get(breakpoints.$chirp-breakpoints, foundations.$default-theme)) !default;
Description
Defines the minimum widths for each breakpoint
Type
Map
Used by
- [function] 
get-breakpoint-sizes - [function] 
get-breakpoint-min - [function] 
get-breakpoint-max