typerules/lib/_vertical-rhythm.styl

A typography toolkit that sets vertical rhythm and provides type functions.

// Adjusts a block to have a different font size and line height to maintain the rhythm.
// $lines specifies how many multiples of the baseline rhythm each line of this font should use up.
// It 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 font-size other than the base font-size.
adjust-font-size-to($to-size, $lines = lines-for-font-size($to-size))
  if $support
    font-size: $to-size
  font-size: rem($to-size)
  adjust-leading-to($lines)

// Adjusts a block to have different line heights to maintain the rhythm.
// $lines specifies how many multiples of the baseline rhythm each line of this font should use up.
// It does not have to be an integer, but it defaults to the smallest integer that is large enough to fit the font.
adjust-leading-to($lines)
  if $support
    // Round the pixels down to nearest integer.
    line-height: floor($lines * $base-line-height)
  line-height: calculates-rhythm-units($lines)


// Padding and margin
// Applies leading whitespace. The $property can be margin or padding.
leader($lines = 1, $property = margin)
  if $support
    {$property}-top: floor($lines * $base-line-height)
  {$property}-top: calculates-rhythm-units($lines)

// Applies leading whitespace as padding.
padding-leader($lines = 1)
  leader($lines, padding)

// Applies leading whitespace as margin.
margin-leader($lines = 1)
  leader($lines, margin)

// Applies trailing whitespace. The $property can be margin or padding.
trailer($lines = 1, $property = margin)
  if $support
    {$property}-bottom: floor($lines * $base-line-height)
  {$property}-bottom: calculates-rhythm-units($lines)

// Applies trailing whitespace as padding.
padding-trailer($lines = 1)
  trailer($lines, padding)

// Applies trailing whitespace as margin.
margin-trailer($lines = 1)
  trailer($lines, margin)

// Shorthand mixin to apply whitespace for top and bottom margins and padding.
rhythm($leader = 0, $padding-leader = 0, $padding-trailer = 0, $trailer = 0)
  margin-leader($leader)
  margin-trailer($trailer)
  padding-leader($padding-leader)
  padding-trailer($padding-trailer)

// Shorthand mixin to apply whitespace for top and bottom margins.
rhythm-margins($leader = 1, $trailer = 1)
  leader($leader, margin)
  trailer($trailer, margin)

// Shorthand mixin to apply whitespace for top and bottom padding.
rhythm-padding($leader = 1, $trailer = 1)
  leader($leader, padding)
  trailer($trailer, padding)


// Borders

// Applies a border and whitespace to any side without destroying the vertical rhythm.
// The whitespace must be greater than the width of the border.
apply-side-rhythm-border($side, $width = 1px, $lines = 1, $border-style = $default-rhythm-border-style)
  border-{$side}-color: $border-style[1]
  border-{$side}-style: $border-style[0]
  if $support
    border-{$side}-width: $width
  border-{$side}-width: rem($width)
  if $support
    padding-{$side}: floor($lines * $base-line-height - $width)
  padding-{$side}: calculates-rhythm-units($lines, $offset = $width)

// Applies borders and whitespace equally to all sides.
rhythm-borders($width = 1px, $lines = 1, $border-style = $default-rhythm-border-style)
  border-color: $border-style[1]
  border-style: $border-style[0]
  if $support
    border-width: $width
  border-width: rem($width)
  if $support
    padding: floor($lines * $base-line-height - $width)
  padding: calculates-rhythm-units($lines, $offset = $width)

// Applies a leading border.
leading-border($width = 1px, $lines = 1, $border-style = $default-rhythm-border-style)
  apply-side-rhythm-border(top, $width, $lines, $border-style)

// Applies a trailing border.
trailing-border($width = 1px, $lines = 1, $border-style = $default-rhythm-border-style)
  apply-side-rhythm-border(bottom, $width, $lines, $border-style)

// Applies both leading and trailing borders.
horizontal-borders($width = 1px, $lines = 1, $border-style = $default-rhythm-border-style)
  leading-border($width, $lines, $border-style)
  trailing-border($width, $lines, $border-style)