Skyscraper x IconFactory, the golden age of Minecraft, just use the website, a neat blogroll widget, and a one-sentence novel
Recently implemented in Chrome are two of my top asks for CSS—the concept of rows in multiple-column layout, and gap decorations for rows and columns in grid, flexbox, and multicol. Rows (using column-wrap) provide a way to use multicol on the web without risking scrolling up and down to read if the columns become taller...
The beauty of AT Protocol is that all of your data from different apps is available on your PDS, your own folder on the internet containing your stuff as JSON. This means that you can switch which app you use to view that data, without losing anything. It also makes it very easy to make...
I've been playing around with AT Protocol. The posts on this site are now published to standard.site, and I've written a (very basic) WordPress plugin to display posts from my PDS on the Now page of this site. As a developer, I've spent a good chunk of my working life building apps that stored things...
I'm not someone who keeps a lot of memorabilia, but I do have a large collection of conference badges. Most of these are from events I spoke at, and a few from other memorable events. While decorating my new garden office I decided to pin them to a corkboard. It turned out that I had...
I don't post to or visit the social network formerly known as Twitter, but as a very early Twitter user, I can't quite bring myself to delete all my old posts. There's so much history there, not just personal history but the stories of a lot of the work I've done. This is the problem...
In 2004 I published the first edition of The CSS Anthology with Sitepoint. The idea for the book was to take the entire CSS 2.1 specification, and come up with 101 examples to show people how to use all of the CSS that existed. I have a copy on my shelf, but recently discovered you...
Last week I spoke at the very lovely Web Day Out in Brighton. My talk was about browser support, based on the work I've done over the past almost five years on Baseline. I ran through the various things you need to consider when deciding whether to use features that don't meet your Baseline target....
I'm really excited that the reading-flow and reading-order properties are in Chrome 137 (current beta, will be Chrome stable as of May 27, 2025). Finding a way to deal with the visual and source order disconnect created by grid and flex layout has been something I've kept returning to ever since grid shipped in browsers....
Ever since I became an editor of the Multiple-column layout specification I've wanted to add the ability to let overflow columns wrap in the block direction, rather than extend out in the inline direction—creating the sort of horizontal scrollbar that almost nobody wants. And, now we're doing it. I'm working on the specification (which is...
In the before times—before COVID, before I was a Google employee, before the seismic shift my life took in 2020 and 2021—I travelled for around half of the year, speaking at conferences and leading workshops. These days, I don't do as much speaking, but I get to do some, and I've had some great opportunities...
There's a First Public Working Draft of CSS Display 4, which includes the work on the new reading-flow property. The property aims to solve the issue where the source (and therefore tab) order of a page gets disconnected from layout when using CSS grid layout or flexbox. This is a problem I've been talking and...
When we share content about emerging web platform features, we have to be careful that we aren’t frustrating people with things they can’t use yet. However there is a place for talking about new things, and people who enjoy hearing about them. This post is about some of the ways I try to meet the...
I’ve been writing about and teaching people CSS layout for a very long time. People sometimes call me an expert in CSS. I don’t know about that, but I’m confident in claiming expertise in teaching and writing about CSS. I've been doing this for a long time, about 25 years. Over that time I've learned...
I recently wrote a post about the CSS masonry proposal on the Chrome for Developers blog. I was keen not to muddy the waters with anything that wasn't the main point of that post—which was to explain why the Chrome team felt that masonry should be specified outside of grid. Since then, a couple of...
Despite what you might read in some corners of the internet, it's been possible to vertically centre an element inside a parent for a very long time now. The align-content property from the Box Alignment spec does the job, however browsers require that you make the parent element either a flex or a grid layout....
I was chatting with a couple of long-time web folk today. As often happens when those of us who lived through the browser wars get together, the talk turned to old browsers, and old hacks to get round the issues in those browsers. I was thinking through the timeframe of CSS becoming usable at all...
Using display: contents should allow us to use semantic elements to ensure that our content is understandable by accessibility technology, while also not displaying boxes for those elements. It is especially useful when using grid layout and flexbox, as only direct children become grid or flex items. Essentially it allows us to promote grandchildren up...
It will soon be two years since I wrote about the issues around CSS Grid and content re-ordering on this site. We aren’t any further forward with a solution to that problem. With new ways to jumble up your layout such as Grid Layout Masonry, plus new tools which allow the visual generation of layout,...
When I first began to demo CSS Grid to people, in particular the dense packing mode, at a first glance it looked a bit like the layout achieved by - most notably - the Masonry JavaScript plugin. Sometimes also described as a Pinterest Layout, after the application which is best known for using this kind...
At SmashingConf we normally run online workships alongside our conferences, with the San Francisco and Austin conferences postponed we decided to take the workshops online. We’ve so far run two workshops, and a third sell out workshop with Brad Frost is ongoing. We’ve got a great lineup of upcoming workshops with many of your SmashingConf...
Learn With Jason is a live show, streamed on Twitch, where Jason Lengstorf pair programs with other developers and designers, and in 90 minutes creates something new. I’ve never done a show like this before and it was far more fun than I had imagined.
In 2019 I presented a talk at An Event Apart about my ideas about and fears for the web platform. This post is a written version of that talk. You can see the video of the talk on the An Event Apart website, and also find the slides and resources online at Notist. Redefining the...
I have long been concerned about the potential accessibility problems that grid layout could cause. These essentially centre around the concept of disconnecting the source from the visual display. As a short explanation, values of display - other than none, do not change the logical order or visibility of your content. So, the order that...
For the CSS Grid fans who have been following along, last night the subgrid value for grid-template-columns and grid-template-rows landed in Firefox Nightly. Download a copy of Nightly and give it a go! To help I have created some things for you to read and play with: My initial write-up of the feature in Smashing...
I’ve been playing with this early implementation of the subgrid feature in Firefox, and it occured to me that subgrid could solve a less obvious use case. In Grid Layout you can target the end line of the explicit grid with -1. The explicit grid being the grid you create with grid-template-rows and grid-template-columns. However...
I spoke at An Event Apart yesterday, you can see my slides and resources here. One of the themes of my talk is that anyone can contribute to the web platform, and CSS in particular. I had loads of questions from atttendees about this so here is a quick list of getting started suggestions, with...
A couple of weeks ago I spoke at Frontend NE in Newcastle, a big part of my talk was explaining what the CSS Grid Subgrid feature from Grid Level 2 would contain. With no implementation to work with, I had mocked up a bunch of demos using DevTools for that talk. En route to San...
A thing I keep hearing, and especially when talking about subgrid is, “nested grids … isn’t that like tables within tables in the olden days?” It is not. This is why. When you want to use grid layout, what you are doing is changing the display property on a containing element, asking it to lay...
I am increasingly spending my time giving CSS workshops, both in-house for teams and public ticketed workshops. I have a few planned over the next few months which still have availability, and would love to book in further workshops later in the year. Get in touch if you would like me to come to your...
I don’t apply to many Call for Papers right now, because I just get so busy. If a CFP isn’t going to announce for a few months, I don’t want to apply and then have some other thing fill that gap before the decisions are made. One CFP I do tend to put an idea...
Last year I published a post on Smashing Magazine introducing Logical Properties and Values, flow-relative mappings for the physical properties and values we use on the web. For example, instead of width you might use inline-size, and the dimension would then be correct whether you were in a horizontal or vertical writing mode. Take a...
Everyone is angry about CSS again. I’m not even going to try to summarize the arguments. However it always seems to boil down to the fact that CSS is simultaneously too easy to bother with, yet so hard it needs to be wrapped up in a ball of JavaScript in case it scares the horses....
Back in September of last year, I explained the plans of the Dutch organisation Fronteers, in a post on Smashing Magazine. In that post I also explained what it is to be a W3C Invited Expert, and some of my motivations around working on CSS. That post was written prior to a vote by the...
A little while back at An Event Apart Chicago, I chatted to Rob Weychert about a grid use case he felt the spec couldn’t solve. He has now written that use case up, which you can read on his blog - Editorial Layouts, FLoats, and CSS Grid. At the time I thought that this sounded...
I’ve been writing new talks, creating new workshop material, and thinking about how best to teach CSS as we head all too quickly towards 2019. One of the things I’ve been thinking about is how we have typically thought about CSS, and how that should be changing given where the language is now. CSS has...
Back in 2001 I became a member of the Web Standards Project (WaSP). For over fifteen years, I’ve been working to try to ensure an interoperable and open web. I’ve seen the web during the browser wars, where new features were shipped by browsers trying to gain a competitive advantage, in a process that meant...
In November 2016, I wrote an article in response to a question about Grid support in IE10 and 11. In that piece I wrote a quick rundown of what parts of the modern specification were supported in the older IE version. During a recent discussion onstage at An Event Apart, the issue of using the...
Earlier this year I spent a fun day at the Skillshare offices filming a short course on CSS Grid Layout. The focus is newcomers to the spec, and I take you through developing a layout such as you might use for a blog. The introduction video for the course is below. It is designed for...
Today our first product Perch will be nine years old, and perhaps rather neatly - although it wasn’t planned this way - we declared our new product out of beta this week. May just appears to be shipping month around here. Notist is the slide-sharing, presenter portfolio application that I needed, however as we come...
CSS Grid fans are probably already aware that I have been very keen to see subgrid implemented in CSS Grid Layout after having been removed from the Level 1 specification last year in order to allow more time for discussion. As other people have started to use Grid, they have also discovered the use cases...
Yesterday I made live fourteen brand new videos, plus a bunch of updates to existing material on my CSS Layout Workshop. If you already subscribe, you will have access to the new material already. The Complete course now contains 96 individual lessons, covering everything you might possible want to know about CSS Layout. If I...
A year ago today, Firefox was the first browser to ship into stable their CSS Grid implementation. Closely followed by Chrome and Safari. It’s been quite a year for my favourite layout method. It has been fascinating to see how people have adopted Grid, and the different ways people are developing with the specification. It...
I am well into conference preparation now. Smashing Conf London is just over a week away, and I’ll be presenting a new talk and updated CSS Layout workshop. I’m also working on a new talk for designers on Grid and other new layout methods. I’ll be presenting that at UX Immersion: Interactions. CSS Layout News...
This week Widget the cat had to go to the vet hospital for an operation. He is home now, quite angry at us, but seems to be a lot better than he was before the op. No flying lessons due to the continued suboptimal weather, but I’ve been to Cross Fit twice and run a...
I have something of a tendency to do stuff and move on, straight into whatever is next. I thought in 2018 I would have a bit of an experiment and write these weekly notes. Here is the first one, covering a little more than a week due to the weird Christmas getting back to work...
Time for another of these roundup posts where I look back, baffled at how quickly time has passed. TripIt tells me that I spent 158 days on the road last year, visiting 56 cities in 16 countries and travelled 184,988 km. That did include a holiday in Nice, but otherwise my travel was conference or...
The CSS Working Group would like your opinion. There is a longstanding issue in both the CSS Grid Layout and Flexbox specifications. From the CSS Grid specification: Percentage margins and paddings on grid items can be resolved against either: their own axis (left/right percentages resolve against width, top/bottom resolve against height), or, the inline axis...
As part of preparing for the An Event Apart talk that I’m giving for the next few shows, I published a survey. I wanted to have some more data on how people were using CSS and how they felt about new CSS features. This post is an initial roundup of some of the things I...
I am author or co-author of 22 books, book number 22 is The New CSS Layout, published by my good friends over at A Book Apart, and launching today. Book number 22 only happens because 15 years ago I said yes to book number 1. It was 2002, and I was approached to write a...