css-slope-clamp

Precise slope-based CSS clamp() generation for fluid and reverse-fluid responsive design.

css-slope-clamp is a small, focused TypeScript/JavaScript utility that helps you generate mathematically correct CSS clamp() expressions based on viewport slope calculations.

It is inspired by—and faithfully implements—the linear interpolation model described in the CSS-Tricks article:

Linearly Scale Font Size with CSS clamp() Based on the Viewport
https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/

In addition to the classic forward-scaling clamp, this package introduces reverse slope-based clamps, enabling layouts where spacing or sizing increases as the viewport gets smaller—a common real-world design requirement.

✨ Features

• ✅ Generate pixel-perfect CSS clamp() values
• ✅ Supports forward scaling (slamp) and reverse scaling (rslamp)
• ✅ Outputs clean, production-grade calc() expressions
• ✅ Works with px or rem
• ✅ Fully typed (TypeScript)
• ✅ ESM-first, tree-shakeable, zero runtime dependencies
• ✅ Ideal for design tokens, CSS-in-JS, or build-time generation

📦 Installation

npm install css-slope-clamp

🚀 Quick Example

import { slamp, rslamp } from "css-slope-clamp";

Forward scaling (classic fluid sizing)

const heading = slamp({
  minViewport: 375,
  maxViewport: 768,
  minSize: 16,
  maxSize: 32,
});

console.log(heading.clampValue);
// clamp(16px, calc(4.076vw + 0.71px), 32px)

h1 {
  font-size: clamp(16px, calc(4.076vw + 0.71px), 32px);
}

Reverse scaling (grows on smaller screens)

Perfect for padding, margins, and layout spacing.

const sectionPadding = rslamp({
  minViewport: 375, // mobile
  maxViewport: 768, // desktop
  minSize: 64, // value at desktop
  maxSize: 105, // value at mobile
  unit: "rem",
  rootFontSize: 16,
});

console.log(sectionPadding.clampValue);
// clamp(4rem, calc(-10.4331vw + 9.0078rem), 6.5625rem)

.section {
  padding-top: clamp(4rem, calc(-10.4331vw + 9.0078rem), 6.5625rem);
}

🧠 Core Concepts

What is slope-based clamping?

The idea is to model responsive sizing as a linear equation:

y = m·x + b

Where:

• x = viewport width
• m = slope (rate of change)
• b = intercept

CSS clamp() then bounds this function between a minimum and maximum value:

clamp(min, preferred, max)

This package automates the math and formatting so you get:

• correct interpolation
• predictable behavior
• clean, readable CSS output

🧩 API Reference

slamp(params)

Forward scaling
Value increases as viewport width increases.

slamp({
  minViewport: number; // px
  maxViewport: number; // px
  minSize: number;     // px at minViewport
  maxSize: number;     // px at maxViewport
  unit?: "px" | "rem"; // default: "px"
  rootFontSize?: number; // default: 16 (for rem)
  digits?: number;     // decimal precision, default: 4
});

rslamp(params)

Reverse scaling
Value increases as viewport width decreases.

rslamp({
  minViewport: number; // px (mobile)
  maxViewport: number; // px (desktop)
  minSize: number;     // px at maxViewport
  maxSize: number;     // px at minViewport
  unit?: "px" | "rem";
  rootFontSize?: number;
  digits?: number;
});

Return Value

Both functions return:

{
  clampValue: string; // Full CSS clamp(...)
  preferredValue: string; // calc(...) middle term
  slopeVW: number; // vw coefficient
  intercept: number; // in output unit
  minValue: number; // final min
  maxValue: number; // final max
}

This makes the output ideal for:

• design token pipelines
• debugging
• documentation
• static CSS generation

🧪 TypeScript & Testing

• Written in strict TypeScript
• Emits .d.ts definitions
• Fully tested with Jest
• ESM-compatible (type: "module")

🛠 Use Cases

• Fluid typography systems
• Responsive spacing tokens
• CSS-in-JS style generation
• Design-system tooling
• Build-time CSS generation
• Replacing Sass-only helpers like slamp()

📄 License

MIT © Ammar Taha Mohamedy

🙌 Acknowledgements

• CSS-Tricks for the original linear clamp concept
  https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/