Responsive

Overview

• The scale is Bootstrap 5’s. 576 / 768 / 992 / 1200 / 1400 px. We add no custom cuts and remove none.
• Three design tiers, not five. Designers plan three layouts — Mobile, Tablet, Desktop. The xs/sm split and xl/xxl steps are refinements (tight-phone tweaks, container width), never separate layouts.
• Markup first. Column behaviour belongs in Bootstrap grid classes (col-12 col-md-6 col-lg-4). Component CSS only handles what the grid can’t: structural reflows, density changes, repositioning.
• Intrinsic before breakpoints. Prefer repeat(auto-fit, minmax()), flex-wrap, and clamp() — half the system’s components (badge, alert, modal, forms…) need no width media query because their layout is intrinsic or grid-driven. That is the goal state, not a gap.
• Tokens can’t enter media queries (a CSS limitation), so the canonical values live here and as a reference block in tokens.css.

Breakpoint Standard

The .98px convention

Max-width queries always subtract .02px from the next breakpoint (575.98 / 767.98 / 991.98) — Bootstrap’s own convention. A max-width: 992px query and a min-width: 992px query are both true at exactly 992 px and double-fire; the .98 form makes that impossible.

Design Tiers

Every page and component is designed at three widths. Hand off three artboards — 375 px (Mobile), 834 px (Tablet), 1440 px (Desktop) — and rely on the rules below for everything in between.

Mobile / Tablet / Desktop Plan

Mobile (< 768 px) — linearize and compress

• Everything single-column; source order is reading order (the grid never reorders content except order utilities used deliberately, e.g. feature-hero preview moves above text).
• Section padding compresses one spacing step (64→48, 96→64, 48→32 px) — layout.css does this automatically.
• Display headings step down (3.5→2.5 rem); body sizes never change.
• Buttons may go full-width via .caat-button--full-mobile; pagination switches to the compact wrapper; breadcrumbs scroll horizontally rather than wrap.
• Tables use .caat-table--stacked (label/value rows) or live in a scroll container — never shrink type to fit.
• Stat strips, footer columns, video rows, download rows: stack vertically.

Tablet (768–991.98 px) — two columns, still collapsed nav

• Grids move to two columns (col-md-6); footer link columns go 2-up; logo wall at mid density.
• Navigation is still collapsed — the full bar with mega menu needs ≥ 992 px. Don’t design tablet layouts that assume visible top-level links.
• Hero remains stacked; side-by-side media layouts (feature-hero) come back at this tier.
• Full section rhythm (64 px) resumes at 768 px.

Desktop (≥ 992 px) — full layout

• The lg cut is the system’s one “big switch”: full navigation bar, mega menu (full-width dropdown via static positioning), hero card becomes an absolute overlay, article sidebar appears, 3–4 column grids.
• xl / xxl change only the container max-width (1140 / 1320 px). If a design needs a layout change above 992 px, question the design before adding a query.

Authoring Rules

Component CSS may use only these five query shapes:

@media (max-width: 575.98px)  { /* narrow-mobile refinement      */ }
@media (max-width: 767.98px)  { /* mobile (below tablet)         */ }
@media (max-width: 991.98px)  { /* mobile + tablet (below desktop) */ }
@media (min-width: 992px)     { /* desktop-only enhancement      */ }
@media (min-width: 768px) and (max-width: 991.98px) { /* tablet-only */ }

• Do reach for intrinsic patterns first: repeat(auto-fit, minmax(16rem, 1fr)) (card grid), flex-wrap (CTA actions), clamp() (feature-hero title). No query needed, no tier to maintain.
• Do put column behaviour in markup with Bootstrap grid classes; the component stylesheet shouldn’t re-implement the grid.
• Do use the .98px form on every max-width query.
• Don’t invent off-scale cuts (no max-width: 640px, no 900px). If a component “needs” one, its base layout is wrong.
• Don’t hide content at a breakpoint that has no equivalent elsewhere (mega-menu promos are the only sanctioned example — they collapse to plain links).
• Don’t change behaviour with CSS alone — anything stateful across breakpoints (nav collapse) must keep its ARIA contract at every width.

Component State Matrix

What actually changes, per component, at each tier. Components not listed are intrinsic / grid-driven and render identically at every width. “—” = no change from the previous tier.

Navigation Across Breakpoints — Walkthrough

The navigation is the system’s most state-rich responsive component; use it as the reference pattern.

QA Checklist

• ☐ Page reviewed at 375, 576, 768, 834, 992, 1200 and 1440 px — and at each cut (991 px and 992 px both look intentional).
• ☐ Only the five sanctioned query shapes appear in component CSS; every max-width uses the .98px form.
• ☐ No horizontal scrollbar at any width ≥ 320 px (except sanctioned scroll patterns: breadcrumb, table scroll container).
• ☐ Nothing reachable on desktop is unreachable on mobile (mega-menu promos may simplify, never disappear as destinations).
• ☐ Touch targets ≥ 44×44 px below 992 px.
• ☐ Section rhythm compresses on mobile (via layout.css) — no template re-implements it.
• ☐ ARIA state (expanded/current/busy) behaves identically at every width.