poly-fluid-sizing-stylus v1.0.2
Poly Fluid Sizing for Stylus
Stylus mixin for linear interpolation between multiple values across multiple breakpoints using CSS calc() and viewport units. Adaption of the SASS mixin by Jakobud/poly-fluid-sizing.
Usage
Poly Fluid Sizing is a stylus mixin that gives you precise control over CSS measurements, like the font-size
across multiple breakpoints. It allows you to set the desired scale for every breakpoint and applies linear interpolation between them using calc()
. It uses some basic dark math behind the scenes. You don't need to know the math or understand it to use this mixin.
// Import mixin
@require 'poly-fluid-sizing-stylus'
// Depending on your setup, this might also be something like: `@import '~poly-fluid-sizing-stylus'`
h1
poly-fluid-sizing('font-size', {'30rem': 2rem, '50rem': 3rem, '60rem': 4rem})
This will yield the following CSS code (without the comments):
h1 {
/* The minimum font-size */
font-size: 2rem;
}
@media (min-width: 30rem) {
h1 {
/* Interpolating the font-size between 2rem @ 30rem and 3rem @ 50rem viewport width */
font-size: calc(5vw + 0.5rem);
}
}
@media (min-width: 50rem) {
h1 {
/* Interpolating the font-size between 3rem @ 50rem and 4rem @ 60rem viewport width */
font-size: calc(10vw - 2rem);
}
}
@media (min-width: 60rem) {
/* The maximum font-size */
h1 {
font-size: 4rem;
}
}
It can do more then font-size
Using Poly Fluid Sizing on the font-size
property is an obvious use case. It can however be used
for any other numeric CSS property:
main
poly-fluid-sizing('padding', {'30rem': 1rem, '50rem': 3rem})
Why not CSS min/max/clamp?
The vanilla CSS functions min()
, max()
and clamp()
can be used to achieve a very similar
effect to that of this mixin. If you want to know how, I recommend this
article by CSS-Tricks.com.
Advantages over vanilla CSS
- Browser Support: IE/Edge currently (Edge v18) still doesn`t support min/max/clamp. Firefox > v74, Chrome > v78. See here: https://caniuse.com/#feat=mdn-css_types_min
- Multiple breakpoints: This mixin is able to support multiple breakpoints. Although, in most cases, you could probably do without that.
- Easy to configure: The vanilla CSS solution using
clamp()
is not to hard to use, but the syntax of this mixin is a little easier to parse for our brains.
Disadvantages compared to vanilla CSS and limitations
- Verbosity: This mixin generates more code compared to vanilla CSS.
- You can't mix units: Because the interpolation is calculated at build time, you can use
various units like px or rem, but you can't mix them. For example, you can't set a
2em
font-size
for1000px
viewport width. This is a logical and mathematical limitation. - One property at a time: You can choose any numeric CSS property that you like, but you can
only ever use one at a time. That means, you can use
padding
, but if you only want the sizing to be applied topadding-left
andpadding-right
, you have to call the mixin twice.
Credits
This mixin is a stylus adaption of the original, wonderful SASS mixin by https://github.com/Jakobud. You can learn more about this technique from the author himself on Smashing Magazine.