postcss-sequence v1.1.3

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 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

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;
}