Q
Version: 0.11.6
Source on Github

Vertical Rhythm

Create a vertical rhythm for your site by setting the $base-font-size and $base-line-height variables and then including the establish-baseline mixin at the root of your document.

Manage the vertical rhythm using the other vertical-rhythm mixins to adjust font and line-height values, extra vertical whitespace, borders, etc.

This file can be imported using: @import "compass/typography/vertical_rhythm"

Imports

  1. Grid Background

Configurable Variables help

16px

The base font size

24px

The base line height is the basic unit of line hightness.

solid

set the default border style for rhythm borders

true

Set to false if you want to use absolute pixes in sizing your typography.

if($relative-font-sizing, 1em, $base-font-size)

$base-font-size but in your output unit of choice. Defaults to 1em when $relative-font-sizing

Constants

16px / 100%

The IE font ratio is a fact of life. Deal with it.

2px

Ensure there is at least this many pixels of vertical padding above and below the text.

$base-line-height / $base-font-size * $font-unit

The basic unit of font rhythm

($base-line-height - $base-font-size) * $font-unit / $base-font-size

The leader is the amount of whitespace in a line. It might be useful in your calculations

$base-leader / 2

The half-leader is the amount of whitespace above and below a line. It might be useful in your calculations

Functions

view source 

@function relative-unit($number)
  @return unit($number) == "%" or unit($number) == "em" or unit($number) == "rem"

@function relative-unit($number) {
  @return unit($number) == "%" or unit($number) == "em" or unit($number) == "rem"; }

True if a number has a relative unit

view source 

@function absolute-unit($number)
  @return not (relative-unit($number) or unitless($number))

@function absolute-unit($number) {
  @return not (relative-unit($number) or unitless($number)); }

True if a number has an absolute unit

view source 

@function rhythm($lines: 1, $font-size: $base-font-size)
  @if not $relative-font-sizing and $font-size != $base-font-size
    @warn "$relative-font-sizing is false but a relative font size was passed to the rhythm function"
  $rhythm: $font-unit * $lines * $base-line-height / $font-size
  @return $rhythm

@function rhythm($lines: 1, $font-size: $base-font-size) {
  @if not $relative-font-sizing and $font-size != $base-font-size {
    @warn "$relative-font-sizing is false but a relative font size was passed to the rhythm function"; }
  $rhythm: $font-unit * $lines * $base-line-height / $font-size;
  @return $rhythm; }

Calculate rhythm units

view source 

@function lines-for-font-size($font-size)
  $lines: ceil($font-size / $base-line-height)
  @if $lines * $base-line-height - $font-size 

