Print First CSS

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
• Basic styling for presentations, ebooks, or pdfs
• Use it as a base for your next website (roll your own typography etc)
• Preview styles in the specimen file
• Uses plain CSS (-css-variables) and the lessc compiler to chunk files¹

Why print first?

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. 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 prefer GUIs,
• file -> print a website or save as a PDF with your browser.

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. ↩ ↩²