Tags: alignment

Get it shipped — building better relationships with Devs

This advice works both ways:

1. Collaboration
2. Communication
3. Respect

Why design systems fail by Karen Vanhouten

1. No shared (and contextual) sense of purpose
2. Overbuilding, or scaling too early
3. Inability to make decisions and move forward quickly
4. Lack of clear ownership and dedicated resources
5. 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.

Flexibly Centering an Element with Side-Aligned Content – Eric’s Archived Thoughts

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.

The Thing With Leading in CSS · Matthias Ott – User Experience Designer

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.)

Uncommon CSS Properties

I count at least three clever CSS techniques I didn’t know about.

Learn Box Alignment

A cute walkthrough for flexbox and grid.

Type in the digital era is a mess

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.

Intro to Font Metrics

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.

Getting Started With CSS Layout — Smashing Magazine

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.

CSS Grid, Flexbox And Box Alignment: Our New System For Web Layout – Smashing Magazine

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.

Aligning text smartly in CSS

Here’s a clever way to get text centred when it’s short, but left-aligned when it wraps.

Text-align: Justify and RWD

Here’s a nifty trick: using text-align: justify to get a nice responsive grid layout.

text-align: centaur;

I am easily amused.

Subtraction: Oh Yeeaahh!

Khoi has posted the slides from his grids workshop online. Download and learn.