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.
I love this list of ever-increasing timelines. All that’s missing is the time since the Carrington Event, just to remind us what could happen when the next one hits.
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.
Brian recounts the sordid messy history of user-agent strings.
I remember somebody once describing a user-agent string as “a reverse-chronological history of web browsers.”
A lovely visualisation of asteroids in our solar system.
James shares his experience of teaching a class of 9 and 10 year old children how to code, and offers some advice:
- Don’t dumb it down
- Use real-world examples
- Make it hands on
- Set clear expectations
- Award certificates and/or stickers
As members of the web community we have a responsibility to share what we have learned. I can’t think of a better way of doing that then helping kids get started.
Hear, hear!
A collection of short stories and essays speculating on humanity’s future in the solar system. The digital versions are free to download.
A write-up of the BrightSparks programme that Clearleft is taking part in.
Each company agreed to help support one local child from a low-income family, on free school meals or with a yearly household income of under £25k.
A lovely piece of design fiction imagining a project where asteroids are shaped and polished into just the right configuration to form part of an enormous solar-system wide optical telescope.
Once they are deployed in space, a celestial spiderweb of crisscrossed laser beams can push around clouds of those microscopic optical sensors to desired locations.
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.
This was my favourite moment from the Handheld conference in Cardiff.
Defending Earth against asteroids, just like the Spaceguard organisation described in Rendezvous With Rama.
Detect. Deflect. Defend.
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.