Skip to content

Helper function for maintaining rhythm in your css

License

Notifications You must be signed in to change notification settings

swisnl/sass-rhythm

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

35 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

sass-rhythm

Build Status Latest Version on NPM Total Downloads Software License Buy us a tree Made by SWIS

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 ❤️ Open Source

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