responsive-design

Core Principles

• User-Led Design: Never make final design decisions (colors, layouts, themes) without explicit user direction or presenting options first.
• Container Queries First: Prioritize @container over @media for component-level responsiveness.
• Fluid Typography: Use clamp() and relative units (rem, em, cqi) for seamless scaling.
• Mobile-First: Build for the smallest screens first and enhance for larger displays.

Responsive Patterns

1. Fluid Typography

h1 {
  font-size: clamp(1.5rem, 5vw + 1rem, 3rem);
}