Package Exports

sass-rhythm

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (sass-rhythm) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

sass-rhythm

Sass helper functions for maintaining a vertical rhythm in your frontend design.

Install

yarn add sass-rhythm

npm install --save-dev sass-rhythm

Usage

// Optionally change these variables
$sass-rhythm: 4;
$sass-rhythm-root-font-size: 16px;

// Include this library
@import "~sass-rhythm";

Add the following to your base.scss and play around with this to satisfy your needs.

html {
  font-size: sass-rhythm-relative-root-font-size();
}

body {
  line-height: sass-rhythm(3);
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 sass-rhythm(2);
}

h1 {
  line-height: sass-rhythm(6);
}
h2 {
  line-height: sass-rhythm(5);
}
h3 {
  line-height: sass-rhythm(4);
}

Options

The sass-rhythm function excepts two optional variables:

Variable	Default	Description
`$multiplier`	1	This is how many times the rhythm is applied
`$offset-pixels`	0	This is how many pixels will be added or subtracted from the value