Modern framework to print the web correctly.                                        
Alternatives To Gutenberg
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Gutenberg4,564713 months ago15September 06, 202014mitSCSS
Modern framework to print the web correctly.                                               
Simple Resume17
2 years agomitSCSS
Hugo Theme for a simple, web-based resume (and it prints)
a year agoSCSS
Website for UCM's extracurricular math club
6 years agomitCSS
ProntoCSS is a simple css framework written with SCSS.
Alternatives To Gutenberg
Select To Compare

Alternative Project Comparisons


Modern framework to print web pages correctly

npm (scoped) Build Status Maintainability license download

How to use

Simply include the right stylesheet(s) in your html and load it only for a printer. Gutenberg.css is the base stylesheet but there are themes available in the themes folder.

Example with Gutenberg and "old style" theme :

<link rel="stylesheet" href="dist/gutenberg.css" media="print">
<link rel="stylesheet" href="dist/themes/oldstyle.css" media="print"> <!-- optional -->


Comparison between standard print (left) and Gutenberg (middle, Modern style and right, Old style)


Gutenberg is available on npm

npm install gutenberg-css

(or yarn add gutenberg-css for yarn users)


You can also use the unpkg service as a CDN.

<link rel="stylesheet" href="[email protected]" media="print">
<link rel="stylesheet" href="[email protected]/dist/themes/oldstyle.min.css" media="print">

What does the framework do ?

Hide elements

To hide elements to be printed you can simply add the class no-print.

Force break page

Gutenberg provides two ways to break a page, the class break-before will to break before and break-after to break after.


<!-- The title will be on a new page -->
<h1 class="break-before">My title</h1>

<p class="break-after">I will break after this paragraph</p>
<!-- Break here, the next paragraph will be on a new page -->
<p>I am on a new page</p>

Avoid break inside

To avoid the page to break "inside" an element, you can use the avoid-break-inside class.


<div class="avoid-break-inside">
  <img src="gutenberg.png" />

  <p>I really don't want this part to be cut</p>

Not reformat links or acronym

If you do not want to reformat the links, acronym or abbreviation to show the full url or title, you can use the class no-reformat.

Force to print background

To force backgrounds to be printed (can be useful when you "print" a pdf), add this CSS (compatible with Safari and Chrome):

-webkit-print-color-adjust: exact;
        print-color-adjust: exact;


  • npm i to install the dependencies
  • npm run watch to "watch" the scss folder and compile to css
  • npm run build to compile gutenberg to css
Popular Printing Projects
Popular Scss Projects
Popular User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Css Framework