Skip to content
Manyone Library

Preset Clamp

UnoCSS preset for viewport-scaled responsive utility classes for CSS number properties, enabling a fluid clamp-based scaling approach.

Source Code

Installation

Since our @manyone packages are private on npmjs you must authenticate to install it with npm login.

If you’re not part of the Manyone organisation on npmjs.com, reach out to Caroline, Patrik or Lau.

pnpm add @manyone/unocss

Configuration

uno.config.ts
import { defineConfig } from 'unocss';
import { presetClamp } from '@manyone/unocss';


export default defineConfig({
  presets: [
    presetClamp(),
    // ...other presets
  ],
});

Usage

To get an overview of all clampable properties, please refer to the source code.

Basic usage

The classes are named using the following pattern: clamp-{property}-{min}-{max}.

Values are defined as unoss units (default: 1 unit = 4px).

<div class="clamp-p-4-6">
  Padding scales between 4 units (mobile) and 6 units (desktop)
</div>
<div class="clamp-w-40-60">
  Width scales between 40 units (mobile) and 60 units (desktop)
</div>
<div class="clamp-mt-40-60">
  Margin top scales between 40 units (mobile) and 60 units (desktop)
</div>

With viewport bounds

Optionally you can specify the minimum and maximum viewport width in pixels using the following pattern: clamp-{property}-{min}-{max}-{minView}-{maxView}

<div class="clamp-p-4-6-320-1440">
  Padding scales between 4 units (320px width) and 6 units (1440px width)
</div>

Options

minView

  • Type: number
  • Default: 320

Minimum viewport width in pixels.

maxView

  • Type: number
  • Default: 1440

Maximum viewport width in pixels.

rootFontSize

  • Type: number
  • Default: 16

Root font size in pixels.

endless

  • Type: boolean
  • Default: true

Allow scaling beyond maximum value. Everything then keeps scaling up above max-view size based on the scale factor.

scaleFactor

  • Type: number
  • Default: 0.8

Scaling factor above the maximum viewport. When set to 1, the scaling will continue with the same rate as it did within the viewport bounds. When set to 0.8, the scaling will slow down by 20% compared to the speed it scaled within the viewport bounds.