postcss-typescale

postcss-typescale

francoisromain.github.io/postcss-typescale

A PostCSS plugin to set type based on a typographic scale.

---

Examples

@typescale {
  scale: 1.25;
  font-size: 1rem;
  line-height: 1.5rem;
}

.xxl {
  typescale: 3 2;
}

.xl {
  typescale: 2 1.5;
}

.l {
  typescale: 1 1.5;
}

.m {
  typescale: 0 1;
}

.s {
  typescale: -1 1;
}

.xs {
  typescale: -2 0.5;
}

01: input, output, markup, demo

---

Installation

Install the npm package:

$ npm install postcss-typescale --save-dev

Require with PossCSS:

postcss([ require('postcss-typescale') ])

See PostCSS docs to setup with Gulp, Grunt, Webpack, npm scripts…

---

Configuration (optional)

Global settings (and default values):

@typescale ([name]) {
  scale: 1.25;          /* Typographic scale */
  font-size: 1rem;      /* Default font size */
  line-height: 1.5rem;  /* Baseline grid */
}

• name (optional): custom identifier. If no name is provided, the default settings are overwritten.

The line-height can be relative to the font-size if line-height is set to 1 without unit.

---

Usage

typescale: ([name]) [index] ([line-height-fraction])

• name (optional, default = default): string identifier referring to a settings atRule.
• index: positive or negative integer. font-size = font-size * scale ^index.
• line-height-fraction (optional, default = 1): float or fraction. line-height = line-height * line-height-fraction.