James describes his process for designing fluid grid layouts, which very much involves working with the grain of the web but against the grain of our design tools:
In 2022 our design tools are still based around fixed-size artboards, while we’re trying to design products which scale gracefully to suit any screen.
A terrific tour of just some of the fantastic ways you can use :has() in CSS.
The section on using it with sibling selectors blew my mind:
How often have you wanted to adjust the margins on a headline based on the element following it? Now it’s easy. This code allows us to select any h2 with a p immediately after it.
h2:has(+ p) { margin-bottom: 0; }Amazing.
The algorithm I’m going after is pretty simple: If the grid of items has an odd number of items, then make the first item full-width. But CSS can’t do logic… right? Well… hold my proverbial beer.
This is so great! Charlotte takes two previous ideas she’s been writing about (quantity queries and flexbox) and puts them together in a new way.
It took me a while to get around what the nth-child selectors are doing here, but Charlotte does such great job of explaining the CSS that even I could understand it.
This guide to CSS grid layout is the perfect companion piece to Rachel’s Grid by Example.
Grid frameworks don’t get much more minimal than this—eleven lines of CSS:
.row { display: flex; }
.col { flex: 1; }
@media (max-width: 48em) {
.row { flex-direction: column; }
.col { flex: 0 0 100%; }
}
.col-tenth { flex: 0 0 10%; }
.col-fifth { flex: 0 0 20%; }
.col-quarter { flex: 0 0 25%; }
.col-third { flex: 0 0 33.3333334%; }
.col-half { flex: 0 0 50%; }
Should’ve been a gist really.
Results of a survey of over 1000 people working on the web. It’s beautifully put together and the overall trajectory regarding responsive design looks pretty positive to me.
A beautiful website for ISS-based biology experiments.
A fascinating look at how Flipboard combines art direction and algorithms to generate layouts.
A comprehensive look at the current state of things in the world of responsive design, with a look to possible future APIs.
Here’s a nifty trick: using text-align: justify to get a nice responsive grid layout.
I agree with David: most pre-rolled grid “solutions” are way too complicated. And in any case, applying a pre-existing grid framework for a new project seems kind of like applying a pre-existing colour palette.
As David points out, it really needn’t be so complicated.
An excerpt from Mark’s forthcoming book, which promises to be magnificent.
A really nice piece on scale, ratio and rhythms in web design.
Josh writes about the importance of using rules and systems as tools without being bound by them.
This is interesting, not because it’s yet another grid framework (which I never use anyway) but because of the way it’s doing layout: with border-box and inline-block, rather than floats. If you’re only serving up your layout styles to browsers that support media queries (which would discount older versions of IE anyway), this could make a lot of sense.
Luke catalogues layout patterns in responsive designs.
The thought process behind trying to abstract class names that are used for layout in responsive designs (and can therefore refer to different widths depending on the context). Here, the author settles on letters. In the past, I’ve approached the same kind of abstraction by using latinised names.
A great in-depth look at the tricky problem of advertising in responsive design from Mark.
In this interview Mark discusses the “content out” rather than “canvas in” thinking that informs his new canon.