Skip to content
A simple tool for sensibly working with css measurements in javascript.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
tests
.gitignore
LICENSE.md
README.md
index.js
package.json

README.md

scale-unit

A module for scaling measurements in javascript.

Install

$ npm install scale-unit 

Usage

const scale = require('scale-unit');

// define a size
const baseSize = scale('em', 1.5);

// scale the size
const headerSize = scale(baseSize, 2);

// unwrap the size 
const styles = { fontSize: baseSize() }; // 1.5em
const headerStyles = { fontSize: headerSize() }; // 3em

// unwrap and scale the size
const bigHeaderStyles = { fontSize: headerSize(1.5) }; // 4.5em

Defining a scale

scale(unit, multiplier)

Returns an measurement function who's value and unit label are tracked seperately.

const wrapperWidth = scale('em', 60);
const textWidth = scale(wrapperWidth, 0.75);

unit String or Scale. Optional. A string representing the measurement unit or another scale function.

size Number. Optional. A multiplier to scale the input unit, set to 1 if omitted.

Unwrapping a measurement

A measurement is a function that can be unwrapped into a string that can used with a tool like Radium.

measurement(size)

size Number. Optional. A multiplier to scale the input unit, set to 1 if omitted.

const wrapper = { maxWidth: wrapperWidth() } // 60em
const textWrapper = { maxWidth: textWidth() } // 45em
const textWrapper = { maxWidth: wrapperWidth(0.75) } // 45em

Sugars

scale(unit)

const em = scale('em'); // 1em
const fiveEm = em(5); // 5em
const fiveEm = scale(em, 5); // 5em

scale(size)

const ten = scale(10); // 10
const hundred = scale(ten, 10); // 100

License

MIT

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.