Menu

Leading-Trim: The Future of Digital Typesetting

August 21st, 2020

leading-trim is a suggested new CSS property that lets us remove the extra spacing in every font so that we can more predictably style text. Ethan Wang has written about it — including how Microsoft has advocated for it — and that it’s now part of the Inline Layout Module Level 3 spec. You’d use…

Stacked Cards with Sticky Positioning and a Dash of Sass

August 13th, 2020

The other day, I spotted this particularly lovely bit from Corey Ginnivan’s website were a collection of cards stack on top of one another as you scroll. I started wondering how much JavaScript this would involve and how you’d go about making it when I realized — ah! — this must be the work of…

The Best Design System Tool is Slack

June 3rd, 2020

There are a series of questions I have struggled with for as long as I can remember. The questions have to do with how design systems work: Where should we document things? Do we make a separate app? Do we use a third-party tool to document our components? How should that tie into Figma or…

How to Make a CSS-Only Carousel

April 24th, 2020

We mentioned a way to make a CSS-only carousel in a recent issue of the newsletter and I thought that a more detailed write up would be interesting and capture some of my thoughts on making one. So, here’s what we’re making today: There’s no JavaScript here, whatsoever! No jQuery plugins. No trickiness. Just a…

Dark mode and variable fonts

April 23rd, 2020

Not so long ago, we wrote about dark mode in CSS and I’ve been thinking about how white text on a black background is pretty much always harder to read than black text on a white background. After thinking about this for a while, I realized that we can fix that problem by making the…

Pseudo-Randomly Adding Illustrations with CSS

April 17th, 2020

Between each post of Eric Meyer’s blog there’s this rather lovely illustration that can randomly be one of these five options: Eric made each illustration into a separate background image then switches out that image with the nth-of-type CSS property, like this: .entry:nth-of-type(2n+1)::before { background-image: url(image-1.png); } .entry:nth-of-type(3n+1)::before { background-image: url(image-2.png); } .entry:nth-of-type(4n+1)::before { background-image:…

Thinking in Behaviors, Not Screen Sizes

April 10th, 2020

Chase McCoy wrote a nifty post about the “gap problem” when making a grid of items. His argument might be summarized like this: how should we space elements with margins in CSS? He notes that the gap property isn’t quite ready for prime time when it comes to using it with flexbox, like this: .grid…

How to build a bad design system

March 31st, 2020

I didn’t realize this until it was far too late, but one of the biggest mistakes that are made on a design systems team is a common mismanagement issue: there are too many people in a meeting and they have too many dang opinions. Is there a conversation about the color of your buttons that’s…