Building a design token system
A very detailed and thorough overview of how to use design tokens to power a distributed design system and site architecture. The crux is ensuring design (Figma), code (CSS), and content management […]
Archives
Look mum, no breakpoints!
An excellent overview of how to approach fluid design on the web. Lots of excellent references and techniques, particularly those around using Flex layout with flex-basis to control widths, or […]
Why centring is so hard
Every web developer has torn their hair out trying to align an icon with some text, or two separate pieces of text with each other, or (god forbid) a whole sequence of text nodes, icons, form […]
A Ghost in the Machine
Or how I spent four days trying to debug a local Astro environment that refused to load any CSS.
Bidirectional text in HTML
Today's obscure HTML element: <bdi>. It stands for "bidirectional" and refers to text that can include both RTL and LTR languages (does not appear to care about other […]
The good, the bad, the web components
An excellent overview of the current state of web components, including suggestions on how they could be […]
Removing list styles without affecting semantics.
A simple tweak that simplifies the common approach to "lists that don't look like lists" with HTML/CSS and sidesteps any semantic/accessibility concerns. […]
What is utility-first CSS?
As acerbic and cutting a critique of utility-first CSS (and that particular framework) as you would expect from Heydon, but hidden amongst the humour are some (also equally expected) jewels […]
When to use <meter>
A solid example of where HTML semantics can be a little problematic: the <meter> element. Also a good overview of where/when this element is […]
Animated pride flags
If you ever wanted to make a cool, animated flag from scratch on the web, Josh has you covered. But the article is also full of clever tricks for animation in […]
One Neat CSS Trick
Using pseudo-selectors like :where and :not to invert style rules, allowing for better code encapsulation and context sharing across a codebase.
Time to rethink mobile-first CSS?
An interesting look at whether the current mobile-first paradigm is problematic. Ultimately, the title feels a little like click-bait; to me the solution proposed remains mobile-first, but suggests […]
Some use cases for display: contents
There have long been issues (mainly due to browser regressions) with using display: contents; in the wild, but there are still some potential use-cases for effectively removing non-semantic elements […]
HTML web components
An excellent look into the new trend of no-or-low-JavaScript web components, which almost operate more like HTML fragments, with graceful fallbacks to native elements. Jeremy proposes terming these […]
Re-evaluating px vs em in media queries
An overview of the state of media queries and accessible overrides (page zoom, text zoom, min/max font size settings etc.), seeking to determine which of em, rem, or px is the best option. Turns out […]
Specificity calculator
An extremely useful tool for comparing and visualising the specificity of a given CSS selector. […]
Classic rock, Mario Kart, and why we can't agree on Tailwind
Josh may have written the perfect article on Tailwind. As someone who has also spent quite a lot of time (both professionally and personally) working with Tailwind, I couldn't agree more, […]
Using CSS transitions on auto dimensions
A selection of possible workarounds for animating CSS values with auto keywords (e.g. height, width, etc.). Not a huge fan of the Flexbox option, but the max-height trick is a very useful one to […]