Add "avoid-break-inside" utility and aliases

BafS · Sep 6, 2020 · 0956514 · 0956514
1 parent aa436a9
commit 0956514
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -17,7 +17,7 @@ Gutenberg.css is the base stylesheet but there are themes available in the `them
 
 Example with Gutenberg and "old style" theme :
 
-```HTML
+```html
 <link rel="stylesheet" href="dist/gutenberg.css" media="print">
 <link rel="stylesheet" href="dist/themes/oldstyle.css" media="print"> <!-- optional -->
 ```
@@ -40,7 +40,7 @@ npm install gutenberg-css
 
 You can also use the unpkg service as a *CDN*.
 
-```HTML
+```html
 <link rel="stylesheet" href="https://unpkg.com/[email protected]" media="print">
 <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/themes/oldstyle.min.css" media="print">
 ```
@@ -54,29 +54,42 @@ 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 `page-break-before` will to break before and `page-break-after` to break after.
+Gutenberg provides two ways to break a page, the class `break-before` will to break before and `break-after` to break after.
 
 Example:
 
-```HTML
+```html
 <!-- The title will be on a new page -->
-<h1 class="page-break-before">My title</h1>
+<h1 class="break-before">My title</h1>
 
-<p class="page-break-after">I will break after this paragraph</p>
+<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.
+
+Example:
+
+```html
+<div class="avoid-break-inside">
+  <img src="gutenberg.png" />
+
+  <p>I really don't want this part to be cut</p>
+</div>
+```
+
 ### 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`.
+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) :
+To force backgrounds to be printed (can be useful when you "print" a pdf), add this CSS (compatible with Safari and Chrome):
 
-```CSS
+```css
 -webkit-print-color-adjust: exact;
         print-color-adjust: exact;
 ```

diff --git a/docs/index.html b/docs/index.html
@@ -4,7 +4,7 @@
 	<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/9.13.1/styles/default.min.css">
+<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/default.min.css">
 </head>
 <body>
 	<h1>Gutenberg Framework</h1>
@@ -30,12 +30,16 @@ <h4>Force break page</h4>
 	Example:
 
 	<pre><code class="html">&lt;!-- The title will be on a new page --&gt;
-&lt;h1 class="page-break-before"&gt;My title&lt;/h1&gt;
+&lt;h1 class="break-before"&gt;My title&lt;/h1&gt;
 
-&lt;p class="page-break-after"&gt;I will break after this paragraph&lt;/p&gt;
+&lt;p class="break-after"&gt;I will break after this paragraph&lt;/p&gt;
 &lt;!-- Break here, the next paragraph will be on a new page --&gt;
 &lt;p&gt;I am on a new page&lt;/p&gt;</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
@@ -48,7 +52,7 @@ <h4>Force to print background</h4>
 	<pre><code class="css">-webkit-print-color-adjust: exact;
         print-color-adjust: exact;</code></pre>
 
-	<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
+	<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js"></script>
 	<script>hljs.initHighlightingOnLoad();</script>
 </body>
 </html>
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
@@ -1,12 +1,18 @@
 .page-break,
+.break-before,
 .page-break-before {
 	page-break-before: always;
 }
 
+.break-after,
 .page-break-after {
 	page-break-after: always;
 }
 
+.avoid-break-inside {
+	page-break-inside: avoid;
+}
+
 .no-print {
 	display: none;
 }