Anyone used the clamp() CSS function in production?

#1

Lately, I fell onto this article from CSS-tricks. So far, I have use media queries to set up responsive font-size, but I’m really open to a more dynamic approach.

1 Like
#2

I’m yet to. I’m just about to re-develop my own blog in 11ty after finishing the piccalili course a couple of weeks ago - so I’ll give it a go and report back!

In general I’d really love to, but my deadlines / budgets are so tight at my workplace - that I struggle to experiment with anything that doesn’t have IE11 support. My experience level has lead me to prioritise accessibility improvements over progressive enhancement - but I feel like I’m getting to the point where I could probably check out clamp() in my next big work project.

1 Like
#3

I’ve started using clamp in my last project.

I don’t use it for typography because I’m not a huge fan of fluid typography but I use it for fluid margins and paddings.

The scale system is from EveryLayout and I’ve just added a fluid parameter (1.25vw) in --s0 to have a fluid behavior.

My previous code was --s0: calc(1rem + 1.25vw); but I was worried about extra high resolution screens (even if the zoom factor mitigates the issues I suppose).

So it was a perfect use case to try using clamp to add a end limit to the scale.

I’m happy with it :wink:

:root {
  --ratio: 1.5;

  /* Scale for relative margins and paddings */
  --s-2: calc(var(--s0) / var(--ratio) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: clamp(1rem, 1rem + 1.25vw, 2.5rem);
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s0) * var(--ratio) * var(--ratio));
  --s3: calc(var(--s0) * var(--ratio) * var(--ratio) * var(--ratio));
}
2 Likes
#4

Very interesting, with custom properties too! I have only use min() and max() functions, which as I understand clamp() is based on, in a grid layout context and so far without great success. I always find myself reverting to media query somehow. Even though the flexibility of a fluid layout really appeals to me, I find the result is never quite satisfying and I have a hard time dealing with the lack of control. Perhaps, for a fluid layout to truly works, every elements involved need to be fluid as well. I definitely need to experiment more with this! :nerd_face: