typographic-base-css-stylus v3.0.1

Floor Typography (CSS)

Floor Typography is a tiny CSS/Stylus library for a consistent and flexible typographic base for modern web products. The only layout rule you want to follow when using this library is to keep spaces between block elements 1rem * an integer.

Everything is kept simple – thus flexible:

• No colors are adjusted.
• Only relative sizes: em, rem and %.
• Utility classes for the usual typographic use cases. Classes have different name variants to suit your preference.
• Provides CSS and Stylus variables – use either.
• To keep it easy to change how you style media queries, it is separated into its own file. Either way, there is only one breakpoint that adjust headings above mobile size.

Though simple, the typography follows a consistent set of rules. Much is based on the book The Elements of Typographic Style, but simplified to keep it flexible for modern web products. Take a look at [some of the book's content here, "... Applied to the Web"](http://webtypography.net).

Other libraries to consider: Tailwind CSS, Tufte CSS.

Installation

Install with NPM; when using CSS:

npm install --save typographic-base-css-stylus

Install with NPM; when using Stylus:

npm install --save-dev typographic-base-css-stylus

Requirements

Normalize.css should be used and included before Floor Typography. And "charset" should be set (typically @charset 'utf-8';) at the top of your (compiled) CSS.

Development

For the time being, to develop on this package, some global NPM packages are required (and Node.js obviously):

npm install stylus -g
npm install pug -g
npm install jstransformer-markdown-it -g

Then:

npm install

Compile

Run npm run build, or npm run watch for building on change.

Publish to NPM

1. Compile
2. Run np on this root (requires np installed globally)