jaredhowland/rhythm

Sass files to create mobile-first responsive websites with vertical rhythm based on modular scales

1.2.0 2016-06-17 21:39 UTC

MIT

• Jared Howland

• sass
• scss
• responsive
• mobile-first
• vertical
• rhythm
• modular-scale

README

Rhythm is a small set of Sass files built to assist in creating mobile-first, responsive websites with vertical rhythm using modular scales.

Installation

Rhythm is available as a Bower package, a Composer package, and as a manual download.

Bower

1. If needed, install Bower
2. Run the following command: bower install jaredhowland/rhythm

Composer

1. If needed, install Composer
2. Add the following to your composer.json file:

"require": {
  "jaredhowland/rhythm": "~1.0"
}

Manual Installation

1. Download the latest .zip file.
2. Extract into your project.

Usage

Import Rhythm

@ import "path/to/rhythm";

Basics

Any time you want to change a font-size, line-height, padding, or margin, use Rhythm instead:

p {
  @include font-size(18px);
}

h2 {
  @include line-height($h2, 2); // Double the computed line height for font-size `h2`
}

h1 {
  @include padding(2 0 1); // Double top padding, no side padding, and single line-height bottom padding
}

ul {
  @include margin(1); // Single line-height margin size around entire element
}

Full details can be found on the documentation site.