Gutenberg

Modern framework to print the web correctly.

CSS ToolkitTypographyPrint
BafS/Gutenbergbafs.github.io/Gutenberggutenberg-css

README

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 :

  1. ``` html
  2. <link rel="stylesheet" href="dist/gutenberg.css" media="print">
  3. <link rel="stylesheet" href="dist/themes/oldstyle.css" media="print"> 
  4. ```

comparison

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


npm


Gutenberg is available on npm

  1. ```
  2. npm install gutenberg-css
  3. ```

(or yarn add gutenberg-css for yarn users)

CDN


You can also use the unpkg service as a CDN.

  1. ``` html
  2. <link rel="stylesheet" href="https://unpkg.com/gutenberg-css@0.6" media="print">
  3. <link rel="stylesheet" href="https://unpkg.com/gutenberg-css@0.6/dist/themes/oldstyle.min.css" media="print">
  4. ```


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:

  1. ``` html
  3. <h1 class="break-before">My title</h1>
  4. <p class="break-after">I will break after this paragraph</p>
  5. <p>I am on a new page</p>
  6. ```

Avoid break inside


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

Example:

  1. ``` html
  2. <div class="avoid-break-inside">
  3.   <img src="gutenberg.png" />
  4. <p>I really don't want this part to be cut</p>
  5. </div>
  6. ```

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):

  1. ```css
  2. -webkit-print-color-adjust: exact;
  3.         print-color-adjust: exact;
  4. ```

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