README.md

typographic

Responsive typography with modular scale, font stacks, and more. Built on Stylus. Depends on Rupture.

Installation

npm install -g rupture typographic
cd ~/Project
echo "@import 'typographic'" > css/foo.styl

Usage

stylus -u rupture -u typographic -w css/foo.styl

Settings

• 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.

Override Settings

• Create a settings.styl file as a sibling to foo.styl
• At the top of settings.styl put:

@import 'settings'
@import 'typographic'

• Modify settings.styl to override any of the above settings