Files: ./scss/constants/spacing

Vertical Rhythm

Background

One of the issues we often enounter when working with a base grid is setting up the typography. Web typography is not consistent across browsers and quite hard to make pixel perfect. This is where 'Vertical Rhythm' comes to rescue. Vertical Rhythm, originated from print typography, is to make the vertical spaces between elements consistent by repeated patterns. This is how we achive it:

How-to

1. Define a baseline unit which matches our base font-size. Since our base font-size is 14px, 7px is our baseline unit (imagine a vertical grid where each row is 7px tall).
2. Make sure that padding, margin, line-height and (min/max/)heights are dividable by 7.
3. Only use these pre-defined values:

$base-unit: 7px;
$base-rhythm: 3;

Usage

For padding, margin or height, choose the desired rhythm (1, 2, 10, 20 etc) and pass into the rhythm() function. Default rhythm is 3 (21px)

EXAMPLE:

rhythm(1) (1 * 7 = 7px)

rhythm(5) (5 * 7 = 35px)

rhythm(12) (12 * 7 = 84px)

Fixed spacing sizes

The following sizes have been decided by UX and should be used everywhere on the site to stay consistent:

Handling borders (top/bottom)

Border (top/bottom) combined with height

When an element has a horizontal border (top or bottom) combined with height: no worries. Because we use box-sizing the browser will include the border-width in height and hence calculate it correctly.

I.e height: 35px, border-top: 1px, border-bottom: 1px will result in a total height of 35px.

Border (top/bottom) combined with padding

When an element has a vertical border (top/bottom) combined with padding, the border-width should be passed in as offset like so: rhythm(5, $offset: 2px), where 2px in this case equals the border-top (1px) + border-bottom (1px).

.box {
  border-top: 1px solid color(danger);
  border-bottom: 1px solid color(danger);
  padding: rhythm(2) 0;
}

.box {
  border-top: 1px solid color(success);
  border-bottom: 1px solid color(success);
  padding-top: rhythm(2, $offset: 1px);
  padding-bottom: rhythm(2, $offset: 1px);
}

Not happy with the line-height?

Should you need to have a greater line-height than the automatically calculated one, it's possible by doing the following:

$allow-same-line-height-as-size: true/false

.element {
    @include set-size('paris');
    // This is default: 14px font-size, 21px line-height
}

.element2 {
    @include set-size('paris', $allow-same-line-height-as-size: true);
    // Will result in 14px font-size, 14px line-height
}

$lines: NUMBER

.element {
    @include set-size('paris', $lines: 4);
    // Will result in 14px font-size, 28px line-height (4 lines x 7 = 28px)
}