Articles

Prevent squishy elements with flex none

You can prevent that annoying squished look that elements like icons get when space runs out in a flex context with flex: none.

CSS

Build a fancy hover animation

Learn how to use the power of CSS to take any collection of images and make them blend well together with a fancy interactive state.

CSS

Container Queries are actually coming

After years of asking and memes, we’re finally getting container queries and they will transform UI design, just like media queries did.

CSS

Use transparent borders and outlines to assist with high contrast mode

It’s tempting to use a sharp box shadow for focus styles to both remove the default focus ring and to get around sharp outline corners. With this method, you can create problems for Windows High Contrast users, so this quick tip will help you get the best of both worlds.

CSS

Disable client-side React with Next JS

Frameworks like Next JS output a lot of heavy-duty client side JavaScript, so this quick tip stops that to have a huge positive impact on performance.

React

Fluid typography with CSS clamp

Learn to create a simple, accessibility friendly and configurable fluid type system that uses modern CSS sizing functions.

CSS

Add inline SVG directly in your CSS

CSS

CSS Frameworks, hype and dogmatism

Some notes on the dogmatism and gatekeeping themes of Tech Twitter and how they can generate often incorrect and naive statements—specifically about frameworks and methodologies.

CSS

Add scroll margin to all elements which can be targeted

We can add an extra bit of space to targeted elements, thanks to modern CSS!

CSS

Control changing numbers with font variant numeric

Get the benefits of monospaced fonts with your favourite (supported) non-monospaced fonts.

CSS