Mobile-First Approach
Mobile-first means writing base CSS for the smallest screen and progressively adding styles for larger ones using min-width media queries. This results in leaner CSS, faster mobile load times, and a design process that starts from constraints rather than retrofitting them later.
Breakpoints
Breakpoints are the pixel thresholds where layout shifts occur. Common systems (Tailwind, Bootstrap) use a standard scale — memorize these values and your designs will stay in sync with utility class names.
/* Mobile-first — base styles target the smallest screens */
.container { padding: 1rem; }
/* Tablet and up */
@media (min-width: 768px) {
.container { padding: 2rem; }
}
/* Desktop and up */
@media (min-width: 1024px) {
.container {
padding: 3rem;
max-width: 1200px;
margin-inline: auto;
}
}Fluid Typography
Fluid typography uses clamp() to smoothly scale font sizes between a minimum and maximum value based on viewport width. This eliminates abrupt jumps at breakpoints and gives every screen size an optimal reading experience.
/* clamp(min, preferred, max) — scales between breakpoints */
h1 { font-size: clamp(1.75rem, 5vw, 3rem); }
h2 { font-size: clamp(1.25rem, 3.5vw, 2rem); }
p { font-size: clamp(0.9rem, 2vw, 1.125rem); }
/* Fluid spacing — no breakpoints needed */
.section { padding-block: clamp(2rem, 6vw, 6rem); }
.gap { gap: clamp(1rem, 3vw, 2.5rem); }| Fixed Typography | Fluid Typography |
|---|---|
| Static px values, unchanged between breakpoints | Scales continuously with viewport width |
| Requires separate media queries to resize | Works without any media queries |
| Abrupt size jump at each breakpoint | Smooth, continuous transition across all sizes |
| Simple to implement and predict | More expressive, fewer override rules needed |
Layout Patterns
A handful of layout patterns cover most real-world UIs. Each maps directly to CSS Grid or Flexbox and can be combined to build complex, fully responsive pages.