In order for principles to truly drive the work and serve as a good framework for the outcomes, they have to be debated, opinionated, and painful.
Yes! Design principles aren’t there to make you feel good; they should provoke arguments.
One of the tests that I’ve developed in thinking through writing down principles, design or otherwise, is to ask the question: “versus what?”.
This advice works both ways:
- Collaboration
- Communication
- Respect
- No shared (and contextual) sense of purpose
- Overbuilding, or scaling too early
- Inability to make decisions and move forward quickly
- Lack of clear ownership and dedicated resources
- Lack of cultural alignment
The common thread among these issues is that none are related to technical or tooling decisions —or even to the components themselves.
This is a great little tip from Eric for those situations when you want an element to be centred but you want the content inside that element to remain uncentred:
max-inline-size: max-content;
margin-inline: auto;
And I completely concur with his closing thoughts on CSS today:
It’s a nice little example of the quiet revolution that’s been happening in CSS of late. Hard things are becoming easy, and more than easy, simple. Simple in the sense of “direct and not complex”, not in the sense of “obvious and basic”. There’s a sense of growing maturity in the language, and I’m really happy to see it.
An excellent explanation of the new leading-trim and text-edge properties in CSS, complete with an in-depth history of leading in typography.
(I’m very happy to finally have a permanent link to point to about this, rather than a post on Ev’s blog.)
I count at least three clever CSS techniques I didn’t know about.
A cute walkthrough for flexbox and grid.
Marcin explains why line height works differently in print and the web. Along the way, he hits upon this key insight about CSS:
Web also took away some of the control from typesetters. What in the print era were absolute rules, now became suggestions.
Remember that every line of CSS you write is a suggestion to the browser.
Font metrics help the computer determine things like the default spacing between lines, how high or low sub and super scripts should go, and how to align two differently sized pieces of text next to each other.
Rachel gives a terrific explanation of CSS layout from first principles, starting with the default normal flow within writing systems, moving on to floats, then positioning—relative, absolute, fixed, and sticky—then flexbox, and finally grid (with a coda on alignment). This is a great primer to keep bookmarked; I think I’ll find myself returning to this more than once.
Rachel provides an in-depth comparison between flexbox and grid layout: what they have in common, and what their respective strengths are.
Don’t forget to enable the experiment web features flag in your browser if you want to see the examples in action.
Here’s a clever way to get text centred when it’s short, but left-aligned when it wraps.
Here’s a nifty trick: using text-align: justify to get a nice responsive grid layout.
I am easily amused.
Khoi has posted the slides from his grids workshop online. Download and learn.