Skip to content

Enhance the css clamp() function with a little bit of mathematics.

License

Notifications You must be signed in to change notification settings

DidoMarchet/scss-slamp

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

55 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

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:

Contribute

Feel free to fork and increase this repo!

And let me know if you find it useful!

Projects using slamp

Enjoy 👊

About

Enhance the css clamp() function with a little bit of mathematics.

Topics

Resources

License

Stars

Watchers

Forks