Fluid scale and tokens: a match made in heaven

Trys and James from Clearleft shared their great new side project, Utopia with us all today.

Utopia emerges when designers and developers share a systematic approach to fluidity in responsive design. Instead of designing for x number of arbitrary breakpoints, we can design a system within which elements scale proportionally and fluidly

As the co-author of Every Layout, my head nearly fell off from all of the nodding when reading this because this is the exact sort of approach that we preach: setting some rules and letting the browser do the rest. In fact, that’s what my most recent talk, Keeping It Simple With CSS That Scales boils down to (amongst soft skills being one of the best CSS tools).

I’m obsessed with fluid type and forcing it into projects (much to poor Trys’ experience in a project we worked on together), because setting arbitrary sizes for type kills me.

The thing that really excites me though, is how this formula that Utopia provides, mixed with my little design token utility class generator, Goron, produces.

My gosh, pals, it’s magical. I’m in CSS heaven.

Size scales FTW permalink

With Goron, I base text sizes and spacing on a defined size scale, which is usually a Major Third Scale (Classic Scale). That part of the config—which is rem based—looks like this:

const sizeScale = {
  '300': '0.8rem',
  '400': '1rem',
  '500': '1.25rem',
  '600': '1.56rem',
  '700': '1.95rem',
  '800': '2.44rem',
  '900': '3.05rem'
};

When I use the handy CSS Custom Properties that Utopia generates, my sizeScale looks like this:

const sizeScale = {
  '300': 'var(--step--1)',
  '400': 'var(--step-0)',
  '500': 'var(--step-1)',
  '600': 'var(--step-2)',
  '700': 'var(--step-3)',
  '800': 'var(--step-4)',
  '900': 'var(--step-5)'
};

Instead of rigid—albeit still flexible by proxy of the rem unit—token classes, I have fluid token classes that scale.

How does this help? permalink

Take Hylia as an example. On that project, I have a component called .intro and inside there, the main heading for a page has the following sizing tokens like this:

<h1 class="text-800 md:text-900">Lorem ipsum</h1>

This is because at smaller screens, the 900 item in the scale (3.05rem) is too big, so I use a responsive version of the token instead, setting 800(2.44rem) as the default.

With this new approach, I’d just use text-900, because I would have generated a fluid scale. This cuts down on generated classes, and importantly, media-queries, while simplifying the process of implementing a type scale. It also gives me consistent, fluid spacing. Holy moly.

Here’s a video of it on the very much in production, Piccalilli front-end:

Wrapping up permalink

Go and check out Utopia. I was lucky enough to work with both Trys and James on projects while doing freelance stuff for Clearleft, and I can tell you, there probably isn’t a better dream team for this sort of tool.

Another fluid type tool (and good looking paid service) that I have a lot of love for is Typetura, by typography and CSS maven, Scott Kellum (and co). Give that a look too.

For now, I’m going to think about creating a 2020 version of Keeping It Simple With CSS That Scales which goes into more depth about this sort of fluidity, Every Layout and the methodology, C-BEUT. Give me a shout if you want me to deliver it at your event.