Home

Awesome

Print First CSS

Quick intro

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:

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:

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

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 mixin,
  2. Device agnostic system-ui fonts (for iOS and Android),
  3. Some helpful CSS variables.

⚠️ You may need ...

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.

Layout

<span id="alert-perfect">⚠️</span> 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?

Styleguide

Just do the enough thing!1

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

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

Minimally using LESS

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

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. Do the enough thing! Keep --css-variables to a minimum, Be brutal in your design, "Keep it simple, stupid" and don't make me think — just do the enough thing! ↩