Responsive design

Responsive layout utilities using fluid typography, fluid spacing, and centralized container style queries.

Zazz handles responsive design through fluid type/spacing scaling and container style query prefixes.

Fluid sizing

Typography: text-* classes use clamp() functions that scale with viewport width.
Spacing: Spacing utilities derive from fluid interval tokens, reducing spacing on small viewports and expanding on desktop.

Responsive prefixes

Prefix layout utilities with @xs:, @sm:, @md:, @lg:, or @xl:. These apply style queries against centralized page breakpoint flags published by the body container:

<div class="grid grid-cols-1 @md:grid-cols-3 gap-md">
  <article class="bg-card rounded-md p-md">...</article>
  <article class="bg-card rounded-md p-md">...</article>
  <article class="bg-card rounded-md p-md">...</article>
</div>

Breakpoints activate at or above the given threshold:

Prefix	Threshold	Token
`@xs:`	>= 40rem	`--breakpoint-xs`
`@sm:`	>= 48rem	`--breakpoint-sm`
`@md:`	>= 64rem	`--breakpoint-md`
`@lg:`	>= 80rem	`--breakpoint-lg`
`@xl:`	>= 96rem	`--breakpoint-xl`

Mobile-first authoring

Apply base utilities for the narrowest view, then add prefixed overrides for wider viewports:

<!-- stacked on mobile, row layout from md up -->
<div class="flex flex-col @md:flex-row gap-md">...</div>

Supported responsive families include container, display, grid-cols, grid-rows, flex-direction, text-align, align-items, justify-content, col-span, row-span, basis, table-layout, and caption-side.

Breakpoint-free responsive layouts

Auto-fit grids: Combine grid-flow-row with grid-cols-N (where N > 1) for automatic column wrapping based on available width.
Gap-aware basis: basis-1/2, basis-1/3, etc. automatically subtract gap values for wrapping flex rows.

<div class="grid grid-flow-row grid-cols-3 gap-md">...</div>

Browser support

Zazz responsive utilities use container style queries. Supported in modern Chrome, Safari, and Firefox. Unsupported browsers fall back to the base layout.