Gerillass
v2.1.0A value that grows with the viewport between two widths and then stops. fluid(24px, 48px) is 24px on a small screen, 48px on a large one, and a straight line between the two.
How the value is built
The preferred value is the line through (min-viewport, min) and (max-viewport, max).
slope = (max - min) / (max-viewport - min-viewport)
intercept = min - slope * min-viewport
preferred = intercept + slope * 100vwChecked against hand arithmetic at a real 900px viewport: the floor came out at 16.00px against 16.00 expected, the ceiling at 24.00 against 24.00, and an interpolated value at 19.52 against 19.52.
Arguments
| Name | Type | Description |
|---|---|---|
$min | number (with unit) | Accepts a length in px or rem, the value at $min-viewport. |
$max | number (with unit) | Accepts a length in px or rem, the value at $max-viewport, no smaller than $min. |
$min-viewport (320px) | number (with unit) | Accepts a length in px or rem, the width below which the value stops shrinking. |
$max-viewport (1280px) | number (with unit) | Accepts a length in px or rem, larger than $min-viewport. |
Lengths must be px or rem. Other units are refused, because the function has to convert between them to build the line.
Examples
A heading that scales between the two default viewport widths.
.title {
font-size: fluid(24px, 48px);
}.title {
font-size: clamp(1.5rem, 1rem + 2.5vw, 3rem);
}Your own viewport range, and values given in rem.
.title {
font-size: fluid(1rem, 3rem, 320px, 1200px);
}.title {
font-size: clamp(1rem, 0.2727rem + 3.6364vw, 3rem);
}Not only for type. Two calls in one shorthand give a padding that scales on both axes.
.section {
padding: fluid(16px, 64px) fluid(8px, 40px);
}.section {
padding: clamp(1rem, 0rem + 5vw, 4rem) clamp(0.5rem, -0.1667rem + 3.3333vw, 2.5rem);
}A grid gap that opens up on wider screens.
.stack {
gap: fluid(0.5rem, 2rem);
}.stack {
gap: clamp(0.5rem, 0rem + 2.5vw, 2rem);
}What it refuses
Arguments are checked, so a wrong value stops the build with a message instead of quietly producing a value that never changes.
.title {
font-size: fluid(16px, 24px, 1280px, 320px);
}Error: `fluid` needs $min-viewport to be smaller than $max-viewport, and was given 1280px and 320px..title {
font-size: fluid(40px, 20px);
}Error: `fluid` needs $min to be no larger than $max, and was given 40px and 20px. clamp() would return the floor at every width, so the value would never grow..title {
font-size: fluid(16, 24);
}Error: `16` is not a valid $min for `fluid`. Pass a length in px or rem..title {
font-size: fluid(1em, 2em);
}Error: `1em` is not a valid $min for `fluid`. Pass a length in px or rem, not em.