sass-rhythm

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

ℹ️ Since math.div is only available in Dart Sass >=1.33 and not LibSass or Ruby Sass (see the docs), the newest version of this package is only available for Dart Sass >=1.33. If you need to use this package with older versions of Dart Sass, LibSass or Ruby Sass, feel free to keep using v0.2.0.

Install

npm install --save-dev sass-rhythm

or

yarn add --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

Licence

The MIT License (MIT). Please see License File for more information.

This package is Treeware. If you use it in production, then we ask that you buy the world a tree to thank us for our work. By contributing to the Treeware forest you’ll be creating employment for local families and restoring wildlife habitats.

SWIS :heart: Open Source

SWIS is a web agency from Leiden, the Netherlands. We love working with open source software.