Matthias Ott – Painting With the Web – beyond tellerrand Düsseldorf 20025 - YouTube
A great talk by Matthias on what you can do with web standards today!
Link tags: layout
216
Cascading Layouts | OddBird
A workshop on resilient CSS layouts
Oh, hell yes!
Do not hesitate—sign yourself up to this series of three online workshops by Miriam. This is the quickest to level up your working knowledge of the most powerful parts of CSS.
By the end of this you’re going to feel like Neo in that bit of The Matrix when he says “I know kung-fu!” …except kung-fu isn’t very useful for building resilient and maintainable websites, whereas modern CSS absolutely is.
Item Flow, Part 1: A new unified concept for layout | WebKit
I really like the idea of unifying some layout values in CSS. If you’ve got any feedback, please chip in!
Help us choose the final syntax for Masonry in CSS | WebKit
I really like the way that the thinking here is tied back to Bert Bos’s original design principles for CSS.
This is a deep dive into the future of CSS layout—make a cup of tea and settle in for some good nerdiness!
An alternative proposal for CSS masonry | Blog | Chrome for Developers
Rachel responds to Jen’s recent post with the counter-argument; why masonry should be separate from grid.
I’m not entirely convinced. We heard performance issues as a reason why we could never have container queries or :has, but here we are. And the syntax for a separate masonry spec borrows so heavily from grid that it smells of redundancy.
Help us invent CSS Grid Level 3, aka “Masonry” layout | WebKit
This is a wonderful in-depth article by Jen, with lots of great demos.
She makes a very strong case for masonry layouts being part of the grid spec (I’m convinced!). If you have strong feelings one way or the other, get involved
An Interactive Guide to CSS Container Queries
Another terrific interactive tutorial from Ahmad, this time on container queries.
An Interactive Guide to CSS Grid
This is a terrific interactive explainer!
Getting started with CSS container queries | MDN Blog
Michelle has written a detailed practical guide to container queries here.
Brian Koberlein
What a beautiful website!
Modern CSS in Real Life - Chris Coyier
This is a terrrific presentation by Chris, going through some practical implementations of modern CSS: logical properties, viewport units, grid, subgrid, container queries, cascade layers, new colour spaces, and view transitions.
The Guide To Responsive Design In 2023 and Beyond - Ahmad Shadeed
Instead of thinking about responsive design in terms of media queries, I like to think of responsive design in these categories.
- Responsive to the content
- Responsive to the viewport
- Responsive to the container
- Responsive to the user preferences
12 Days of Web
All twelve are out, and all twelve are excellent deep dives into exciting web technologies landing in browsers now.
Designing a Utopian layout grid: Working with fluid responsive values in a static design tool. | Utopia
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.
An Interactive Guide to Flexbox in CSS
This is a superb explanation of flexbox—the interactive widgets sprinkled throughout are such a great aid to learning!
Complex conditional width using flex-basis with clamp: Every Layout
Okay, combining flex-basis and clamp() is pretty cool!
Using :has() as a CSS Parent Selector and much more | WebKit
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.
Solving “The Dangler” Conundrum with Container Queries and :has() - daverupert.com
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.
Tim Brown: CSS forces
Some interesting thoughts from Tim here. What if CSS could “displace” design decisions from one area to another?
For example, a flexible line spacing value in one container could influence margins that surround the text block. That change in spaciousness may mean that nearby headings need size or spacing adjustments to stay feeling connected.
This feels like the complete opposite way that most people approach design systems—modular, componentised, and discrete—but very in-line with the way that CSS has been designed—interconnected, relational and cascading.