You might ask yourself, "who on earth prints these days?" — I do! Quite often actually. As an offline reference to websites, a CV for potential employers; someday, perhaps an eBook.

This framework is meant for simple layouts like PDFs and eBooks. It can be used for rudimentary websites and blogs, and as a solid typographic base for child themes. It's core purpose is to make reading pleasurable in print-like format.

Only the essentials here, folks:

• No fluff, no grid system
• Basic styling for presentations, ebooks, or pdfs
• Can be used as a base for websites (and custom print styles)
• Preview styles in the specimen file.

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,
• For websites, you can print or create a PDF with your browser.

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 heavily influenced by Material Design — all typography aligns to a 4dp grid, with default --font-size of 16dp.

1. A baseline grid mixin,
2. Device agnostic system-ui fonts (for iOS and Android),
3. Some helpful CSS variables.

Depending on the font-family you may need to make some adjustments.

Headings may need --line-height and margin-bottom changes, or you may have to abandon the .grid-baseline depending on the complexity of your design. It's difficult to achieve pixel perfection with web-based projects!

Online and PDFs aren't quite as easy to stick to a grid as InDesign projects.

⚠️ Perfect is the enemy of good (Voltaire) — try to keep grid-level items divisible by 8 or 4;

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

Typographic vertical rythmn and the baseline/grid layouts are notoriously difficult to get right for digital projects, so don't worry about being pixel perfect. Try to keep box-model children aligned to the baseline grid where possible. For instance, flexbox has the option to align-items: baseline with it's siblings.

Eyeball it; does it look right?

Just do the enough thing!¹

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

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

Check the release notes first, then:

npm upgrade

Almost completely pure CSS. CSS is NOT a programming language. Don't use it that way! One .grid-baseline() mixin used only.

The less files are simply a nice way to split out different parts of the CSS. I don't advocate using mixins and functions with your CSS. You can compile your CSS like below:

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

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