slamp(): enhance the css clamp() function with a little bit of mathematics.

(Original repo and files https://github.com/DidoMarchet/scss-slamp)

You won't have to make up clamp “preferred value“ anymore because:

☺️ 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.

Table of content:

• Options
• Usage
• Example
• Thanks

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';
/// [...]

Options

The library comes with three default options:

$defaults_slamp_options: (
  "root-size": 16px, 
  "min": 480px, 
  "max": 1600px
);

• root-size - represents the calculation base for rem expressed in px;
• 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
);

Usage

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.

Example

.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);
}
*/

Thanks

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.

Contribute

Feel free to fork and increase this repo!

And let me know if you find it useful!

Enjoy 👊

Comments

[Pedro Pisandelli]

The problem is the Root Size. We are eagled to assume that will always be 16px (1rem), but people do change this default value.
So in terms of a11y, this could be a problem. We cannot get the root font size using Sass, or any preprocessors... we can do this using JavaScript after CSS being compiled from SASS. AFAIK, we cannot calculate slope using CSS Custom Properties.

Assuming the root size to 16px (or changing a sass var) is assuming that some people may face a11y problems or at least some weird layout behavior.