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("${CLAUDE_SKILL_DIR}/rules/css-subgrid.md") for CSS Subgrid patterns: nested grid alignment, card layouts with aligned titles/content/actions, two-dimensional subgrid. Load Read("${CLAUDE_SKILL_DIR}/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("${CLAUDE_SKILL_DIR}/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("${CLAUDE_SKILL_DIR}/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("${CLAUDE_SKILL_DIR}/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 / 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) / ❌ 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("${CLAUDE_SKILL_DIR}/references/"): File Content container-queries.md Container query patterns fluid-typography.md Accessible fluid type scales Weekly Installs190Repositoryyonatangross/orchestkitGitHub Stars122First SeenJan 22, 2026Security AuditsGen Agent Trust HubPassSocketPassSnykPassInstalled onopencode173gemini-cli166codex166cursor162github-copilot157kimi-cli143