Link tags: clamp



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.

Complex conditional width using flex-basis with clamp: Every Layout

Okay, combining flex-basis and clamp() is pretty cool!

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:

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));