Fluid Baseline Grid - A sensible HTML5 and CSS3 development kit

A set of default styles to get started on a mobile-first responsive design.

Tagged with

Related links

Responsive Letter Spacing – Cloud Four

Another clever use of clamp() and calc() for web typography, but this time it’s adjusting letter-spacing.

Tagged with

Printing music with CSS grid

Laying out sheet music with CSS grid—sounds extreme until you see it abstracted into a web component.

We need fluid and responsive music rendering for the web!

Tagged with

Responsive typography and its role in design systems | Clagnut by Richard Rutter

Okay, if you weren’t already excited for Patterns Day, get a load of what Rich is going to be talking about!

You’ve got your ticket, right?

Tagged with

Clamp calculator | Utopia

Oh, this is a nice addition to the Utopia set of tools: when you don’t need a full-on type scale but you still want to figure out fluid clamp() values, the clamp calculator has you covered.

It’s got permalinks too!

Tagged with

Container Queries and Typography

I feel like we need a name for this era, when CSS started getting real good.

I think this is what I’ve been calling declarative design.

Tagged with

Related posts

Told you so

In which I permit myself a moment to gloat about liquid layouts.

Re-tabulate

Combining responsive design with CSS table layout to rearrange the display of content and navigation.

Re-flex

Putting content first by combining responsive design with the CSS3 flexible box layout module.

Tweaking Huffduffer

An oEmbed nip here, a responsive design tuck there.

New tools for art direction on the web

Variable fonts + CSS grid + service workers