Search

Josh breaks down why and how you can use CSS variables more easily in React, specifically using styled-components. Honestly it feels a little terrifying how much is needed just to get basic …

I keep running into the same problem: how to set a style attribute in the CMS and have that be dynamically rendered on the front-end, without relying on inline styles. Turns out it's a great use case for CSS variables!

CSS variables (aka CSS custom properties) do not have access to the cascade. That means they can't fall back to earlier rules, so if your variable is invalid, the browser will simply unset …

I'm always interested to see how other people utilise styled-components and the tips Josh shares offer exactly that kind of insight. I fundamentally disagree with his take on descendent selectors …

I've always thought the utility of Tailwind was promising, but it bugged me that the way it worked was so counter to both best practices and the web stack's architecture. Well, introducing …

Max has a pretty brilliant colour theme switcher on his website. I agree with him that "dark mode" is only the tip of the iceberg and with CSS variables we can now theme sites very easily. There are …

Heydon's video is an excellent overview of their much-loved owl selector and "stack" layout pattern. I actually didn't realise that Heydon was the original "inventor" of the owl, though it makes a …

A lovely overview of much of the new CSS that has landed (or is landing) in browsers recently, and how that relates to component-led …

Looks like CSS is getting extensibility built-in with a new @property element (works like @media – also looks like we're getting CSS.registerProperty() in JavaScript …

In which I begin by questioning why microformats are defined on the class attribute, instead of somewhere more bespoke, and end up concluding that I don't understand what microformats are actually for... and I'm not sure anyone else does, either.

Notes from the fully remote React Summit 2020 (or at least the talks I tuned in for). Lots covered, from static-site generators and the Jamstack through to React state management and accessibility. What a fun day!

Having hooked up Algolia with my Gatsby build pipeline and populated a search index from my Craft CMS API, the next step was the build a frontend UI to enable users to actually query my posts. It turned out to be a pretty simple process.

I think there's some real merit to Andy's ideas behind Cube CSS. It's a middle-ground between everything-in-JS or BEM that throw out the cascade entirely and the free-for-all that can happen if you …

Jeremy has been updating The Session to use variable font sizes with the new CSS clamp() property. He offers some interesting ideas on how best to do …

A simple and informative example of how the new CSS clamp property can be used to create fluid layouts (in this case, specifically a fluid type …

Styled Components have tripped me up a few times today, but I ended up learning some useful tricks as a result.

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 …