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.4K Stars 144 Forks MIT License 74 Commits 11 Opened issues

Description

Modern framework to print the web correctly.                                               

Services available

!
?

Need anything else?

Contributors list

# 24,212
CSS
css-fra...
scss-fr...
memo
49 commits
# 107,261
CSS
scss-fr...
css-fra...
printer
4 commits
# 124,551
PHP
CSS
Shell
scss-fr...
2 commits
# 133,666
PHP
HTML
Shell
scss-fr...
1 commit
# 101,187
PHP
Shell
scss-fr...
html5
1 commit
# 157,547
Elixir
XML
Erlang
twilio
1 commit
# 95,034
scss-fr...
css-fra...
printer
golang
1 commit
# 172,562
CSS
scss-fr...
css-fra...
printer
1 commit
# 187,769
CSS
scss-fr...
css-fra...
printer
1 commit
# 37,411
minific...
svgo
clean-c...
WordPre...
1 commit
# 36,871
stripe
scss-fr...
nuxtjs
vue-plu...
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.