Layout

Layout provides the shared values and Sass utilities used when creating responsive page structures.

It includes a canonical breakpoint scale, generated CSS breakpoint tokens, the at() media-query mixin, responsive gutter mappings, and reusable container sizes.

These resources provide the available layout values without prescribing a particular page structure or grid.

Breakpoints

Breakpoints define the minimum viewport widths at which responsive styles can be applied.

The breakpoint scale contains five named sizes:

$breakpoints: (
  sm: 40rem,  // 640px
  md: 48rem,  // 768px
  lg: 64rem,  // 1024px
  xl: 80rem,  // 1280px
  2xl: 96rem, // 1536px
);

The names describe the order of the breakpoints. They do not refer to particular device types.

Use a breakpoint when the layout needs to change, not simply because another breakpoint is available.

A layout does not need to use every breakpoint in the scale.

Sass breakpoint mixin

The Sass breakpoint map is the source of truth for responsive breakpoint values.

Use the at() mixin to apply styles from a named breakpoint upward:

@mixin at($bp) {
  @media (min-width: map.get($breakpoints, $bp)) {
    @content;
  }
}

Pass one of the names defined in $breakpoints:

.example {
  @include at(md) {
    /* Styles applied from 48rem upward */
  }
}

The styles outside the mixin apply by default. Styles inside the mixin apply when the viewport reaches the selected minimum width.

Prefer the named mixin for recurring responsive thresholds rather than repeating the corresponding width throughout Sass stylesheets.

An explicit media query can still be appropriate when a layout has a one-off threshold that does not belong in the shared breakpoint scale.

CSS breakpoint tokens

CSS custom properties are generated from the same Sass breakpoint map:

:root {
  @each $name, $value in $breakpoints {
    --breakpoint-#{$name}: #{$value};
  }
}

This produces:

--breakpoint-sm: 40rem;
--breakpoint-md: 48rem;
--breakpoint-lg: 64rem;
--breakpoint-xl: 80rem;
--breakpoint-2xl: 96rem;

Generating these tokens from $breakpoints prevents the CSS and Sass values from drifting apart.

CSS custom properties cannot be used as the condition of a standard media query:

/* Does not work */
@media (min-width: var(--breakpoint-lg)) {
  /* ... */
}

Use the Sass breakpoint map and at() mixin for media queries.

The CSS tokens remain useful when the numeric value of a breakpoint is needed elsewhere in CSS.

Do not use a breakpoint token as a general element width when a container token represents the intended role more accurately.

Gutters

Gutter tokens provide named spacing values for page layouts.

The individual gutter values are defined by the Spacing foundation:

--gutter-xs
--gutter-s
--gutter-m
--gutter-l
--gutter-xl
--gutter-2xl

Layout maps gutter tokens to responsive breakpoint ranges:

$gutters: (
  base: var(--gutter-xs),
  sm: var(--gutter-s),
  md: var(--gutter-m),
  lg: var(--gutter-l),
  xl: var(--gutter-xl)
);

The map provides:

• --gutter-xs before the sm breakpoint
• --gutter-s from sm
• --gutter-m from md
• --gutter-l from lg
• --gutter-xl from xl

--gutter-2xl remains available when a layout requires the largest gutter explicitly, but it is not assigned to a breakpoint by the default map.

The Spacing foundation owns the gutter values. Layout defines how those values relate to responsive ranges.

This foundation does not define a page-container class or prescribe how every layout must apply its gutters.

Container sizes

Container tokens provide a shared scale of named element widths.

:root {
  --container-3xs: 16rem; // 256px
  --container-2xs: 18rem; // 288px
  --container-xs: 20rem;  // 320px
  --container-sm: 24rem;  // 384px
  --container-md: 28rem;  // 448px
  --container-lg: 32rem;  // 512px
  --container-xl: 36rem;  // 576px
  --container-2xl: 42rem; // 672px
  --container-3xl: 48rem; // 768px
  --container-4xl: 56rem; // 896px
  --container-5xl: 64rem; // 1024px
  --container-6xl: 72rem; // 1152px
  --container-7xl: 80rem; // 1280px
  --container-8xl: 96rem; // 1536px
}

Use the token that represents the width required by the content or layout:

.page {
  max-width: var(--container-8xl);
}

Container tokens describe element widths. Breakpoint tokens describe viewport thresholds.

The two scales can contain the same numeric value without representing the same concept:

--breakpoint-2xl: 96rem;
--container-8xl: 96rem;

--breakpoint-2xl means that a responsive change begins when the viewport reaches 96rem.

--container-8xl means that an element can use 96rem as a container width.

Use the token according to its semantic role rather than choosing one because its numeric value happens to match.

Breakpoints and container sizes

Breakpoints and containers are independent scales.

A breakpoint answers:

At what viewport width should the layout change?

A container token answers:

How wide should this element or content region be?

For example:

.page {
  max-width: var(--container-8xl);

  @include at(lg) {
    grid-template-columns: 18rem minmax(0, 1fr);
  }
}

The lg breakpoint controls when the layout changes. The 8xl container controls how wide the page can become.

Matching values or similar names do not create a relationship between the two scales.

Prefer container tokens for width, max-width, grid track sizing, and similar element-size decisions. Use breakpoint names for responsive thresholds.