Link tags: clamp

5

sparkline

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:

Fluid type sizes and spacing — Piper Haywood

Prompted by Utopia, Piper shares her methodology for fluid type in Sass.

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.

Intrinsically Responsive CSS Grid with minmax() and min()

When min() gets better support (it’s currently in Safari), we’ll be able to create container queryish declarations like this:

grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr));