Web Dev & Design
Working CSS and JavaScript, with the reasoning behind every choice, not just the snippet.
CSS & Layout
One line of grid that reflows from one column to many as space allows — no breakpoints to maintain.
CSS & Layout
The old wall — you can't transition to height: auto. A one-line grid-template-rows trick gives you a smooth open/close to natural height, no script.
JavaScript & Motion
Fade and slide elements in as they scroll into view with IntersectionObserver — reveal-once, off the main thread, and with a prefers-reduced-motion fallback. HTML, CSS, and JS.
Each example here is a working piece of CSS or JavaScript with the reasoning behind the choices, not just a snippet. You can copy the code, see it run, and understand why it is written that way.
They suit developers and site owners who want modern, dependency-free techniques: animated panels, responsive grids, and scroll effects that stay fast. Pair them with our free developer tools and tips and tricks.
Related: Resources · Blog · Web design services