Stylus REM snippets

stylus-mixins_for_generating_rem_based_css.styl

/************************
 * Vars
 ***********************/
 
// standard default browser font size is 16px
$base_font_size = 16

// bring the base font size upto 18px while respecting the client's individual browser setting
$base_font_size_ems = unit($base_font_size / 16, em)

// convert all px values to rem values
$px = unit(1 / $base_font_size, rem)
$px_em = unit(1 / $base_font_size, em)

$phi = 1.618

// define fonts
$type_regular_font_family = "Open Sans"
$type_h_font_family = "Open Sans"

// Headings use classic typography scale: if default 16px total size scale would be:
// 9px, 10px, 11px, 12px, 16px, 18px, 21px, 24px, 36px, 48px, 60px, 72px
type_h_font_sizes = {
  'h1': 3,
  'h2': 2.25,
  'h3':1.5,
  'h4':1.313,
  'h5':1.125,
  'h6':1
}

$type_h_font_vmargins =  {
  'h1': 0.563,
  'h2': 0.625,
  'h3': 1.313,
  'h4': 1.313,
  'h5': 1.313,
  'h6': 0.75
}

$type_h_font_lineheight = 1.313

$type_wrapper_font_size = 18*$px

$layout_site_width = 760
// "Point of irredeemable illegibity"
$layout_POII = 12rem
$layout_default_padding = unit(2*$phi, em)

/************************
 * Mixins
 ***********************/

rspn-width(NUM)
  max-width unit(NUM, px)
  max-width unit(NUM * $px, rem)
  width 100%
  
// generate all h*-sizes: use like h_tags() // h_tags(0.8) [eg in media queris] etc
h-tags($factor=1)
  h1, h2, h3, h4, h5, h6
    font-family $type_h_font_family
    line-height $type_h_font_lineheight
  for h_lvl, value in $type_h_font_sizes
    ((value * $factor) < 1) ? $size = 1 : $size = value * $factor
    font-size unit($size, em)
    margin unit($type_h_font_vmargins[h_lvl], em) 0
    
// Media Queries: enables breakpoint based on REM, so client settings in browser can be respected
$query_01 = "(max-width: " + 840 * $px + ")"
@media $query_01

There is another Gist, which translates those functions to SCSS.