DEV Community

Davide Marchet
Davide Marchet

Posted on

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:

Install the package via npm:

npm i scss-slamp
Enter fullscreen mode Exit fullscreen mode

and include it using an @import statement:

@import '~scss-slamp';

/// @import 'node_modules/scss-slamp/dist/index.scss';
/// [...]
Enter fullscreen mode Exit fullscreen mode

Options

The library comes with three default options:

$defaults_slamp_options: (
  "root-size": 16px, 
  "min": 480px, 
  "max": 1600px
);
Enter fullscreen mode Exit fullscreen mode
  • 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
);
Enter fullscreen mode Exit fullscreen mode

Usage

selector{
  rule: slamp(minSize, maxSize);
  rule: slamp(minSize, maxSize, minLimit, maxLimit);
}
Enter fullscreen mode Exit fullscreen mode

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])
}
*/
Enter fullscreen mode Exit fullscreen mode

โ— 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);
}
*/
Enter fullscreen mode Exit fullscreen mode

Thanks

Special thanks for the inspiration and snippets to:

Contribute

Feel free to fork and increase this repo!

And let me know if you find it useful!

Enjoy ๐Ÿ‘Š

Top comments (1)

Collapse
 
pisandelli profile image
Pedro Pisandelli • Edited

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.