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
specimenfile.
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:
@media allfor BOTH screen and print (use often)@media screento ADD css for screen only@media printto REMOVE screen css for print (use sparingly)@media (orientation: portrait)(orlandscape) 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.
- A baseline grid mixin,
- Device agnostic
system-uifonts (for iOS and Android), - Some helpful CSS variables.
Depending on the
font-familyyou 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 by8or4;
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
- Writing in context
- A look at base-level components
- Sane stylesheets for css
- You have Node installed
- Create your repo and
cd your/folder/ npm initnpm install badlydrawnrob/print-first-css --save-devnpm 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:
- Create a config file
@import (less) "../../node_modules/print-first-css/build/style/print-first.css";- Change any
:root { --css-variables ... }you need - Create a main file
- Get creative with css!
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.
Footnotes
-
Do the enough thing! Keep
--css-variablesto a minimum, Be brutal in your design, "Keep it simple, stupid" and don't make me think — just do the enough thing! ↩