Our Guide To

CSS Custom Properties

Otherwise known as CSS variables! CSS preprocessors invented them, and now native CSS has them, and they are extremely useful. Here's everything we have on them.

Using Custom Properties to Modify Components

Instead of using custom properties to style whole portions of a website’s interface I think we should use them to customize and modify tiny components. Here’s why. Whenever anyone mentions CSS custom properties they often talk about the ability to theme a website’s interface in one fell swoop. For example, if you’re working at somewhere […]

Building Skeleton Screens with CSS Custom Properties

Designing loading states on the web is often overlooked or dismissed as an afterthought. Performance is not only a developer’s responsibility, building an experience that works with slow connections can be a design challenge as well. While developers need to pay attention to things like minification and caching, designers have to think about how the […]

More CSS Charts, with Grid & Custom Properties

I loved Robin’s recent post, experimenting with CSS Grid for bar-charts. I’ve actually been using a similar approach on a client project, building a day-planner with CSS Grid. It’s a different use-case, but the same basic technique: using grid layouts to visualize data. (I recommend reading Robin’s article first, since I’m building on top of […]

CSS Environment Variables

We were all introduced to the env() function in CSS when all that drama about “The Notch” and the iPhone X was going down. The way that Apple landed on helping us move content away from those “unsafe” areas was to provide us essentially hard-coded variables to use: padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); Uh ok! […]

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag