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!
Link tags: fluid
48
Dao Day 2024 – a regression in the making | Clagnut by Richard Rutter
The arc of the web is long and bends towards flexibility.
Retrofitting fluid typography | Clagnut by Richard Rutter
Here’s a taste of what Rich will be delivering at Patterns Day on Thursday—can’t wait!
Utopia WCAG warnings | Trys Mudford
Wouldn’t it be great if all web tools gave warnings like this?
As you generate and tweak your type scale, Utopia will now warn you if any steps fail WCAG SC 1.4.4, and tell you between which viewports the problem lies.
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?
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!
Some simple ways to make content look good - Set Studio
This is a terrific walkthrough from Andy showing how smart fundamentals in your CSS can give you a beautiful readable document without much work.
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
clamp() Calculator · Chris Burnell
Like a little mini Utopia:
Handy little tool for calculating viewport-based clamped values.
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.
Building the new Utopia homepage | Trys Mudford
Trys has written up how he made that nifty little resizing widget on the Utopia homepage.
Utopian project kickstarter — Figma
Do you like the ideas behind Utopia? Do you use Figma?
If the answer to both those questions is “yes”, then James has made a very handy Figma community file for you:
This work-in-progress is intended as a starting point for designers to start exploring the Utopia approach, thinking about type and space in fluid scales rather than device-based breakpoints.
Min-Max-Value Interpolation
Here’s a really nice little tool inspired by Utopia for generating one-off clamp() values for fluid type or spacing.
Fluid Type Scale - Generate responsive font-size variables
This is kind of a Utopia lite: pop in your minimum and maximum font sizes along with a modular scale and it spits out some custom properties for clamp() declarations.
Contextual Spacing For Intrinsic Web Design | Modern CSS Solutions
To complement her talk at Beyond Tellerrand, Stephanie goes through some of the powerful CSS features that enable intrinsic web design. These are all great tools for the declarative design approach I was talking about:
Be the browser’s mentor, not its micromanager. - Build Excellent Websites
This one-page site that Andy has made to illustrate his talk at All Day Hey is exactly what I was talking about with declarative design.
Give the browser some solid rules and hints, then let it make the right decisions for the people that visit it, based on their device, connection quality and capabilities. This is how they will get a genuinely great user experience, rather than a fragmented, broken one.
Thoughts on Exerting Control With Media Queries - Jim Nielsen’s Blog
Some thoughts on CSS, media queries, and fluid type prompted by Utopia:
We say CSS is “declarative”, but the more and more I write breakpoints to accommodate all the different ways a design can change across the viewport spectrum, the more I feel like I’m writing imperative code. At what quantity does a set of declarative rules begin to look like imperative instructions?
In contrast, one of the principles of Utopia is to be declarative and “describe what is to be done rather than command how to do it”. This approach declares a set of rules such that you could pick any viewport width and, using a formula, derive what the type size and spacing would be at that size.
Utopia - an introduction - YouTube
James and Trys have made this terrific explanatory video about Utopia. They pack a lot into less than twenty minutes but it’s all very clearly and methodically explained.
Fluid type sizes and spacing — Piper Haywood
Prompted by Utopia, Piper shares her methodology for fluid type in Sass.
Meet Utopia: Designing And Building With Fluid Type And Space Scales — Smashing Magazine
An excellent explainer from Trys and James of their supersmart Utopia approach:
Utopia encourages the curation of a system small enough to be held in short-term memory, rather than one so sprawling it must be constantly referred to.