PostCSS Responsive Fluid Modular Scale

PostCSS plugin that applies responsive, fluid font-sizes that uses the modular scale.

This uses modularscale-js to create a ramp of font-sizes that adds fluid typography between breakpoints, ensuring responsiveness.

For more information on how it is possible, check out the article by Mike Riethmuller on responsive typography, where we use calc() to automatically resize the font-size depending on the viewport width.

NOTE: This requires PostCSS 8+.

In postcss.config.js:

module.exports = {
  plugins: [
+   require('postcss-responsive-fluid-modular-scale')({
+     fontSize: 18px
+   }),
  ]
}

Input CSS:

.foo {
    /* Input example */
    @ms 0;
}

Output:

.foo {
  /* Output example */
  font-size: 16px;
}

Usage

Step 1: Install plugin:

npm install --save-dev postcss postcss-responsive-fluid-modular-scale

Step 2: Check your project for existed PostCSS config: postcss.config.js in the project root, "postcss" section in package.json or postcss in bundle config.

If you do not use PostCSS, add it according to official docs and set this plugin in settings.

Step 3: Add the plugin to plugins list:

module.exports = {
  plugins: [
+   require('postcss-responsive-fluid-modular-scale')({
+      fontSize: 18px
+    }),
    require('autoprefixer')
  ]
}

Options

fontSize

Set the base font size. Tied with fontUnit.

Defaults to 16.

fontUnit

Sets the global font units to set. You can't change this at the per-breakpoint level.

Defaults to "px".

ratio

Sets the ratio to determine the scaling of the font sizes, according to modularscale.

Defaults to 1.125.

scales

Sets the ramp of the font sizing, represented by a map of the scale keys with their corresponding number values.

The scale value aligns with the font size set at a given breakpoint. For example, by default, adding @ms 0 as a CSS rule declaration returns font-size: 16px, while @ms 1 returns font-size: 18px, and so on.

Default values:

{
  "6": 6,
  "5": 5,
  "4": 4,
  "3": 3,
  "2": 2,
  "1": 1,
  "0": 0,
  "-1": -1,
}

Adding breakpoints

If you wish, you may choose to have different parameters set at certain breakpoints, like:

module.exports = {
  plugins: [
+   require('postcss-responsive-fluid-modular-scale')({
+     "screen-sm-min": {
+       ratio: 1.2,
+     },
+     "screen-lg-min": {
+       fontSize: 1.25,
+     }
+   }),
  ]
}

You may use any breakpoint name except default, as that is reserved for the default values you set from fontSize, fontUnit, and ratio.

You cannot change the fontUnit and scales value per-breakpoint. The default values will be used instead.

Dependencies

It uses modularscale-js, lodash, and postcss to make this happen. Thank you!