Responsive typography with modular scale, font stacks, and more. Built on Stylus. Depends on Rupture.
npm install -g rupture typographic
cd ~/Project
echo "@import 'typographic'" > css/foo.styl
stylus -u rupture -u typographic -w css/foo.styl
typo_breakpoint ?= 800px- Set your mobile-to-desktop breakpoint.typo_headers ?= helvetica- The font stack for all<h1>-<h6>elements. You can find a list of these here.typo_header_color ?= #111- Colors for all<h1>-<h6>elements.typo_header_weight ?= 200- Font weight for<h1>-<h6>elements.typo_tagline_color ?= #aaa- The color of<p>elements within a<header>element.typo_body ?= helvetica-<body>font stack. You can find a list of these here.typo_body_color ?= #444-<body>color.typo_mobile ?= major_third- The named ratio size for mobile devices. You can use a custom float number as well. You can find a list of these here.typo_desktop ?= octave- The named ratio size for desktop devices. You can use a custom float number as well. You can find a list of these here.
- Create a
settings.stylfile as a sibling tofoo.styl - At the top of
settings.stylput:
@import 'settings'
@import 'typographic'
- Modify
settings.stylto override any of the above settings