Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Stylus REM snippets
/************************
* 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
@rowild

This comment has been minimized.

Copy link
Owner Author

rowild commented Apr 20, 2015

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.