0.3.6 • Published 8 years ago

postcss-modular-scale-unit v0.3.6

Weekly downloads
9
License
MIT
Repository
github
Last release
8 years ago

PostCSS Modular Scale Unit

Build Status npm

This plugin transforms CSS declaration values using a custom msu unit. Instances of this unit are replaced with numbers from a modular scale.

Installation

npm install postcss-modular-scale-unit

Setup

The ratio and base parameters of your modular scale can be supplied with the --modular-scale custom property:

--modular-scale: [ratio] [...bases]

Ratio can be supplied as a:

  • number greater than one (for example, 1.5)
  • fraction greater than one (for example, 3/2)
  • keyword alias (for example, perfectfifth)

The following are all equivalent:

:root {
  --modular-scale: 1.5;
  --modular-scale: 3/2;
  --modular-scale: perfectfifth;
}

Bases are optional, and can be supplied as one or more numbers greater than or equal to one, defaulting to 1 when omitted. The following results in a scale that looks like this:

:root {
  --modular-scale: perfectfifth 1 1.125 1.25;
}

Using the custom unit

With the --modular-scale property set, simply append the custom unit to positive or negative integers that correlate with the steps of your scale. The output will be a plain number.

Input:

:root {
  --modular-scale: 3/2;
}

.Example {
  line-height: 1msu;
  font-size: calc(1msu * 1em);
  width: calc(-1msu * 100%);
}

Output:

.Example {
  line-height: 1.5;
  font-size: calc(1.5 * 1em);
  width: calc(0.667 * 100%);
}

If needed, see postcss-cssnext or postcss-calc for calc() handling.

PostCSS integration

var fs = require('fs')
var postcss = require('postcss')
var modularScaleUnit = require('postcss-modular-scale-unit')

var output = postcss()
  .use(modularScaleUnit())
  .process(fs.readFileSync('input.css', 'utf8'))
  .css

See the PostCSS usage docs docs for more examples.

Inspiration

This plugin is inspired by postcss-modular-scale and postcss-vertical-rhythm. The goal is to provide a way to use modular scale values as if they were native CSS units.

0.3.6

8 years ago

0.3.5

10 years ago

0.3.4

10 years ago

0.3.3

10 years ago

0.3.2

10 years ago

0.3.1

10 years ago

0.3.0

10 years ago

0.2.0

10 years ago

0.1.1

10 years ago

0.1.0

10 years ago