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
Parameters
parameter Nameparameter Descriptionparameter Typeparameter 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
Any type —

Map value

Requires
Used by
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
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
Parameters
parameter Nameparameter Descriptionparameter Typeparameter Default value
$size

The breakpoint size.

String none
Returns
String

Next breakpoint size name

Requires
Used by
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
Parameters
parameter Nameparameter Descriptionparameter Typeparameter Default value
$size

The breakpoint size.

String none
Returns
Number

Unitless number

Requires
Used by
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
Parameters
parameter Nameparameter Descriptionparameter Typeparameter Default value
$size

The breakpoint size.

String none
Returns
Number

Unitless number

Requires
Used by
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
Parameters
parameter Nameparameter Descriptionparameter Typeparameter Default value
$value

Number to convert

Number none
Returns
Number

Number formatted as em

Requires
  • [function] em
Used by
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
Parameters
parameter Nameparameter Descriptionparameter Typeparameter Default value
$query

A named breakpoint size. This may include a min- and max- prefix as modifiers.

String none
Returns
String

Root breakpoint name

Used by
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
Parameters
parameter Nameparameter Descriptionparameter Typeparameter 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;
  }
}
Used by

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
Parameters
parameter Nameparameter Descriptionparameter Typeparameter Default value
$query

A named breakpoint size. This may include a min- and max- prefix as modifiers.

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

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