Content filed under “CSS”
Subscribe with RSS
For the many folks who ask how I write CSS since removing Sass, this is how I and the Set Studio team do it in 2024.
After the success of previous years, it’s great to see Interop is back in 2024. In this post, I note down what I’m looking forward to.
My all-time favourite CSS technique — courtesy of Paul Irish — celebrates another birthday.
Learn how build a highly configurable switch component using modern CSS, such as :has(), container queries, Logical Properties and Custom Properties.
In this edition of Reality Check, I tackle an interesting grid layout that also features some pretty unique background image treatment.
I wrote “A Modern CSS Reset” almost 4 years ago and, yeh, it’s not aged overly well. I spotted it being linked up again a few days ago and thought it’s probably a good idea to publish an updated version.
You can set a different delay for each transitioned property, using the transition shorthand, which creates some pretty cool state changes.
You can prevent that annoying squished look that elements like icons get when space runs out in a flex context with flex: none.
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.
After years of asking and memes, we’re finally getting container queries and they will transform UI design, just like media queries did.
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.
Learn to create a simple, accessibility friendly and configurable fluid type system that uses modern CSS sizing functions.
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.
We can add an extra bit of space to targeted elements, thanks to modern CSS!
Get the benefits of monospaced fonts with your favourite (supported) non-monospaced fonts.
A handy way to use modern CSS functions to give yourself fine-grained, yet flexible, design control.
In this premium tutorial, we’re going to build a burger menu from the ground up, using progressive enhancement, ResizeObserver, Proxy state and of course, super-solid HTML and CSS that pull from the CUBE CSS principles.
Design tokens are just spicy variables, right? Wrong! They are an extremely versatile way of sharing design properties and in this tutorial, you’ll learn how they work.
Using the power of modern CSS layout, we create a flexible media browser and video player layout that maintains its aspect ratio at all viewports.
An in-depth guide to going from HTML all the way to a full styled banking dashboard, using the CUBE CSS methodology
A CSS methodology oriented towards simplicity and consistency with a heavy dosage of pragmatism.
Create spacing that works regardless of the direction of your content or the environment of your users.
Break out of the mould of your fixed-width container to create visual interest.
Even with no media-queries, we can create a flexible and powerful responsive layout.
Automatic dark and light themes, based on system user-preferences, are handy but in this tutorial, we take that one step further and give our users control.
Responsive units, like EM units, are super powerful and in this tutorial, you’ll learn how to use that power to give your front-ends resilience