Layout, motion, accessibility, and modern CSS techniques.
Layout, motion, typography, and accessibility from a working developer's angle — patterns you can paste into production, not abstract theory.
Articles link to live CSS tools on codefunc so you can try clamp values, contrast ratios, and animation timing in the browser.
Topics covered
Choose transitions vs @keyframes, pick units that scale, and build reusable motion snippets — with performance and accessibility rules that keep UI snappy.
Build practical gradient and shadow design tokens, pick easing curves that feel right, and avoid paint-heavy effects that tank scroll performance.
A practical guide to Vanilla Extract — type-safe styles at build time, theming with CSS variables, recipes and sprinkles, and when to pick it over Tailwind or CSS Modules.
A practical guide to modern CSS layout — flexbox for one-dimensional alignment, grid for two-dimensional structure, and patterns for combining them in production components.
Master the clamp() function for responsive font sizes, gutters, and component dimensions — with formulas, real examples, and common mistakes that break layouts.
A practical a11y guide to color contrast ratios, WCAG 2.2 success criteria, and a step-by-step workflow for auditing text, icons, and interactive states.
Find a developer tool