#38 - Everything on CSS Variables

Hey folks,

Here are a few things I thought were worth sharing this week.

CSS Variables #

CSS Variables are getting a lot of attention right now and for good reason. Unlike variables from CSS preprocessors, CSS variables don’t require transpiling and have direct access to the DOM. That means you can do a ton of cool stuff like access them with Javascript.

The best resources I’ve found on the subject are CSS Variables in 5 minutes and Learn CSS Variables for free both from Per Harald Borgen.

For more practical applications definitely checkout Ohans Emmanuel’s Everything you need to know about CSS variables, taken from his CSS Variables eBook.

If you’re interesting in how you can apply this stuff to building design systems then I highly recommend checking out Jonathan Harrell’s HiQ CSS framework which is built from the ground up with CSS variables. This article on his website is also worth reading.

Layout Land #

I’m really digging Layout Land, the new youtube channel from Mozilla Designer and Developer Jenn Simmons. Jenn’s made a bunch of creative layouts using CSS Grid and in this recent one talks about how grid will help us use whitespace on the web. In the video Jenn mentions The Vignelli Canon, a free book by famous Italian designer Massimo Vignelli.

Big Goals vs Small Habits #

Big Goals vs Small Habits is a short read from my old friend Atticus Harris on his experience of writing for 99 days in a row.

Building Profitable Startups #

Earlier in the week Luke introduced me to the work of Pieter Levels, who has a wining formula for building startups which make money. His talk Turning side projects into profitable startups is well worth watching when you get the chance.

IBM Carbon Design System #

IBM Carbon: Mari Johannessen and Bethany Schwanke on the RWD podcast talking about how IBM created its Carbon design system.

Reply by email

Monthly Newsletter

Once a month I curate a newletter for designers and developers interested in static sites, CSS and web performance. Check out past issues to get an idea.