Print First CSS

Quick intro

A simple starting point for typographic css projects. Only the essentials here, folks:

• No fluff, no grid system
• Great for presentations, ebooks, or pdfs

Why print first?

Print is often a second citizen these days, but it's useful! You might need to rattle off presentations or share ideas quickly, or perhaps you're an author publishing an ebook.

Write it down with Markdown, then convert with the app of your choice:

• Pandoc if you know what a terminal is,
• Marked if you like an app to do the work,
• Print with Safari, Chrome or Firefox

Print first, screen second

Think about print first; add the finesse for screen-based devices later:

1. @media all for BOTH screen and print (use often)
2. @media screen to ADD css for screen only
3. @media print to REMOVE screen css for print (use sparingly)

The method isn't suitable for every job, but for printable media, it's much better than this!

Typography

Typography heavily influenced by Material Design — all typography aligns to a 4dp grid, with default --font-size of 16dp.

Some helpers:

1. A baseline grid
2. Default iOS and Android fonts
3. CSS variables

⚠️ Watch out for ...

• Headings may need --line-height and margin-bottom adjusting depending on font
• Don't worry too much about pixel perfection

Layout

Everything should be divisible by 8 or 4;

All components and media align to a 8dp baseline grid (double the typography baseline).

⚠️ Perfect is the enemy of good (Voltaire) Typographic vertical rythmn and the layout baseline is notoriously difficult to get right, so don't worry about being pixel perfect. Try to keep each "chunk" of content consistent, aligned to the baseline — eyeball it; does it work?

Styleguide

1. Intro to Markdown and writing styleguide
2. Writing in context
3. A look at the components
4. Sane stylesheets for css

⚠️ Do the enough thing ... Keep --css-variables to a minimum, Be brutal in your design, KISS, don't make me think — just do the enough thing!

---

Installation

1. You have Node installed
2. Create your repo and cd your/folder/
3. npm init
4. npm install badlydrawnrob/print-first-css --save-dev
5. npm run build

Upgrading

Check the release notes first, then:

npm upgrade

Less

99% standard CSS with a hint of less

I've added .less files into the mix to make things easier on the eye. Creating your CSS is simple as:

1. Create a config file
2. @import (less) "../../node_modules/print-first-css/build/style/print-first.css";
3. Change any :root { --css-variables ... } you need
4. Create a main file
5. Get creative with css!
6. npm run build

---

Further reading

1. CommonMark
2. Mastering markdown
3. Markdown cheatsheet
4. Pandoc tricks