Spacing grid/flexbox items in CSS with the gap property

The gap property for Flexbox about to land in Chromium 85. It allows you to define the size of the gutters between Grid/Flexbox children. CSS Grid brought a delightful spacing feature called grid-gap, which quickly became a popular way to put space into layouts. It was easy to fall in love with because it took […]

Use Tailwind classes within any CSS-in-JS library with Twin

To use Tailwind – or any prebuilt CSS library/framework for that matter – in a React app you can simply import its generated CSS file and use the classes it exposes: import ‘../tailwind.generated.css’; // … const Alert = ({ title = '', message }) => ( <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" […]

Rebuilding our tech stack for the new Facebook.com

The Facebook Engineering Team on how they’ve built the new Facebook.com – a version which I’ve been able to try for nearly two months by now. Throughout the process, we anchored our work around two technical mantras: As little as possible, as early as possible. We should deliver only the resources we need, and we […]

Alternative text for CSS generated content

Great find by Stefan Judis: Today I learned that the content property supports a way to define alternative text for generated content. You can specify the alternative content after a /: .new::before { content: url(./img/star.png) / "New!"; } Here’s how that works with screen readers: .new-item::before { /* "black star" and element content is read […]

Everything I Learned About min(), max(), clamp() in CSS

Ahmad takes a look into the CSS min(), max(), and clamp() functions. As with all his articles, he also provides some practical use cases and examples. Regarding the clamping of the font-size of a page, you don’t really need clamp(): This is how to accessibly set a viewport relative scaling `font-size` with a min AND […]

CSS Grid Layout Module Level 2: Masonry Layout

A long requested CSS feature is to be able to create a “Masonry Layout” using pure CSS. Today we can already create a Masonry-like layout using grid-auto-flow: dense;, but unfortunately that’s not the real deal. 🤔 Masonry Layout? Masonry is a grid layout based on columns, as popularized by Pinterest. Unlike other grid layouts, it […]