Responsive Strategy

Responsive strategy ensures interfaces adapt across devices — layouts should adapt to available space gracefully.

01 — Purpose

Adapt across devices and contexts

Responsive strategy ensures interfaces adapt across devices and contexts — layouts should adapt to available space gracefully.

Viewport breakpoints alone cannot describe every layout. Components sit inside sidebars, split panels, and cards that need to reflow at their own width — not only when the browser crosses 768px.

This site follows LSCSS architecture: shared styles in component partials first, then breakpoint rules only where something changes. Custom media queries live in the settings layer (src/styles/settings/media.css). See the CSS standard for layer order.

02 — Principles

Graceful adaptation

Responsiveness should support usability everywhere — without forcing one breakpoint ideology.

  • global-first base styles — common layout and typography in the component block; breakpoints add or override only what differs
  • flexible layouts — grid and flex with fluid gaps, not fixed pixel columns
  • container-aware components — see container queries
  • scalable typography — type tokens that adjust with breakpoint or container

03 — Practice

Good responsive strategy

Shared styles first; named media only for deltas — as LSCSS recommends.

  • define breakpoints once as custom media — --mobile, --from-tablet, --desktop — not magic numbers in every file
  • write the full component’s default rules first, then @media blocks for each range that needs a change
  • use --mobile for narrow-only overrides and --from-tablet / --desktop for wider enhancements — pick the query that matches the change, not a single “always min-width” habit
  • use relative units — rem, %, fr, clamp — over fixed widths where possible
  • test real devices — not only responsive mode on a large monitor
  • reserve space for images and embeds — responsive without CLS; see image delivery
  • align JS breakpoints with CSS — same px values in matchMedia as custom media definitions

Global-first, not mobile-first by default

“Mobile-first” often means min-width stacks where the narrow layout is the only base. That is one valid approach — not the only one. Here we prefer global-first: styles that apply everywhere sit in the component partial without a media query. When a viewport or context needs different behaviour, add a named @media block with only the properties that change — the same workflow described in LSCSS media query organisation. 

.site-header > .inner > .header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Wider: nav on its own row */
@media (--from-tablet) {
    .site-header > .inner > .header-bar > .menu-button {
        display: none;
    }

    .site-header .primary-nav {
        display: block;
    }
}

/* Narrow: sticky bar, menu button, drawer nav */
@media (--mobile) {
    .site-header {
        position: sticky;
        inset-block-start: 0;
    }

    .site-header > .inner > .header-bar > .menu-button {
        display: block;
    }

    .site-header .primary-nav {
        display: none;
    }
}

Token overrides follow the same idea — defaults on :root, then @media (--mobile) or @media (--desktop) in settings/responsive.css when spacing or gutters need to shift.

04 — Avoid

Responsive failures

Desktop-only assumptions show up as broken mobile flows in production.

  • repeating the entire component inside every breakpoint — restate only what changes
  • rigid breakpoints — three fixed layouts with awkward gaps between them
  • desktop-only assumptions — hover menus, tiny tap targets, horizontal scroll
  • viewport-only thinking — component breaks inside a narrow sidebar at desktop width
  • magic numbers per template — max-width: 1136px copied without tokens
  • hiding content on mobile instead of restructuring — see mobile navigation for intentional patterns

05 — Close

Usable at every width

Responsive is a strategy — not a single media query at the end of a sprint.

Keep shared rules global, layer breakpoint deltas on top, and let components respond to their container. Review key templates at 320px, 768px, and 1280px — then inside a narrow panel at desktop width.

See container queries, typography systems, and Core Web Vitals.