Min() max() clamp() resources

PaulOB · June 9, 2022, 8:04am

When the screen width is less than 400px then 50% is less than 200px so the smaller 50% value is chosen.

At widths greater than 400px then 50% is larger than 200px so the smaller 200px value is chosen.

m_hutley · June 9, 2022, 9:54am

To be specific, the browser will reevaluate percentage based measurements as you resize the window. It’s part of the browser’s resizing code. What’s happening?

Min = “Pick the bottom line.”
x = Screen Width. (I’m assuming a 100% container.)
y = Element Size

OBXjuggler · June 10, 2022, 11:24pm

what can the min() max() style?

besides width

TechnoBear · June 11, 2022, 8:15am

Did you read the link Paul provided above? It answers your question.

PaulOB · June 11, 2022, 10:48am

Besides width the most common application would be for font-size in creating more fluid typography.

OBXjuggler · June 12, 2022, 5:10pm

min () max () clamp () question,

is a px value needed once per function?

thought i saw that somewhere…

PaulOB · June 12, 2022, 5:28pm

No you can use whatever values you need (as long as they make sense).

e.g.

  font-size: max(4vw, 2em, 2rem);

Each one of those values may compute to a different ‘actual size’. You could have ‘ch’ and px in there also if you wanted.

It would be pointless to do something like:

font-size: max(20px, 30px, 40px);

You know that 40px is greater than 20px or 30px so there would be no need for the max() to be used.

It is used for mixed unit values so that comparisons can be made.

From the link already posted:

The max() CSS function lets you set the largest (most positive) value from a list of comma-separated expressions as the value of a CSS property value. The max() function can be used anywhere a <length> , <frequency> , <angle> , <time> , <percentage> , <number> , or <integer> is allowed.

OBXjuggler · June 16, 2022, 2:40am

BINGO!

i get min() and max() now

now to ask about clamp() yes, i saw your earlier posts, read them, watched a video. i ask for some clarification please

I do NOT mean to have you repeat yourselves if you have answered this already.

clamp()

kindly review how the clamp(min, VAL, max) works

in font-sizes

font-size: clamp(1.5rem, 3vw, 3rem)

my font-size will not go below 1.5rem, ever

my font-size will not go above 3rem, ever

my middle value 3vw will adjust between the 1st and 3rd value

again, i have studied the provided examples above and need your help

if you honestly think this concept is too much for me, please tell me

m_hutley · June 16, 2022, 8:54am

clamp(X,Y,Z) = max(X,min(Y,Z))

it will never be less than X, never be greater than Z, and will use Y inbetween those numbers.

PaulOB · June 16, 2022, 3:10pm

Not adjusted as such It will be used if it falls between those 2 other values. If you want it to scale between 2 values explicitly then you need a measurement that will satisfy those requirements.

For example if you said this:

body {
  font-size: clamp(1.5rem, 1rem, 3rem);
}

The text size would be 1.5rem all the time and not scale.

If on the other hand you said.

body {
  font-size: clamp(1.5rem, 5rem, 3rem);
}

The text size would be 3rem all the time and not scale.

Therefore you may find that 3vw is larger (or smaller) than the measurements you define so you never get a scaling text size you; just either get the higher or lower values.

There are some clever methods you can use so the following links may be useful.

OBXjuggler · June 16, 2022, 3:20pm

thanks!

will take a look

rpg_digital · June 16, 2022, 7:00pm

Just for a fun exercise this afternoon, I have done a re-write of Pedro Rodriguez’s clamp calculator from ReactJS to HTML, SCSS and Vanilla JS.

Edit: I notice the copy to clipboard doesn’t work with the embedded version here.

PaulOB · June 17, 2022, 12:24pm

Excellent

OBXjuggler · June 17, 2022, 7:50pm

PaulOB:

body {
  font-size: clamp(1.5rem, 1rem, 3rem);
}
The text size would be 1.5rem all the time and not scale.

If on the other hand you said.
body {
  font-size: clamp(1.5rem, 5rem, 3rem);
}
The text size would be 3rem all the time and not scale.

