Create a Print-Friendly Page with Gutenberg.css

Web designers often forget about print because it seems much less necessary nowadays. And this may be true for digital sites like BuzzFeed.

However, on informational websites it’s still a good practice to offer a custom print stylesheet. Thankfully, you don’t need to design your own because Gutenberg is here to help.

Named after the inventor of the printing press Johannes Gutenberg, this CSS library is a standalone resource for print page designs.

gutenberg css

You just add the gutenberg.css file into your document head, and you’re all set.

Whenever a visitor goes to print your page it should automatically restyle based on the print setting. This can be set using the media="print" HTML attribute.

Using CSS3 Page Break to Organise Print Pages

Using CSS3 Page Break to Organise Print Pages

[tax type="tag" slug="series-html5-css3-tuts" title="HTML5 / CSS3 Tutorials" description="This article is part of our HTML5 / CSS3 Tutorials series…Read more

Check out this guide if you want to learn a bit more about print stylesheets and how they work.

The nice thing about Gutenberg is that it comes with extra classes and styles too.

Dig into the themes folder and you’ll find three alternate print themes: book, modern, and old style. You can make any of these the default by adding them on top of the default gutenberg.css file.

gutenberg themes preview

Also, you can style the page differently for print by adding specific CSS classes. For example the .no-print class will completely hide an element in the print style.

Another example is the addition of link URLs next to the text. Gutenberg adds this feature to make it easier for people to find the URLs from your page. But you can add the .no-reformat class onto the anchor element to hide the URL.

All this stuff is covered on the GitHub repo and it’s very straightforward. You can have Gutenberg installed in less than 5 minutes and your whole site will be print-friendly.

This is by far one of the simplest and coolest libraries to implement for better site performance. It may add a few extra KBs but the overall experience will be drastically improved.

If the content of your site might ever be printed for any reason then Gutenberg.css is an indispensable resource.

UI Design: Applying CSS Based on Screen Orientation

UI Design: Applying CSS Based on Screen Orientation

[series_html5css3] With the introduction of CSS3 Media Queries, we are able to shift and apply CSS between different…Read more