• No results

Page Spacing

Installation

  yarn add @chewy/kib-foundations

Import

  @use '~@chewy/kib-foundations/src/page-spacing';

Mixins

section-margin-top

@mixin section-margin-top($spacing-size-small: 's6', $spacing-size-large: 's7', $exclusion-class: settings.$default-exclusion-class) { ... }@mixin section-margin-top($spacing-size-small: 's6', $spacing-size-large: 's7', $exclusion-class: settings.$default-exclusion-class) { 
  &:not(.#{$exclusion-class}) {
    margin-block-start: spacing.get($spacing-size-small);

    @include media.query('min-lg') {
      margin-block-start: spacing.get($spacing-size-large);
    }
  }
 }
Description

Apply consistent vertical spacing (margin-block-start) to page sections with an opt-out mechanism via exclusion class.

This mixin helps maintain consistent vertical rhythm across page layouts by applying standardized top margins to sections while allowing specific sections to opt out (e.g., hero sections, first sections).

Uses CSS logical property margin-block-start for better internationalization.

By default, applies responsive spacing:

  • 's6' for md breakpoint and below
  • 's7' for lg breakpoint and above
Parameters
Parameters
NameDescriptionTypeDefault value
$spacing-size-small

Spacing token for md and below (e.g., 's5', 's6')

String's6'
$spacing-size-large

Spacing token for lg and above (e.g., 's7', 's8')

String's7'
$exclusion-class

CSS class name to exclude from spacing

Stringsettings.$default-exclusion-class
Example

Basic usage with defaults (Traditional SCSS)

@use '~@chewy/kib-foundations/src/page-spacing';

.page-section {
  @include page-spacing.section-margin-top;
}

// Outputs:
// .page-section:not(.no-top-margin) {
//   margin-block-start: var(--kib-spacing-s6, 3rem);
//   @media (min-width: 64.0625em) {
//     margin-block-start: var(--kib-spacing-s7, 4rem);
//   }
// }

Custom spacing sizes

@use '~@chewy/kib-foundations/src/page-spacing';

.page-zone {
  @include page-spacing.section-margin-top('s4', 's6');
}

Custom exclusion class

@use '~@chewy/kib-foundations/src/page-spacing';

.content-block {
  @include page-spacing.section-margin-top('s6', 's7', 'hero-section');
}

Usage in HTML

<!-- This section will have top margin -->
<section class="page-section">
  Content here
</section>

<!-- This section will NOT have top margin -->
<section class="page-section no-top-margin">
  Hero content
</section>
Requires

section-margin-bottom

@mixin section-margin-bottom($spacing-size-small: 's6', $spacing-size-large: 's7', $exclusion-class: 'no-bottom-margin') { ... }@mixin section-margin-bottom($spacing-size-small: 's6', $spacing-size-large: 's7', $exclusion-class: 'no-bottom-margin') { 
  &:not(.#{$exclusion-class}) {
    margin-block-end: spacing.get($spacing-size-small);

    @include media.query('min-lg') {
      margin-block-end: spacing.get($spacing-size-large);
    }
  }
 }
Description

Apply consistent vertical spacing (margin-block-end) to page sections with an opt-out mechanism via exclusion class.

Similar to section-margin-top but applies spacing at the bottom of sections.

Uses CSS logical property margin-block-end for better internationalization.

By default, applies responsive spacing:

  • 's6' for md breakpoint and below
  • 's7' for lg breakpoint and above
Parameters
Parameters
NameDescriptionTypeDefault value
$spacing-size-small

Spacing token for md and below (e.g., 's5', 's6')

String's6'
$spacing-size-large

Spacing token for lg and above (e.g., 's7', 's8')

String's7'
$exclusion-class

CSS class name to exclude from spacing

String'no-bottom-margin'
Example

Basic usage

@use '~@chewy/kib-foundations/src/page-spacing';

.page-section {
  @include page-spacing.section-margin-bottom;
}
Requires

page-padding-inline

@mixin page-padding-inline($spacing-size-small: 's4', $spacing-size-large: 's6', $exclusion-class: settings.$default-inline-padding-exclusion-class) { ... }@mixin page-padding-inline($spacing-size-small: 's4', $spacing-size-large: 's6', $exclusion-class: settings.$default-inline-padding-exclusion-class) { 
  &:not(.#{$exclusion-class}) {
    padding-inline: spacing.get($spacing-size-small);

    @include media.query('min-md') {
      padding-inline: spacing.get($spacing-size-large);
    }
  }
 }
Description

Apply consistent horizontal padding (padding-inline) to page sections with an opt-out mechanism via exclusion class.

This mixin helps maintain consistent left/right page gutters across layouts by applying standardized inline padding that scales with viewport size.

Uses CSS logical property padding-inline for better internationalization.

By default, applies responsive spacing:

  • 's4' for sm breakpoint and below
  • 's6' for md breakpoint and above
Parameters
Parameters
NameDescriptionTypeDefault value
$spacing-size-small

Spacing token for sm and below (e.g., 's3', 's4')

String's4'
$spacing-size-large

Spacing token for md and above (e.g., 's5', 's6')

String's6'
$exclusion-class

CSS class name to exclude from padding

Stringsettings.$default-inline-padding-exclusion-class
Example

Basic usage with defaults

@use '~@chewy/kib-foundations/src/page-spacing';

.page-content {
  @include page-spacing.page-padding-inline;
}

// Outputs:
// .page-content:not(.no-inline-padding) {
//   padding-inline: var(--kib-spacing-s4, 1.6rem);
//   @media (min-width: 40.5em) {
//     padding-inline: var(--kib-spacing-s6, 2.4rem);
//   }
// }

Custom spacing sizes

@use '~@chewy/kib-foundations/src/page-spacing';

.narrow-gutter {
  @include page-spacing.page-padding-inline('s3', 's4');
}

Custom exclusion class

@use '~@chewy/kib-foundations/src/page-spacing';

.page-content {
  @include page-spacing.page-padding-inline('s4', 's6', 'full-bleed');
}

Usage in HTML

<!-- Has responsive inline padding -->
<div class="page-content">
  Content here
</div>

<!-- Full-bleed: no inline padding -->
<div class="page-content no-inline-padding">
  Edge-to-edge content
</div>
Requires

Variables

default-top-exclusion-class

$default-top-exclusion-class: 'no-top-margin' !default;
Description

Default exclusion class name for opting out of top margin

Type

String

default-bottom-exclusion-class

$default-bottom-exclusion-class: 'no-bottom-margin' !default;
Description

Default exclusion class name for opting out of bottom margin

Type

String

default-inline-padding-exclusion-class

$default-inline-padding-exclusion-class: 'no-inline-padding' !default;
Description

Default exclusion class name for opting out of inline (horizontal) padding

Type

String