@function lines-for-font-size($font-size) {
  $lines: ceil($font-size / $base-line-height);
  @if $lines * $base-line-height - $font-size

Mixins

view source 

=establish-baseline($font-size: $base-font-size)
  body
    font-size: $font-size / $ie-font-ratio
    +adjust-leading-to(1, if($relative-font-sizing, $font-size, $base-font-size))
  html>body
    font-size: $font-size

@mixin establish-baseline($font-size: $base-font-size) {
  body {
    font-size: $font-size / $ie-font-ratio;
    @include adjust-leading-to(1, if($relative-font-sizing, $font-size, $base-font-size)); }
  html>body {
    font-size: $font-size; } }

Establishes a font baseline for the given font-size in pixels

view source 

=debug-vertical-alignment($img: false)
  @if $img
    background: image-url($img)
  @else
    +baseline-grid-background($base-rhythm-unit)

@mixin debug-vertical-alignment($img: false) {
  @if $img {
    background: image-url($img); }
  @else {
    @include baseline-grid-background($base-rhythm-unit); } }

Show a background image that can be used to debug your alignments. include the $img argument if you would rather use your own image than the Compass default gradient image.

view source 

=adjust-font-size-to($to-size, $lines: lines-for-font-size($to-size), $from-size: $base-font-size)
  @if not $relative-font-sizing and $from-size != $base-font-size
    @warn "$relative-font-sizing is false but a relative font size was passed to adjust-font-size-to"
  font-size: $font-unit * $to-size / $from-size
  +adjust-leading-to($lines, if($relative-font-sizing, $to-size, $base-font-size))

@mixin adjust-font-size-to($to-size, $lines: lines-for-font-size($to-size), $from-size: $base-font-size) {
  @if not $relative-font-sizing and $from-size != $base-font-size {
    @warn "$relative-font-sizing is false but a relative font size was passed to adjust-font-size-to"; }
  font-size: $font-unit * $to-size / $from-size;
  @include adjust-leading-to($lines, if($relative-font-sizing, $to-size, $base-font-size)); }

Adjust a block to have a different font size and leading to maintain the rhythm. $lines is a number that is how many times the baseline rhythm this font size should use up. Does not have to be an integer, but it defaults to the smallest integer that is large enough to fit the font. Use $from_size to adjust from a non-base font-size.

view source 

=adjust-leading-to($lines, $font-size: $base-font-size)
  @if not $relative-font-sizing and $font-size != $base-font-size
    @warn "$relative-font-sizing is false but a relative font size was passed to adjust-leading-to"
  line-height: $font-unit * $lines * $base-line-height / $font-size

@mixin adjust-leading-to($lines, $font-size: $base-font-size) {
  @if not $relative-font-sizing and $font-size != $base-font-size {
    @warn "$relative-font-sizing is false but a relative font size was passed to adjust-leading-to"; }
  line-height: $font-unit * $lines * $base-line-height / $font-size; }
view source 

=leader($lines: 1, $font-size: $base-font-size, $property: margin)
  $leader: rhythm($lines, $font-size)
  @if unit($leader) == px
    $leader: floor($leader)
  #{$property}-top: $leader

@mixin leader($lines: 1, $font-size: $base-font-size, $property: margin) {
  $leader: rhythm($lines, $font-size);
  @if unit($leader) == px {
    $leader: floor($leader); }
  #{$property}-top: $leader; }

Apply leading whitespace

view source 

=padding-leader($lines: 1, $font-size: $base-font-size)
  +leader($lines, $font-size, padding)

@mixin padding-leader($lines: 1, $font-size: $base-font-size) {
  @include leader($lines, $font-size, padding); }

Apply leading whitespace as padding

view source 

=margin-leader($lines: 1, $font-size: $base-font-size)
  +leader($lines, $font-size, margin)

@mixin margin-leader($lines: 1, $font-size: $base-font-size) {
  @include leader($lines, $font-size, margin); }

Apply leading whitespace as margin

view source 

=trailer($lines: 1, $font-size: $base-font-size, $property: margin)
  $leader: rhythm($lines, $font-size)
  @if unit($leader) == px
    $leader: ceil($leader)
  #{$property}-bottom: $leader

@mixin trailer($lines: 1, $font-size: $base-font-size, $property: margin) {
  $leader: rhythm($lines, $font-size);
  @if unit($leader) == px {
    $leader: ceil($leader); }
  #{$property}-bottom: $leader; }

Apply trailing whitespace

view source 

=padding-trailer($lines: 1, $font-size: $base-font-size)
  +trailer($lines, $font-size, padding)

@mixin padding-trailer($lines: 1, $font-size: $base-font-size) {
  @include trailer($lines, $font-size, padding); }

Apply trailing whitespace as padding

view source 

=margin-trailer($lines: 1, $font-size: $base-font-size)
  +trailer($lines, $font-size, margin)

@mixin margin-trailer($lines: 1, $font-size: $base-font-size) {
  @include trailer($lines, $font-size, margin); }

Apply trailing whitespace as margin

view source 

=rhythm($leader: 0, $padding-leader: 0, $padding-trailer: 0, $trailer: 0, $font-size: $base-font-size)
  +leader($leader, $font-size)
  +padding-leader($padding-leader, $font-size)
  +padding-trailer($padding-trailer, $font-size)
  +trailer($trailer, $font-size)

@mixin rhythm($leader: 0, $padding-leader: 0, $padding-trailer: 0, $trailer: 0, $font-size: $base-font-size) {
  @include leader($leader, $font-size);
  @include padding-leader($padding-leader, $font-size);
  @include padding-trailer($padding-trailer, $font-size);
  @include trailer($trailer, $font-size); }

Whitespace application shortcut Apply top margin/padding + bottom padding/margin

view source 

=apply-side-rhythm-border($side, $width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style)
  @if not $relative-font-sizing and $font-size != $base-font-size
    @warn "$relative-font-sizing is false but a relative font size was passed to apply-side-rhythm-border"
  border-#{$side}:
    style: $border-style
    width: $font-unit * $width / $font-size
  padding-#{$side}: $font-unit / $font-size * ($lines * $base-line-height - $width)

@mixin apply-side-rhythm-border($side, $width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
  @if not $relative-font-sizing and $font-size != $base-font-size {
    @warn "$relative-font-sizing is false but a relative font size was passed to apply-side-rhythm-border"; }
  border-#{$side}: {
    style: $border-style;
    width: $font-unit * $width / $font-size; };
  padding-#{$side}: $font-unit / $font-size * ($lines * $base-line-height - $width); }

Apply a border width to any side without destroying the vertical rhythm. The available space ($lines) must be greater than the width of your border.

view source 

=rhythm-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style)
  @if not $relative-font-sizing and $font-size != $base-font-size
    @warn "$relative-font-sizing is false but a relative font size was passed to rhythm-borders"
  border:
    style: $border-style
    width: $font-unit * $width / $font-size
  padding: $font-unit / $font-size * ($lines * $base-line-height - $width)

@mixin rhythm-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
  @if not $relative-font-sizing and $font-size != $base-font-size {
    @warn "$relative-font-sizing is false but a relative font size was passed to rhythm-borders"; }
  border: {
    style: $border-style;
    width: $font-unit * $width / $font-size; };
  padding: $font-unit / $font-size * ($lines * $base-line-height - $width); }

Aplly rhythm borders equally to all sides

view source 

=leading-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style)
  +apply-side-rhythm-border(top, $width, $lines, $font-size, $border-style)

@mixin leading-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
  @include apply-side-rhythm-border(top, $width, $lines, $font-size, $border-style); }

Apply a leading rhythm border

view source 

=trailing-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style)
  +apply-side-rhythm-border(bottom, $width, $lines, $font-size, $border-style)

@mixin trailing-border($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
  @include apply-side-rhythm-border(bottom, $width, $lines, $font-size, $border-style); }

Apply a trailing rhythm border

view source 

=horizontal-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style)
  +leading-border($width, $lines, $font-size, $border-style)
  +trailing-border($width, $lines, $font-size, $border-style)

@mixin horizontal-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
  @include leading-border($width, $lines, $font-size, $border-style);
  @include trailing-border($width, $lines, $font-size, $border-style); }

Apply both leading and trailing rhythm borders

view source 

=h-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style)
  +horizontal-borders($width, $lines, $font-size, $border-style)

@mixin h-borders($width: 1px, $lines: 1, $font-size: $base-font-size, $border-style: $default-rhythm-border-style) {
  @include horizontal-borders($width, $lines, $font-size, $border-style); }