Layout Media
Installation
yarn add @chewy/kib-layout-styles
Import
@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