Heard about ‘Johannes Gutenberg‘? A very famous German Blacksmith, Goldsmith, Printer, and Publisher who was the first man to introduce printing in Europe and also discovered the printing press.
Looking at this, a new framework named ‘Gutenberg.css‘ that has the ability to create Print-Friendly pages for users came to the market. The stylesheet Gutenberg.css is capable of developing very professional print page designs that are ready to go for print.
With the help of Gutenberg.css, it becomes easy and convenient for designers to print their own stylesheet as they don’t need to design it from zero. Every element can be perfectly placed at the perfect location using the Gutenberg Stylesheet as it is made to make a page print friendly.
Let’s learn more about Gutenberg.css:
How to Create Print-Friendly Pages with Gutenberg.css?
Using Gutenberg.css in your web page is not a Rocket Science. Just follow the few basic steps and you are done.
Step 1: Download the stylesheet files from the GitHub Repository.
Step 2: After downloading the files insert the files into your document head i.e. before </head> tag.
<link rel="stylesheet" href="dist/gutenberg.css" media="print">
The stylesheet is only dedicated to printers because of the tag ‘media=print‘. Using this whenever a user goes on to print your page then the page will automatically be restyled based on the print setting. Now that is really awesome.
If you directly need the CDN of Gutenberg.css then the CDN is also available for use, just insert the CDN before the </head> tag in your HTML.
<link rel="stylesheet" href="https://email@example.com" media="print"> <link rel="stylesheet" href="https://firstname.lastname@example.org/dist/themes/oldstyle.min.css" media="print">
Gutenberg.css has various classes to add more utilities to the stylesheet. Let’s see some of them:
If you want to hide elements to be printed you can simply add the class no-print. The .no-print class will hide the element from the print style.
Do Not Want to Reformat the Links
If you have URL’s in your web page and you do not want to reformat the links, acronym or abbreviation, you just have to use the class no-reformat.
Moving forward to more classes and utilities:
Force Break Page:
If you want to a page to break, then the class page-break-before will break before and the class page-break-after to break after.
Let’s see an example of this:
<!-- The title will be on a new page --> <h2 class="page-break-before">My Subtitle</h2> <p class="page-break-after">This will break after this paragraph</p> <!-- Break here, the next paragraph will be on a new page --> <p>Now this is a paragraph on a new page</p>
There are some more classes which you can go through from the official website or on GitHub.
Now let’s get to know more about themes of Gutenberg.css.
The stylesheet package has a ‘themes‘ folder in the ‘scss‘ directory it where you can find three classic themes of Gutenberg.css:
- Old style
You can use any of the themes just add the theme to your web page and make it your default.
As you are now aware of Gutenberg.css and its functionality, you can also embed the stylesheets in your website too..! Publishing websites with bulks of content need proper styling of the print page, so in this regard, Gutenberg will help.
Gutenberg stylesheet is really very easy to implement and to call on your web page. After this, you are under cover by a superb print library which I think your users will like too.