Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including postcss-sequence with all npm packages installed. Try it out:

var postcssSequence = require("postcss-sequence")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

postcss-sequence v1.1.3

A PostCSS plugin for managing consistent scale, proportion and vertical rhythm using custom units based on numerical sequences.

PostCSS Sequence PostCSS Logo

NPM Version Linux Build Status Windows Build Status Gitter Chat

A PostCSS plugin for managing consistent scale, proportion and vertical rhythm using custom units based on numerical sequences.

Usage

Create custom units by defining an abbreviation and the pattern to generate the nth index from a numerical sequence.

units: [
    {
        abbr: 'gu',
        pattern: 'n * 4',
    }
]

Example:

div {
    padding: 4gu;
}

Outputs:

div {
    padding: 16px;
}

Setup

npm install postcss-sequence --save-dev

Define one or more units by passing them to the plugin as options:

units: [
    {
        abbr: 'gu',
        pattern: 'n * 4',
    }
]

Options

KeyDescription
abbrA string with the abbreviation of the name for your unit. For more complex units you can use a number identifier like so <g> where g is the variable used in your pattern. If you require something unique you can also use a regex.
positionPosition of where the abbreviation is placed. To the end by default. Choose from 'start', 'middle' or 'end'.
patternPattern used to generate the n index from a numerical sequence. If using a regex or middle position affix you can use lowercase letters starting from a to reference groups in in the order they were captured. See example below.
outputOptional,'px' used by default.

Examples

Grid units

A grid unit based on a grid of 4px

units: [
    {
        abbr: 'gu',
        pattern: 'n * 4',
    }
]

Example:

div {
    padding: 4gu;
    margin: 4gu 2gu;
}

Outputs:

div {
    padding: 16px;
    margin: 16px 8px;
}

Font scale

Setting the font based on a scale using golden ratio.

units: [
    {
        abbr: 'x',
        pattern: 'round (16 * 1.618 ^ n) / 16',
        output: 'rem'
    }
]

Example:

h1 {
    font-size: 4x;
}
h2 {
    font-size: 3x;
}
h3 {
    font-size: 2x;
}

Output:

h1 {
    font-size: 6.875rem;
}
h2 {
    font-size: 4.25rem;
}
h3 {
    font-size: 2.625rem;
}

Feet and inches

Writing in feet and inches.

units: [
    {
        abbr: /([0-9]+)\'([0-9]+)\"/,
        pattern: '((a * 12) + b ) * 10',
        output: 'px'
    }
]

Example:

div {
    width: 4'2";
}

Outputs:

div {
    width: 500px;
}

Fractions

Using fractions for percentages.

units: [
    {
        abbr: '<n>/<d>',
        pattern: 'n / d',
        output: '%'
    }
]

Example:

div {
    width: 1/4;
}

Outputs:

div {
    width: 25%;
}

Automatic rounding

Automatically round pixels to the nearest ten pixels.

units: [
    {
        abbr: 'px',
        pattern: 'round (n / 10) * 10'
    }]

Example:

div {
    width: 26px;
}

Outputs:

div {
    width: 30px;
}

Fibonacci number

Selecting a number from the fibonacci sequence.

units: [
    {
        abbr: 'f',
        position: 'start',
        pattern: 'floor (phi ^ n / sqrt 5 + 0.5)'
    }
]

Example:

div {
    width: f6;
    padding: f3 f4;
}

Outputs:

div {
    font-size: 24px;
    padding: 4.8px;
}
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free