Harmony

🎶🙌 A grid system and typography baseline grid based 100% on fluid properties.

View demo ›

Features

• Highly customisable global config for body and grid system metrics, font-sizes and baseline grid-locked line heights
• Modern IE10+ CSS normalization
• Built with vertical-rhythm in mind
• Minimal CSS inheritance chain

Getting started

Install from npm
npm i harmony

Import the harmony mixin files:
@import "harmony/normalize";
@import "harmony/core";

Also included are some helpful grid tools. They are toggled with key shortcuts - see the source file for the details.
To use these tools, import the script in your JS:
import 'harmony/grid-tools';

Contributors:

@aaronmccaffery and @benrogerson.

Created by Simple and Anagraph.