CORE CONCEPT · COMPLETE IN 0.1

Responsive design

Build adaptive interfaces by applying utilities at named viewport thresholds. Coordiation uses a mobile-first model, emits static media queries, and supports exact ranges, arbitrary values, and project-owned breakpoint tokens.

✓

Responsive variants work with every supported utility and compose with state, context, attribute, conditional, important, and custom variants. No browser runtime or resize listener is generated.

DEFAULT BREAKPOINTS

Five named viewport thresholds

Each prefix applies from its minimum width upward. Pixel equivalents assume the browser default of 16px per rem and are shown only as a familiar reference.

Prefix and queryTypical role

sm: · width ≥ 40rem (640px)Small landscape phones and compact panels

md: · width ≥ 48rem (768px)Tablets and split layouts

lg: · width ≥ 64rem (1024px)Laptops and navigation-heavy layouts

xl: · width ≥ 80rem (1280px)Wide application shells

2xl: · width ≥ 96rem (1536px)Large desktop canvases

Breakpoints describe available space, not device brands.

Choose where the content needs to change. A tablet name or hardware model becomes stale; a layout constraint remains meaningful.

MOBILE-FIRST CASCADE

Start with the smallest useful layout

Unprefixed utilities apply at every width. Add prefixed utilities only when more space allows a meaningful enhancement.

BASE1 column

sm:2 columns

lg:3 columns

2xl:4 columns

component.coord

<section class="co-grid co-grid-cols-1 sm:co-grid-cols-2 lg:co-grid-cols-3 2xl:co-grid-cols-4">
  ...
</section>

Do not use sm: to mean “mobile.”

Use the unprefixed class for mobile. The sm: prefix begins at 40rem and overrides the base from that point upward.

LIVE VIEWPORT EXAMPLE

Identify the active breakpoint band

The dark tile reflects the current browser width. Resize the window to watch media queries move through the default scale.

BASE< 40rem

SM40–48rem

MD48–64rem

LG64–80rem

XL80–96rem

2XL≥ 96rem

VISUAL EXAMPLE · APPLICATION SHELL

Adapt structure, density, and columns together

This preview starts stacked, gains a sidebar and two columns at md, then widens its navigation and content density at lg.

01Responsive panel

02Responsive panel

03Responsive panel

component.coord

<div class="co-grid co-grid-cols-1 md:co-grid-cols-[10rem_1fr] lg:co-grid-cols-[14rem_1fr]">
  <aside>Navigation</aside>
  <main class="co-grid co-grid-cols-1 md:co-grid-cols-2 lg:co-grid-cols-3 co-gap-4 lg:co-gap-6">
    ...
  </main>
</div>

TARGETED RANGES

Limit a utility to one breakpoint interval

Stack a minimum prefix with max-*. The upper bound is exclusive, so md:max-xl: applies from 48rem until just before 80rem.

md · 48remxl · 80rem

ACTIVE RANGE · md:max-xl

component.coord

<div class="md:max-xl:co-grid md:max-xl:co-grid-cols-2">
  Active only from md up to xl
</div>

<aside class="co-block lg:co-hidden">
  Visible below lg
</aside>

ONE-OFF THRESHOLDS

Use arbitrary minimum and maximum widths sparingly

Bracket syntax handles a genuine one-off constraint. Keep units consistent so media queries remain ordered and understandable.

component.coord

<section class="min-[42rem]:co-grid min-[42rem]:co-grid-cols-2">
  Starts at 42rem
</section>

<nav class="max-[68rem]:co-hidden">
  Hidden below 68rem
</nav>

Promotion rule

If 42rem appears in multiple components, promote it to a named --co-breakpoint-* token instead of repeating arbitrary values.

PROJECT-OWNED SCALE

Add a semantic breakpoint through the theme

Breakpoint variables automatically become responsive prefixes. Names should describe stable layout roles rather than a temporary page or device.

app.css

@co-theme {
  --co-breakpoint-tablet: 52rem;
  --co-breakpoint-workspace: 72rem;
}

@coordiation;

component.coord

<main class="co-block tablet:co-grid workspace:co-grid-cols-[18rem_1fr]">
  ...
</main>

INTERACTIVE EXAMPLE · COMPOSITION

Combine breakpoints with state and context

On a hover-capable viewport at least 48rem wide, hover this card. Prefixes compose from left to right and all conditions must match.

component.coord

<article class="co-bg-white md:hover:co-bg-black md:hover:co-text-white dark:md:co-border-neutral-700 motion-reduce:co-transition-none">
  ...
</article>

CHOOSE THE RIGHT CONDITION

Viewport breakpoint or container query?

Both use the same breakpoint tokens, but they answer different layout questions.

UseWhen the design depends on

md:co-*The browser viewport or overall application shell.

@md/sidebar:co-*The space allocated to a reusable component inside a named ancestor.

Learn container query syntax in Conditional Variants →

AI GENERATION CONTRACT

Generate responsive code that remains traceable

An agent should choose breakpoints from content constraints and emit complete literal candidates that the scanner can verify.

Start with an unprefixed usable layout; treat named breakpoints as progressive enhancements.
Use the smallest named breakpoint that solves the observed content constraint.
Keep full class names literal—never construct prefixes through runtime interpolation.
Prefer theme breakpoint tokens over repeated arbitrary widths.
Use container queries when a component depends on local space rather than viewport size.
Verify range ordering and report rejected candidates instead of guessing replacements.

Previous← Modern color NextAttribute selectors →