Syntax for responsive

[robsonsobral]

The fluid() function:

.foo {
	font-size: ms-fluid(1@320px, 3@480px);
}

Being the syntax:

ms-fluid(STEP@BREAKPOINT, STEP@BREAKPOINT)

Question: Is it possible to have infinite steps and breakpoints? Should we have them? Would that be useful?

We could get the value using clamp()

Even better, if we could have easing functions:

.bar {
	font-size: ms-fluid(1@320px, 3@480px, 'ease-in');
}

Being the default "linear".

Attention: It have been really hard to find how to convert the Bézier cubic notations to mathematical functions.

[robsonsobral]

Should we infer steps from sizes?

.foobar {
	font-size: ms-fluid(16px@320px, 48px@480px);
}

[scottkellum]

Re “really hard to find how to convert the Bézier cubic notations to mathematical functions.”

Typetura uses native easing functions, so no need to convert if you choose to use it: https://github.com/Typetura/Typetura/blob/v4/typetura.css

I’ve pushed the w3c and browsers hard to adopt a standard to replace Typetura, and progress (pun intended) is happening: https://front-end.social/@mia/115504980181778213