Print First CSS

• Remember that Print First CSS is a bare-bones approach ...
• It is not a framework! A child theme takes on that responsibility.

Quick intro

Who on earth prints these days? I do! Quite often actually: notes to edit, website reference, a CV, perhaps an eBook ... Remember: CSS sucks to write so less is more.

A solid base for simple layouts such as PDFs, books, websites; acts as a starter theme with solid typography. Makes for pleasurable reading when you need to print out on paper.

Only the essentials here, folks:

• No fluff, no grid system (just helpful --spacing variables)
• Basic styling for presentations, ebooks, or pdfs (with --color for text)
• Can be extended and used as a child theme for any @media print/screen content
• Has a specimen file to preview styles
• Uses css variables) and the lessc compiler to chunk files¹

Why print first?

Everything is motion these days, but lets go back to our roots!

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

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

• Pandoc if you know what a terminal is,
• Marked if you prefer GUIs,
• Save as a PDF with your browser (using print-first-css) with file -> print.

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)
4. @media (orientation: portrait) (or landscape) may come in handy too.

The method isn't suitable for every job, but for printable media, it's much better for a long blog post, or complex user interfaces!

Typography

Uses your device system-ui fonts (Android and iOS)

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

The x-height problem

Inline code and pre blocks use font-size: inherit. It seems most devices have the monospace font with a larger x-height than the regular font. It's best if you find a monospace font that's similar in height to your default, but here's a small fix for if it isn't.

Layout

• .gl-BaselineGrid class for vertical rythmn.
• Aim to keep grid-level items divisible by 8 or 4
• You may need to adjust your font's --line-height and margin-bottom

Everything aligns to an 8dp baseline grid (double the typography baseline). A vertical rythmn is nice in theory, difficult in practice for web-based styles. Try to keep the box-model aligned and consider align-items: baseline if using flexbox.

Remember, "Perfect is the enemy of good" (Voltaire) so sometimes it's best to just eyeball it; does it feel right?

Styleguide

Just do the enough thing!¹

1. Intro to Markdown and writing styleguide
2. Writing in context
3. A look at base-level components

Installation

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

To upgrade, check the release notes first, then npm upgrade.

License and inspiration

Print First CSS is licensed under the MIT Open Source License

There's been a bunch of inspirations over the years, but mostly thanks to @cbracco (Cardinal CSS) and Material Design.

Further reading

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

Footnotes

1. You can @import (less) files into your own project and override the --css-variables in :root. Recompile with NPM (npm run build) and you're ready to do the enough thing. Follow the don't make me think principles for styles and UI and try to be consistent with your code. ↩ ↩²