A simple starting point for typographic css projects. Only the essentials here, folks:
Print is often a second citizen these days, but it's useful! You might need to rattle off presentations 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:
Think about print first; add the finesse for screen-based devices later:
@media all
for BOTH screen and print (use often)@media screen
to ADD css for screen only@media print
to REMOVE screen css for print (use sparingly)The method isn't suitable for every job, but for printable media, it's much better than this!
Typography heavily influenced by Material Design — all typography aligns to a 4dp
grid, with default --font-size
of 16dp
.
Some helpers:
⚠️ Watch out for ...
--line-height
and margin-bottom
adjusting depending on fontEverything should be divisible by
8
or4
;
All components and media align to a 8dp
baseline grid (double the typography baseline).
⚠️ Perfect is the enemy of good (Voltaire) Typographic vertical rythmn and the layout baseline is notoriously difficult to get right, so don't worry about being pixel perfect. Try to keep each "chunk" of content consistent, aligned to the baseline — eyeball it; does it work?
⚠️ Do the enough thing ... Keep
--css-variables
to a minimum, Be brutal in your design, KISS, don't make me think — just do the enough thing!
cd your/folder/
npm init
npm install badlydrawnrob/print-first-css --save-dev
npm run build
Check the release notes first, then:
npm upgrade
99% standard CSS with a hint of less
I've added .less
files into the mix to make things easier on the eye. Creating your CSS is simple as:
@import (less) "../../node_modules/print-first-css/build/style/print-first.css";
:root { --css-variables ... }
you neednpm run build