Chirp Sass Documentation

Layout Breakpoint

Installation

  yarn add @chewy/kib-layout-styles

Import

  @use '~@chewy/kib-layout-styles/src/kib-breakpoint/styles' as kib-breakpoint;

Mixins

@mixin generate-all-show-hide($show, $hide) { ... }@mixin generate-all-show-hide($show, $hide) { 
  @each $target in common.get-breakpoint-sizes() {
    @include common.media-query($target) {
      @each $size in common.get-breakpoint-sizes() {
        $selector: if($size == $target, $hide, $show);

        #{$selector}\@#{$size} {
          display: none;
        }
      }
    }
  }
 }

Description

Generator for all show and hide utility classes

Parameters

Parameters
parameter Name	parameter Description	parameter Type	parameter Default value
`$show`	Selector for hiding elements.	`String`	— none
`$hide`	Selector to generate showing elements.	`String`	— none

Requires

[function] get-breakpoint-sizes
[variable] size

@mixin show-on-size($size) { ... }@mixin show-on-size($size) { 
  @each $target in common.get-breakpoint-sizes() {
    @if $size != $target {
      @include common.media-query($target) {
        display: none;
      }
    }
  }
 }

Description

Applies breakpoint-specific show styles

Parameters

Parameters
parameter Name	parameter Description	parameter Type	parameter Default value
`$size`	A named breakpoint size.	`String`	— none

Example

Basic usage

@use '~@chewy/kib-layout-styles/src/kib-breakpoint/styles/kib-breakpoint';

.my-layout {
  &__message-large {
    @include kib-breakpoint.show-on-size(lg);
  }
}

Requires

[function] get-breakpoint-sizes
[variable] size

@mixin hide-on-size($size) { ... }@mixin hide-on-size($size) { 
  @include common.media-query($size) {
    display: none;
  }
 }

Description

Applies breakpoint-specific hide styles

Parameters

Parameters
parameter Name	parameter Description	parameter Type	parameter Default value
`$size`	A named breakpoint size.	`String`	— none

Example

Basic usage

@use '~@chewy/kib-layout-styles/src/kib-breakpoint/styles/kib-breakpoint';

.my-layout {
  &__message-small {
    @include kib-breakpoint.hide-on-size(lg)
  }
}

Requires

[variable] size