DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 967,611 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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 (0)

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›