clamp()
is one of the most useful css function for responsive and adaptive layouts!
😟 But it's hard to define the preferred value used as long as the result is between the minimum and maximum values.
📐 By adding the slope of linear functions to clamp()
we enhance the function with a little bit of mathematics!
🚀 This is how slamp()
works: Slope + cLAMP = SLAMP.
Install the package via npm:
npm i scss-slamp
and include it using an @import statement:
@import '~scss-slamp';
/// @import 'node_modules/scss-slamp/dist/index.scss';
/// [...]
The library comes with three default options:
$defaults_slamp_options: (
"root-size": 16px,
"min": 480px,
"max": 1600px
);
root-size
- represents the calculation base forrem
expressed inpx
;min
- the minimun viewport width (px, em, rem, vw, % [...]);max
- the maximum viewport width (px, em, rem, vw, % [...]).
Using the $slamp_options
variable in your scss stylesheet you can override each default:
$slamp_options: (
"root-size": 10px,
"min": 768px,
"max": 1920px
);
selector{
rule: slamp(minSize, maxSize);
rule: slamp(minSize, maxSize, minLimit, maxLimit);
}
The function takes as parameters:
$minSize
- required - the lower bound (px, em, rem, vw, % [...]);$maxSize
- required - the upper bound (px, em, rem, vw, % [...]);$minLimit
- optional - override the default minimum viewport width (px, em, rem, vw, % [...]);$maxLimit
- optional - override the default maximum viewport width (px, em, rem, vw, % [...]).
It returns a clamp
statement where everything in between the preferred limits changes in linear fashion.
/*
selector{
rule: clamp(minSize[rem], intersection[rem] + slope * 100vw, maxSize[rem])
}
*/
❗ The generated arguments of the clamp
statement are expressed in rem
because it's relative to the root avoiding compounding issues.
.my-class{
padding: slamp(25px, 50px) slamp(50px, 75px);
}
#id{
width: slamp(5vw, 15vw);
}
h2{
font-size: slamp(1.25rem, 2.75rem, 768px, 1920px); // default viewport limits are overrided
}
/*
.my-class {
padding: clamp(1.5625 rem, 0.8928571429 rem + 2.2321428571 vw, 3.125 rem)
clamp(3.125 rem, 2.4553571429 rem + 2.2321428571 vw, 4.6875 rem);
}
#id{
width: clamp(3.75rem, 0.5357142857rem + 10.7142857143vw, 11.25rem);
}
h2 {
font-size: clamp(1.25rem, 0.25rem + 2.0833333333vw, 2.75rem);
}
*/
Special thanks for the inspiration and snippets to:
- Pedro Rodriguez the author of this wonderful and detailed article https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/ who inspire me to create this function;
- Jakob Eriksen the author of this fundamental library https://github.com/black7375/sass-unitconverter, the backbone of this function.
Feel free to fork and increase this repo!
And let me know if you find it useful!
- Airness Custom 3d configurator https://custom.airness.eu/
- Alé Bike Wear US ecommerce https://www.alebikewear.com/
Enjoy 👊