Default unit: VMIN
Toucaan defaults to (and strongly recommends) using only the
vmin unit as the single unit of design for all your styling needs or element sizing.
No other css unit comes close to offering the kind of control and determinism that the viewport minimum unit
Traditional wisdom (and common usage) is to use pixel derived units such as
px itself, or
rem along with numerous other css properties and new standards like
clamp() to scale your web design within acceptable limits. This however leads to many complicated and over-engineered set of rules that are hard to maintain and just too brittle.
vmin on the other hand scales according to the limits of the viewport already. We just have to use it. A lot of folks don't realize that even the
px unit looks at the viewport. Manufacturers decide the resolution (or pixel density) and thus the px unit itself for a device according to the physical size of the viewport and the processing power underneath. Once that device resolution is set by the manufacturer, the css
px unit relies on the initial device pixels and doesn't scale anymore.
vmin on the other hand scales directly according to the physical size of the window (viewport or device!) and it is independent of orientation too!
Block-Scoping Text Size
--vmin unit utility variable can be used to assign size to an element just like any other css unit
px, or similar.
$width: calc(20 * var(--vmin));
height: $width; /* It's a square of course. */
/* Font size is tied to the container element.
No container-query or clamping is required. */
font-size: calc($width / 5);
Observe the scaling of element and the text within. The size of the text is always pinned to the intrinsic size of the element!
See the CSS is Awesome example with intrinsic scaling.
View the Homepage of Red Goose that demonstrates intrinsic scaling.