Responsive Craft

Content-First Breakpoints

Don't design for iPhone 14 Pro and MacBook Pro. Design for the content.

Process

1. Start with the narrowest viewport (320px)
2. Slowly widen the browser
3. When the layout starts looking bad, THAT is your breakpoint
4. Name breakpoints by behavior, not device: --layout-single, --layout-sidebar, --layout-full

Fluid Typography

clamp() Formula

/* Minimum size, preferred size (viewport-relative), maximum size */
font-size: clamp(1rem, 0.5rem + 2vw, 2rem);