PostCSS Sequence

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 n^th 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

Key	Description
abbr	A 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.
position	Position of where the abbreviation is placed. To the end by default. Choose from 'start', 'middle' or 'end'.
pattern	Pattern 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.
output	Optional,'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;
}