PaulOB:

font-size: clamp(1.5rem, 1rem, 3rem);
}
in this example the text size would be 1.5rem all the time and not scale. BECAUSE the preferred value is less than 1.5rem… making the min value applied

in this example the text size would be 3rem all the time and not scale BECAUSE the preferred value is over 3rem… making the max value applied

do i have that right? i believe it was in one of the articles you suggested…

PaulOB · June 17, 2022, 9:27pm

Yes that’s correct

OBXjuggler · June 17, 2022, 11:01pm

what do you mean here?

you mean the importance of the middle value being between min and max for functionality?

rpg_digital · June 18, 2022, 12:43am

I’m trying to get my head around this myself.

The middle value or preferred value dictates at which widths we will see a linear scaling between the minimum and maximum values.

Calculations for vw to pixels
px = width / 100 * vw
e.g. at 1000px 4vw is 40px (4%)

Calculations for width
width = px * 100 / vw

So for instance if we go with a minimum of 16px(1rem) and maximum of 24px(1.5rem) and use a preferred value of 4vw (4% of the overall width) the transformation will occur between 400-600px.

That means anything lower than 400px we get 16px anything larger than 600px we get 24px. In between those widths we will see a linear scale from 16px to 24px.

If you chose 2vw instead for the preferred size then the linear scaling happens between 800 and 1200px.

That’s my rough grasp of it. So by using a formula to calculate the preferred middle value, enables us to set the breakpoints at which this scaling will occur.

Here is quick codepen that does seem to tally with the above.
https://codepen.io/rpg2019/pen/wvyZMrG
Note: you will need to drag the width of the preview to see this.

rpg_digital · June 18, 2022, 6:19am

So I wanted to wrap my head around the calculations for the preferred value in clamp. I looked at a couple of Maths websites, the slope equation was pretty straight forward then 'y1’s , 'x1’s, 'b’s and 'm’s were thrown at me, which was a nightmare.

In the end just sat down with a calculator and tried to figure it out.

Here is a breakdown (No doubt a few mistakes in there). To make things easier I have stuck to pixels. I believe it would only require converting the yOffset to REM’s, so no biggy.

Edit: Not very pretty, but a codepen to test the above calculation.

PaulOB · June 18, 2022, 10:35am

There’s another very good article here:

With a nice calculator also.

rpg_digital · June 18, 2022, 2:56pm

It could be easier Paul

I realise there is a sass function solution in one of your links, but I purposely didn’t look as I wanted to tackle this myself. A small personal project and a great way to learn — I hope @OBXjuggler doesn’t mind.

So here we go

SCSS

// will remove the rems from minFont and maxFont
@function strip_units($num) {
    @return $num / ($num * 0 + 1);
}

// @params (rem, rem, px, px /*optional px*/)
// @returns clamp(rem, rem + vw, rem)
@function simple_clamp($minFont, $maxFont, $minWidth, $maxWidth, $pixPerRem: 16px) {
    $minFontPx: strip_units($minFont) / (1 / $pixPerRem);
    $maxFontPx: strip_units($maxFont) / (1 / $pixPerRem);

    $slope: ($maxFontPx - $minFontPx) / ($maxWidth - $minWidth);
    $yOffset: #{($minFontPx - ($slope * $minWidth)) / $pixPerRem}rem;

    // will remove 'yOffset +' if equal to 0
    @return clamp(#{$minFont, #{if($yOffset=='0rem','', $yOffset'+')} #{$slope * 100}vw, $maxFont});
}

SCSS Usage example:

h1 {
    font-size: simple_clamp(1rem, 1.5rem, 400px, 800px);
    /* compiles to: font-size: clamp(1rem, 0.5rem + 2vw, 1.5rem); */
}

h2 {
    font-size: simple_clamp(1rem, 1.5rem, 400px, 600px);
    /* compiles to: font-size: clamp(1rem, 4vw, 1.5rem); */
}

Demo here: