Masonry of images A 'perfect' row-based image masonry

TL;DR: Check out the Codepen. Also note that after publishing, I found that there are much nicer, stable solutions that preserve perfect aspect ratio if needed (see react-photo-gallery & Justified Gallery). I was on a hunt for a special type of masonry layout for an image gallery today. It needed to fulfill the following requirements: […]

Multiline truncated text with “show more” button (with just CSS)

TL;DR: I built a CSS-only (~ish) solution for multiline truncated text with read more button. The other day, truncated text came up during a discussion in the office, and I since wondered if CSS has come far enough to be able to do truncated text right, that is, supporting the following: Multiple lines “Show more” […]

Where to start if you want to become a web developer

Starting a career as web developer can be a daunting experience. I’ve just given a Q&A to students at a Korean university, and I figured that some of my answers might make for a neat cheatsheet on where to start if you’re new to the world wide web. None of this is new, and more […]

Block formatting contexts and lists

If you’ve been reading about the latest in CSS, you might have read about flow-root. Flow root establishes a new block formatting context, but most have dismissed it as simply replacing clearfix hacks. But consider this extremely common case, where you have a few paragraphs of text, some bullet points and a floating image: See […]

Flexbox freebie: Auto-growing list (for AMP Roadmap)

TL;DR: I did a thing with Flexbox. Here’s the standalone demo if you’re into DevTools and view:source, and the CodePen. A couple days ago I was asked to create a the a page for AMPProject.org that would display our roadmap. Which I did. It looks like this: In order to make this design fully responsive, […]

Essential CSS Layouting Resources

Forgot how to properly tame the CSS layout beast, you say? Or didn’t learn it in the first place? Worry not, since here’s a list of a couple of the best and easiest layout techniques. The present Missing something fundamental that should be part of this list? Let me know in the comments! 1. Fluid […]