Need help with Gutenberg?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

BafS
4.3K Stars 144 Forks MIT License 72 Commits 8 Opened issues

Description

Modern framework to print the web correctly.                                               

Services available

!
?

Need anything else?

Contributors list

# 22,057
CSS
css-fra...
scss-fr...
memo
49 commits
# 101,748
CSS
scss-fr...
css-fra...
printer
4 commits
# 118,774
PHP
CSS
amp
WordPre...
2 commits
# 158,075
PHP
HTML
Shell
scss-fr...
1 commit
# 91,168
scss-fr...
css-fra...
printer
golang
1 commit
# 37,061
minific...
svgo
Node.js
clean-c...
1 commit
# 35,419
stripe
scss-fr...
TypeScr...
nuxtjs
1 commit
# 100,683
PHP
Shell
scss-fr...
html5
1 commit
# 172,697
scss-fr...
css-fra...
printer
scss
1 commit
# 166,794
CSS
scss-fr...
css-fra...
printer
1 commit

Gutenberg

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 :

 

comparison

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

npm

Gutenberg is available on npm

npm install gutenberg-css

(or

yarn add gutenberg-css
for yarn users)

CDN

You can also use the unpkg service as a CDN.


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.

Example:

My title

I will break after this paragraph

I am on a new page

Avoid break inside

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

avoid-break-inside
class.

Example:

I really don't want this part to be cut

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;

Dev

  • 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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.