responsive-design_skill

Overview

This skill teaches mobile-first responsive design focusing on fluid layouts, media queries, Flexbox, Grid, viewport units, and responsive images. It distills practical patterns, code snippets, and strategies to build interfaces that adapt smoothly from small phones to large desktops. Use it to create performant, accessible, and touch-friendly layouts with modern CSS features.

How this skill works

The skill explains a mobile-first workflow: write base styles for small screens, then progressively enhance with media queries or container queries. It covers one-dimensional layouts with Flexbox, two-dimensional layouts with Grid, and fluid sizing with clamp(), min(), max(), and viewport units. It also shows responsive image techniques (srcset, picture), art direction, and performance optimizations like critical CSS and lazy loading.

When to use it

• Building interfaces that must work across phones, tablets, and desktops
• Creating fluid grids, card systems, dashboards, galleries, and forms
• Optimizing images and media for varied screen sizes and DPRs
• Implementing accessible, touch-friendly navigation and controls
• Replacing brittle breakpoint-based layouts with content-driven queries

Best practices

• Start mobile-first: keep base CSS minimal and progressive enhance with min-width queries
• Choose breakpoints based on content wrapping, not device names
• Prefer fluid units (%, vw, clamp) and minmax() or auto-fit/auto-fill for grids
• Use srcset/picture for responsive images and lazy loading for offscreen assets
• Detect interaction capabilities (hover/pointer) and prefers-reduced-motion for accessible UX
• Use container queries for component-based responsiveness when supported

Example use cases

• Responsive product gallery that shifts from single-column on mobile to multi-column on desktop using auto-fit and minmax
• Navigation that becomes a stacked, touch-friendly menu on small screens and a horizontal bar on larger viewports using Flexbox
• Dashboard layout using CSS Grid with named areas that rearrange at tablet and desktop breakpoints
• Art-directed hero images delivered via picture and srcset for better performance and composition
• Cards that switch from column to row orientation via container queries when placed inside wider containers