downbeat/vertical-rhythm.styl

Vertical rhythm and modular scale library for Stylus.

// Vertical Rhythm
// Use to maintain vertical rhythm in your layouts.
// Uses a standard baseline size and a larger baseline for desktop media queries.
// TODO: remove rupture, make desktop-ratio optional for single baseline size

// User defined variables for setting the baseline grid
body-font-size ?= 1rem
body-line-height ?= 1.5

// This gives a boost to the size of the baseline grid for large screens
desktop-ratio ?= 1.07

// Gutter is used for horizontal padding and ties in with the Happy Grid
// variable of the same name. https://github.com/abstracthat/happy-grid
gutter ?= 3%

large-body-font-size = body-font-size * desktop-ratio
large-body-line-height = body-line-height * desktop-ratio

// Baseline Grid units
// These two variables are commonly used to add vertical padding or margin
base = body-font-size * body-line-height
large-base = base-large = desktop-base = large-body-font-size * large-body-line-height
half-base = base-half = (base / 2)
third-base = base-third = (base / 3)
quarter-base = base-quarter = (base / 4)


// Set up html and body font-size / line-height.
// Note this adds classes to your markup but you need it.
html
  font-size 100%

body
  font-size body-font-size
  line-height body-line-height

  +above(rupture.hd-cutoff)
    font-size large-body-font-size
    line-height large-body-line-height


// Rhythm
// Adds margin-bottom and/or margin-top in increments of the baseline-grid.
// You can use floated numbers like .5, etc
// Includes a media query for using the larger baseline on large screens.

rhythm(bottom = 1, top = null)
  if top isnt null
    bottom-margin = top
    top-margin = bottom

  else
    bottom-margin = bottom

  margin-bottom base * bottom-margin

  +above(rupture.desktop-cutoff)
    margin-bottom large-base * bottom-margin

  if top
    margin-top base * top-margin

    +above(rupture.desktop-cutoff)
      margin-top large-base * top-margin

// aliases
margin-rhythm = rhythm-margin = rhythm


// Padding Rhythm
// Same as Rhythm mixin but for padding.
// Note that it defers in that it adds padding to top and bottom.
// Adds padding-bottom and padding-top in increments of the baseline-grid.
// You can use floated numbers like .5, etc
// Includes a media query for using the larger baseline on large screens.

padding-rhythm(top = .5, bottom = top)
  padding-top base * top
  padding-bottom base * bottom

  +above(rupture.desktop-cutoff)
    padding-top large-base * top
    padding-bottom large-base * bottom

// alias
rhythm-padding = padding-rhythm


// Image Rhythm
// Calculates the margin-bottom for an image of specified height to line-up with your baseline. Includes a media query for the large-base.

image-rhythm(height)
  image-height = (remove-unit(height) / 16)
  units = (image-height / base)
  large-units = (image-height / large-base)
  margin = (ceil(units) - units) * base
  large-margin = (ceil(large-units) - large-units) * large-base

  margin-bottom margin

  +above(rupture.desktop-cutoff)
    margin-bottom large-margin


// Padding / Margin: Sides, Vertical
// Shortcuts for padding-left, padding-right
// margin-left, margin-right
// padding-top, padding-bottom
// margin-top, margin-bottom
// Pass 1 arg for same value for both or 2 args as left,right or top,bottom
// Defaults to gutter for sides and base/2 for vertical value
padding-sides(left = gutter, right = left)
  padding-left left
  padding-right right

// aliases
sides-padding = side-padding = sides = padding-sides

padding-vertical(top = (base / 2), bottom = top)
  padding-top top
  padding-bottom bottom

// pad sides by gutter, top/bottom by base and mq for large-base
pad()
  padding-sides()
  padding-rhythm()

margin-sides(left = gutter, right = left)
  margin-left left
  margin-right right

margin-vertical(top = (base / 2), bottom = top)
  margin-top top
  margin-bottom bottom


// Line-Height Rhythm
// Calculates line-height based on the font-size for both base and large-base mq
//
// Usage:
// h1
//   font-size 2rem
//   line-height-rhythm()

line-height-rhythm()
  line-height remove-unit(ceil(@font-size / base) * (base / @font-size))

  +above(desktop)
    line-height remove-unit(ceil(@font-size / large-base) * (large-base / @font-size))

// alias
rhythm-line-height = line-height-rhythm


// Find Padding
// Calculates padding needed to maintain vertical-rhythm using the selector's
// font-size and line-height.
// If the text stacks to multiple lines we need to know how many in order to
// calculate the correct padding.
// Make top true if you want top and bottom padding, else you just get bottom.
// TODO: test this

find-padding(lines = 1, top = false)
  height = @font-size * @line-height
  units = (height / base)
  large-units = (height / large-base)
  pad = (ceil(units) - units) * base
  large-pad = (ceil(large-units) - large-units) * large-base

  if top
    padding-top (pad / 2) * lines
    padding-bottom (pad / 2) * lines

    +above(rupture.desktop-cutoff)
      padding-top (large-pad / 2) * lines
      padding-bottom (large-pad / 2) * lines

  else
    padding-bottom pad * lines

    +above(rupture.desktop-cutoff)
      padding-bottom large-pad * lines


// Helper to render the base grid lines
render-baseline(color = black, px-offset = false)
  body
    background linear-gradient(to top, rgba(color, 10%) 5%, white 5%)
    background-size 100% (base)em

    if px-offset
      background-position 0 unit(px-offset, 'px')

    +above(rupture.desktop-cutoff)
      background-size 100% (large-base)em