Uppercasing is common in designs on the web you’ll often see it in navigation, on buttons and in headings or subheadings. I was recently changing the text in a navbar from uppercase to lowercase and I came across the situation where, instead of relying on the CSS, the last editor…

CSS Grid isn’t just for creating flat, 2D layouts — we can make the most of the CSS grid and combine it with other CSS properties to do a lot of amazing things, like 3D layouts (and also some great shapes too). If you just want to play with the…

This is a story of setting up Playroom in my component library may it help you through some of the bumps (specifically the ones I hit) along the way. Spoiler alert, I did get it running. 😄 First things first, the basic setup was pretty much as the Getting Started…

One of the things I love about CSS is how easy it is to change things at different breakpoints. Maybe you want to drop text, images, or even change the layout. You might do this for a number of reasons, maybe it’s to simplify a design on a smaller screen…

When we think about web fonts and their impact on the performance on our websites we often focus on three main areas: The number of font requests Font file size Time to first render I wanted to see how variable fonts faired in these situations and did a review comparing…

Adjust the width of your text to fit its parent container using a variable font width axis — One of the most exciting things for me about variable fonts is that their flexibility opens up an opportunity to create more responsive designs and components. There are a number of ways you can have text resize to fit its parent container, but it’s been largely limited to adjusting the…

When working in teams with mixed skills one of the biggest technical challenges I’ve faced is managing the changes to how things render visually across a codebase. Often you change something and it causes unintended problems somewhere else. This is where Automated Visual Testing has become invaluable. What is Automated Visual Testing Automated Visual Testing…

When it comes to building flexible responsive layouts we’ve relied on media queries for quite some time, but did you know that you may not actually need them? A quick tip Using CSS grid we can create a list of cards that automatically fit and resize to the available space with just three…

Over the holiday period we did some experimentation to remove the blocky cards on our website and replace it with a solid background. As a result we needed dividers to separate the articles on the page (otherwise they all ran into each other — it was bad). The TL;DR is…