Rebuilding a featured news section with modern CSS: Vox news

In this article, I will rethink how to build the featured news section on Vox.com and try to see if modern CSS will be helpful or not. For example, do we need to use container queries? Or fluid sizing? That’s the goal of this article. It’s a journey as I think aloud about building a layout that seems simple.

Spinning 3D Diagrams with CSS

I wrote a little math thing last year, which featured spinning 3D equations. Several people expressed surprise that the spinning diagrams don’t use any JavaScript or animated image formats, just HTML and CSS. So I thought I’d explain how they work before I forget.

Scoped CSS is back

If you’ve developed large-scale apps and had to rely on CSS-in-JS libraries to prevent class name collisions, I hope you can see the benefit this offers. If you’ve rolled out complex BEM class name systems and fought to keep all your selector specificities equal, think of the freedom this can bring. If you’ve ever used the shadow DOM to isolate styles but it was too heavy-handed, this is a better way.

Recreating the title effect from Creative South

I am just so impressed with the design of the website for Creative South ‘23 . What a gorgeous site! One neat detail is the mouse-aware “3D” effect on the title text. I decided to see if I could recreate it.

CSS Grid Gap Behavior with Hidden Elements

I was recently prototyping a component layout that included a way to toggle the visibility of sibling elements inside a grid display. What tripped me up was, while these elements were hidden, all of the container's gap gutters remained, leaving undesired extra visual spacing. I expected these gutters to collapse. The reason they stick around is related to explicitly defining grid templates.