Gerillass 2.0.0 is out. It renames every utility function and replaces two mixins with one, so read the migration guide before you upgrade.
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.