Why my fixed mobile menu was 81px tall: backdrop-filter and containing blocks
The mobile menu on this site opened as an 81px strip. The cause was a frosted-glass header, and a CSS rule most of us never think about.
Category: Frontend
Notes on HTML, CSS, JavaScript, responsive layouts and accessible interfaces.
Design tokens in plain CSS: a small system that scales
You don't need a token pipeline to get the benefits of design tokens. Two layers of CSS custom properties cover most sites.
Dark mode with CSS custom properties and no flash on load
Dark mode is mostly a token problem. Swap a few CSS custom properties, respect the system setting, and stop the white flash before the first paint.
Debugging cross-browser layout bugs without guesswork
When a layout breaks in one browser only, a calm, repeatable process beats trial and error. Here is mine.
A practical accessibility checklist for every frontend build
Accessibility is easier to build in than to retrofit. These are the checks I run on every page before calling it done.
Mobile-first CSS that stays maintainable
Mobile-first is more than a media query direction. A few habits that keep responsive stylesheets small and predictable.
From Figma to code: how I approach a new design handoff
Before writing any markup, I read the design as a system. Here is the order I work in when a new Figma file lands.