Fluid Space Calculator | Utopia
Type and space are linked, so if you’re going to have a fluid type calculator, it makes sense to have a fluid space calculator too. More great work from Trys and James!
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.
Related links
Clamp | Utopia
Trys has been investigating how to incorporate CSS clamp() into the brilliant Utopia project. I won’t pretend to understand all the maths here—this is a very deep dive!
He’s also created a CSS generator Mark 2 if you want to use clamp() in your fluid type.
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?
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
Takin’ five. — Ethan Marcotte
I linked to the first of Ethan’s short videos on accessibility last week, but it’s well worth checking out all five:
Related posts
Making the Patterns Day website
The joy of getting hands-on with HTML and CSS.
Re-flex
Putting content first by combining responsive design with the CSS3 flexible box layout module.
Slow Design for an Anxious World by Jeffrey Zeldman
A presentation at An Event Apart Seattle 2019.
Declarative design
Defining the inputs instead of trying to control the outputs.
Utopia
Why do I like fluid responsive typography? Let me count the ways…