responsive-modular-scale.css

Responsive typography using CSS variables

This implements a basic Modular Scale system using CSS variables. Use this with postcss-cssnext and postcss-import.

Installation

# using Yarn
yarn add --exact responsive-modular-scale.css

# using npm
npm install --save --save-exact responsive-modular-scale.css

Usage

Simply import it, assuming you're using postcss-import and postcss-cssnext.

@import 'responsive-modular-scale.css';

To use it, use any of the provided --font-size-# custom property sets:

div {
  @apply --font-size-4;
}

This applies a font-size: 2.0736rem declaration for desktops—the default ratio is 1.2, so that's 1rem * 1.2 ^ 4. For mobiles and tablets, it will use a different ratio (1.15 and 1.17 by default).

div { font-size: 1.74901rem; }

@media (min-width: 481px) {
  div { font-size: 1.87389rem; }
}

@media (min-width: 769px) {
  div { font-size: 2.0736rem; }
}

It gives you the following custom property sets:

• @apply --font-size--1 (negative 1)
• @apply --font-size-0 (applies to base font size)
• @apply --font-size-1
• @apply --font-size-2
• ... @apply --font-size-20

Configuration

It's recommended you include this in a "common" file included in most of your project's files; usually, that's something like variables.css. You can change these ratios and breakpoints like so:

/* variables.css */
@import 'responsive-modular-scale.css';

:root {
  --ms-ratio-sm: 1.15;
  --ms-ratio-md: 1.17;
  --ms-ratio-lg: 1.2;
  --ms-base: 1rem;
  --ms-base-sm: var(--ms-base);
  --ms-base-md: var(--ms-base-sm);
  --ms-base-lg: var(--ms-base-md);
}

@custom-media --ms-viewport-md (width > 480px);
@custom-media --ms-viewport-lg (width > 768px);

/* your-other-styles.css */
@import './variables.css';

body {
  @apply --font-size-0;
}

div {
  @apply --font-size-4;
}

Prior art

• postcss-modular-scale is a PostCSS plugin. However, it doesn't support responsive ratios, and the syntax is non-standard CSS.

• modularscale-sass is, in my opinion, the gold standard modular scale implementation. It only supports Sass, however.

Also see

• PostCSS - CSS transformation tool.
• cssnext - use tomorrow's CSS syntax today.
• cssnext custom properties documentation

Thanks

responsive-modular-scale.css © 2019, Rico Sta. Cruz. Released under the MIT License.
Authored and maintained by Rico Sta. Cruz with help from contributors (list).

ricostacruz.com  ·  GitHub @rstacruz  ·  Twitter @rstacruz