docs/index.html
<!DOCTYPE html>
<html>
<head>
<title>Gutenberg demo</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/mu/0.3.0/mu.min.css" />
<link rel="stylesheet" href="//unpkg.com/gutenberg-css" media="print" charset="utf-8">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/default.min.css">
</head>
<body>
<h1>Gutenberg Framework</h1>
<h2>Demonstration</h2>
<ul>
<li><a href="modern.html">Modern style</a></li>
<li><a href="oldstyle.html">Old style</a></li>
</ul>
<p>Print (or use the print preview) to see the result with Gutenberg.</p>
<h2>Utils</h2>
<h4>Hide elements</h4>
To hide elements to be printed you can simply add the class <code>no-print</code>.
<h4>Force break page</h4>
Gutenberg provides two ways to break a page, the class <code>page-break-before</code> will to break before and <code>page-break-after</code> to break after.
Example:
<pre><code class="html"><!-- 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></code></pre>
<h4>Avoid break inside</h4>
To avoid the page to break "inside" an element, you can use the <code>avoid-break-inside</code> class.
<h4>Not reformat links or acronym</h4>
If you do not want to reformat the links, acronym or abbreviation to show the full url or title, you
can use the class <code>no-reformat</code>.
<h4>Force to print background</h4>
To force backgrounds to be printed (can be useful when you "print" a pdf), add this CSS (compatible with Safari and Chrome) :
<pre><code class="css">-webkit-print-color-adjust: exact;
print-color-adjust: exact;</code></pre>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>