Extension: Print
The print extension contains utility classes and default styles for printing web pages.
You'll find it in src/extensions/_print.scss.
When printing, the <body> is set to black text on white background by default,
while <nav> and <aside> are hidden completely.
The class print:hidden can be used to remove an element
… the class print:invisible will hide contents when
printing.
All <abbr> elements have their title printed
after them.
Print this page as a PDF to see the effects!
Displaying content only for print
hidden and print:block.
The class hidden from the display utilities
combined with either of the classes
print:block,
print:inline-block, or
print:inline
can be used to hide content except when printing.
This span is only displayed in print using classes hidden and
print:inline.
This span is only displayed in print using classes hidden and
print:inline-block.
Printing links
Any article element, or elements with class print:links will have its contained
links printed inline, if the href attribute contain the protocol.
The class print:href can be used on an
individual element
to print its href attribute.
The class print:href-none can be used to override the printing of href on
individual links
which can be useful on image links.
Printing backgrounds
Most browsers won't print backgrounds by default but in WebKit and Firefox the class
print:background-exact will make backgrounds print on color printers.
If you don't want to print backgrounds, there's a class
print:background-economy
to override and also
print:background-transparent
that will remove the background and set color to inherit for contrast on black & white printers
too.
Class print:shadow-none will remove any box- and text-shadows when printing.