_vertical_rhythm.sass

//** Vertical Rhythm **//
// By Chris Eppstein, with adjustments by Eric Meyer
 
 
// The IE font ratio is a fact of life. Deal with it.
!ie_font_ratio = 16px / 100%
 
// The base line height is the basic unit of line hightness.
!base_line_height ||= 18px
 
// The base font size
!base_font_size ||= 12px
 
// The basic unit of font rhythm
!base_rhythm_unit= !base_line_height / !base_font_size * 1em
 
// The leader is the amount of whitespace in a line.
// It might be useful in your calculations
!base_leader = (!base_line_height - !base_font_size) * 1em / !base_font_size
 
// The half-leader is the amount of whitespace above and below a line.
// It might be useful in your calculations
!base_half_leader = !base_leader / 2
 
// Establishes a font baseline for the given font-size in pixels
=establish-baseline(!font_size = !base_font_size)
  body
    font-size= !font_size / !ie_font_ratio
    +adjust-leading-to(1, !font_size)
  html>body
    font-size= !font_size
 
// Show a background image that can be used to debug your alignments.
=debug-vertical-alignment
  background: url(underline.png)
 
// 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.
=adjust-font-size-to(!to_size, !lines = ceil(!to_size / !base_line_height), !from_size = !base_font_size)
  font-size= 1em * !to_size / !from_size
  +adjust-leading-to(!lines, !to_size)
 
=adjust-leading-to(!lines, !font_size = !base_font_size)
  line-height= 1em * !lines * !base_line_height / !font_size
 
// Apply leading whitespace
=leader(!lines = 1, !font_size = !base_font_size, !property = "margin")
  #{!property}-top= 1em * !lines * !base_line_height / !font_size
 
=padding-leader(!lines = 1, !font_size = !base_font_size)
  +leader(!lines, !font_size, "padding")
 
=margin-leader(!lines = 1, !font_size = !base_font_size)
  +leader(!lines, !font_size, "margin")
 
// Apply trailing whitespace
=trailer(!lines = 1, !font_size = !base_font_size, !property = "margin")
  #{!property}-bottom= 1em * !lines * !base_line_height / !font_size
 
=padding-trailer(!lines = 1, !font_size = !base_font_size)
  +trailer(!lines, !font_size, "padding")
 
=margin-trailer(!lines = 1, !font_size = !base_font_size)
  +trailer(!lines, !font_size, "margin")
 
// Apply a border width without messing up the rhythm
=apply-side-border(!side, !width = 1px, !lines = 1, !font_size = !base_font_size)
  border-#{!side}-width= 1em * !width / !font_size
  padding-#{!side}= (1em / !font_size) * ((!lines * !base_line_height) - !width)
 
=rhythm-borders(!width = 1px, !lines = 1, !font_size = !base_font_size)
  border-width= 1em * !width / !font_size
  padding= (1em / !font_size) * ((!lines * !base_line_height) - !width)
 
=leading-border(!width = 1px, !lines = 1, !font_size = !base_font_size)
  +apply-side-border("top", !width, !lines, !font_size)
 
=trailing-border(!width = 1px, !lines = 1, !font_size = !base_font_size)
  +apply-side-border("bottom", !width, !lines, !font_size)
 
=left-border(!width = 1px, !lines = 1, !font_size = !base_font_size)
  +apply-side-border("left", !width, !lines, !font_size)
 
=right-border(!width = 1px, !lines = 1, !font_size = !base_font_size)
  +apply-side-border("right", !width, !lines, !font_size)
 
=vertical-borders(!width = 1px, !lines = 1, !font_size = !base_font_size)
  +leading-border(!width, !lines, !font_size) 
  +trailing-border(!width, !lines, !font_size)
 
=horizontal-borders(!width = 1px, !lines = 1, !font_size = !base_font_size)
  +left-border(!width, !lines, !font_size) 
  +right-border(!width, !lines, !font_size)