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
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.
Transition to and from display:none with upcoming CSS capabilities
I've been playing with something pretty cool! This is an upcoming CSS capability, which is the ability to transition discrete properties. One of those would be transitioning to and from display:none.
Sponsored by Cloud Four
Thanks to Cloud Four for sponsoring this week’s newsletter! If you’d like to help with the costs of running Friday Front-End, you can back our Patreon for as little as a dollar a month.