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

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¹

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.

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!

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.

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.

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

Just do the enough thing!¹

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

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.

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.

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