responsive-patterns

# Responsive Patterns Modern responsive design patterns using Container Queries, fluid typography, and mobile-first strategies for React applications (2026 best practices). ## Overview - Building reusable components that adapt to their container - Implementing fluid typography that scales smoothly - Creating responsive layouts without media query overload - Building design system components for multiple contexts - Optimizing for variable container sizes (sidebars, modals, grids) ## Core Concepts ### Container Queries vs Media Queries | Feature | Media Queries | Container Queries | |---------|---------------|-------------------| | Responds to | Viewport size | Container size | | Component reuse | Context-dependent | Truly portable | | Browser support | Universal | Baseline 2023+ | | Use case | Page layouts | Component layouts | ## Modern CSS Layout > Load `Read("rules/css-subgrid.md")` for CSS Subgrid patterns: nested grid alignment, card layouts with aligned titles/content/actions, two-dimensional subgrid. > Load `Read("rules/css-intrinsic-responsive.md")` for intrinsically responsive layouts: auto-fit/minmax grids, clamp() for fluid everything, container queries for component logic, zero media query patterns. > Load `Read("rules/responsive-foldables.md")` for foldable/multi-screen device support: env(safe-area-inset-*), viewport segment queries, dual-screen layouts, progressive enhancement. **Key patterns covered:** CSS Subgrid alignment, intrinsic responsive grids (auto-fit + minmax), fluid clamp() scales, foldable device layouts, safe area insets, viewport segment queries. ## CSS Patterns > Load `Read("rules/css-patterns.md")` for complete CSS examples: container queries, cqi/cqb units, fluid typography with clamp(), mobile-first breakpoints, CSS Grid patterns, and scroll-queries. **Key patterns covered:** Container Query basics, Container Query Units (cqi/cqb), Fluid Typography with clamp(), Container-Based Fluid Typography, Mobile-First Breakpoints, CSS Grid Responsive Patterns, Container Scroll-Queries (Chrome 126+). ## React Patterns > Load `Read("rules/react-patterns.md")` for complete React examples: ResponsiveCard component, Tailwind container queries, useContainerQuery hook, and responsive images. **Key patterns covered:** Responsive Component with Container Queries, Tailwind CSS Container Queries, useContainerQuery Hook, Responsive Images Pattern. ## Accessibility Considerations ```css /* IMPORTANT: Always include rem in fluid typography */ /* This ensures user font preferences are respected */ /* ❌ WRONG: Viewport-only ignores user preferences */ font-size: 5vw; /* ✅ CORRECT: Include rem to respect user settings */ font-size: clamp(1rem, 0.5rem + 2vw, 2rem); /* User zooming must still work */ @media (min-width: 768px) { /* Use em/rem, not px, for breakpoints in ideal world */ /* (browsers still use px, but consider user zoom) */ } ``` ## Anti-Patterns (FORBIDDEN) ```css /* ❌ NEVER: Use only viewport units for text */ .title { font-size: 5vw; /* Ignores user font preferences! */ } /* ❌ NEVER: Use cqw/cqh (use cqi/cqb instead) */ .card { padding: 5cqw; /* cqw = container width, not logical */ } /* ✅ CORRECT: Use logical units */ .card { padding: 5cqi; /* Container inline = logical direction */ } /* ❌ NEVER: Container queries without container-type */ @container (min-width: 400px) { /* Won't work without container-type on parent! */ } /* ❌ NEVER: Desktop-first media queries */ .element { display: grid; grid-template-columns: repeat(4, 1fr); } @media (max-width: 768px) { .element { grid-template-columns: 1fr; /* Overriding = more CSS */ } } /* ❌ NEVER: Fixed pixel breakpoints for text */ @media (min-width: 768px) { body { font-size: 18px; } /* Use rem! */ } /* ❌ NEVER: Over-nesting container queries */ @container a { @container b { @container c { /* Too complex, reconsider architecture */ } } } ``` ## Browser Support | Feature | Chrome | Safari | Firefox | Edge | |---------|--------|--------|---------|------| | Container Size Queries | 105+ | 16+ | 110+ | 105+ | | Container Style Queries | 111+ | ❌ | ❌ | 111+ | | Container Scroll-State | 126+ | ❌ | ❌ | 126+ | | cqi/cqb units | 105+ | 16+ | 110+ | 105+ | | clamp() | 79+ | 13.1+ | 75+ | 79+ | | Subgrid | 117+ | 16+ | 71+ | 117+ | ## Rules Each category has individual rule files in `rules/` loaded on-demand: | Category | Rule | Impact | Key Pattern | |----------|------|--------|-------------| | Modern CSS Layout | `rules/css-subgrid.md` | HIGH | CSS Subgrid for nested grid alignment, card layouts | | Modern CSS Layout | `rules/css-intrinsic-responsive.md` | HIGH | Intrinsic responsive layouts, auto-fit/minmax, clamp(), zero breakpoints | | Modern CSS Layout | `rules/responsive-foldables.md` | MEDIUM | Foldable devices, safe area insets, viewport segments | | CSS | `rules/css-patterns.md` | HIGH | Container queries, cqi/cqb, fluid typography, grid, scroll-queries | | React | `rules/react-patterns.md` | HIGH | Container query components, Tailwind, useContainerQuery, responsive images | | PWA | `rules/pwa-service-worker.md` | HIGH | Workbox caching strategies, VitePWA, update management | | PWA | `rules/pwa-offline.md` | HIGH | Offline hooks, background sync, install prompts | | Animation | `rules/animation-motion.md` | HIGH | Motion presets, AnimatePresence, View Transitions | | Animation | `rules/animation-scroll.md` | MEDIUM | CSS scroll-driven animations, parallax, progressive enhancement | | Touch & Mobile | `rules/touch-interaction.md` | HIGH | Touch targets (44px min), thumb zones, pinch-to-zoom, safe areas, gestures | **Total: 10 rules across 6 categories** ## Key Decisions | Decision | Option A | Option B | Recommendation | |----------|----------|----------|----------------| | Query type | Media queries | Container queries | **Container** for components, **Media** for layout | | Container units | cqw/cqh | cqi/cqb | **cqi/cqb** (logical, i18n-ready) | | Fluid type base | vw only | rem + vw | **rem + vw** (accessibility) | | Mobile-first | Yes | Desktop-first | **Mobile-first** (less CSS, progressive) | | Grid pattern | auto-fit | auto-fill | **auto-fit** for cards, **auto-fill** for icons | ## Related Skills - `design-system-starter` - Building responsive design systems - `ork:performance` - CLS, responsive images, and image optimization - `ork:i18n-date-patterns` - RTL/LTR responsive considerations ## Capability Details ### container-queries **Keywords**: @container, container-type, inline-size, container-name **Solves**: Component-level responsive design ### fluid-typography **Keywords**: clamp(), fluid, vw, rem, scale, typography **Solves**: Smooth font scaling without breakpoints ### responsive-images **Keywords**: srcset, sizes, picture, art direction **Solves**: Responsive images for different viewports ### mobile-first-strategy **Keywords**: min-width, mobile, progressive, breakpoints **Solves**: Efficient responsive CSS architecture ### grid-flexbox-patterns **Keywords**: auto-fit, auto-fill, subgrid, minmax **Solves**: Responsive grid and flexbox layouts ### container-units **Keywords**: cqi, cqb, container width, container height **Solves**: Sizing relative to container dimensions ## References Load on demand with `Read("references/<file>")`: | File | Content | |------|---------| | `container-queries.md` | Container query patterns | | `fluid-typography.md` | Accessible fluid type scales |