Add more snippets

diff --git a/docs/_includes/snippet.html b/docs/_includes/snippet.html
index 16aeddef23a56c438f5e19db7b634ae1a0e9f686..57e4c925d93f1504da3c1e18f8c891a87bffc42d 100644 (file)
--- a/docs/_includes/snippet.html
+++ b/docs/_includes/snippet.html
@@ -2,7 +2,7 @@
   <div class="bd-snippet-preview">
     {{ include.content }}
   </div>
-  <div class="bd-snippet-code">
+  <div class="bd-snippet-code {%unless include.clipped %}highlight-full{% endunless %}">
     {% highlight html %}{{ include.content }}{% endhighlight %}
   </div>
 </div>

diff --git a/docs/_sass/example.sass b/docs/_sass/example.sass
index dad351a5e6a51f68fcf8d69904588a3d0afb25e5..da07adaea57b33f2f2b4664a2dd230270a7f5b0f 100644 (file)
--- a/docs/_sass/example.sass
+++ b/docs/_sass/example.sass
@@ -64,11 +64,18 @@
 .bd-snippet-code
   background-color: $pre-background
   +tablet
-    align-items: stretch
-    display: flex
-    flex-direction: column
-    .highlight
+    &,
+    .highlight,
+    .highlight pre
+      align-items: stretch
+      display: flex
+      flex-direction: column
+    .highlight,
+    .highlight pre,
+    .highlight .language-html
       flex-grow: 1
+    .highlight pre
+      white-space: pre
 
 // Highlight
 .highlight.bd-is-hovering

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 31288afebb92d7791f9e544f5db43d5bb4b02d3f..c595114bf9c19767b5157bab49aedf614a3ed4b6 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -9647,14 +9647,21 @@ html.route-index #carbon {
 }
 
 @media screen and (min-width: 769px), print {
-  .bd-snippet-code {
+  .bd-snippet-code,
+  .bd-snippet-code .highlight,
+  .bd-snippet-code .highlight pre {
     align-items: stretch;
     display: flex;
     flex-direction: column;
   }
-  .bd-snippet-code .highlight {
+  .bd-snippet-code .highlight,
+  .bd-snippet-code .highlight pre,
+  .bd-snippet-code .highlight .language-html {
     flex-grow: 1;
   }
+  .bd-snippet-code .highlight pre {
+    white-space: pre;
+  }
 }
 
 .highlight.bd-is-hovering {

diff --git a/docs/documentation/elements/box.html b/docs/documentation/elements/box.html
index a2f48422e1d667fd654d308fc6dc7ffaa004b183..66c5d90d8b5ab3e3616304320bc4dffb9f2bc12a 100644 (file)
--- a/docs/documentation/elements/box.html
+++ b/docs/documentation/elements/box.html
@@ -71,23 +71,15 @@ variables:
 
     <hr>
 
-    <div class="columns">
-      <div class="column is-4">
-        <div class="content">
-          <p>
-            The <code>.box</code> element is simply a container with a shadow, a border, a radius, and some padding.
-            <br>
-            For example, you can include a media object:
-          </p>
-        </div>
-      </div>
-
-      <div class="column is-8">
-        {{box_example}}
-      </div>
+    <div class="content">
+      <p>
+        The <code>.box</code> element is simply a container with a shadow, a border, a radius, and some padding.
+        <br>
+        For example, you can include a media object:
+      </p>
     </div>
 
-    {% highlight html %}{{box_example}}{% endhighlight %}
+    {% include snippet.html content=box_example %}
 
     {% include variables.html %}
 

diff --git a/docs/documentation/elements/content.html b/docs/documentation/elements/content.html
index 21456eba81452b2d83ac0c74b5e879c1f2450ee4..cee752fd81f48b00987ce267c5465404a2ba3c82 100644 (file)
--- a/docs/documentation/elements/content.html
+++ b/docs/documentation/elements/content.html
@@ -164,11 +164,7 @@ variables:
       <p>This <code>content</code> class can be used in <em>any</em> context where you just want to (or can only) write some <strong>text</strong>. For example, it's used for the paragraph you're currently reading.</p>
     </div>
 
-    <div class="bd-example">
-      {{content_example}}
-    </div>
-
-    {% highlight html %}{{content_example}}{% endhighlight %}
+    {% include snippet.html content=content_example fullheight=true %}
 
     {% include anchor.html name="Sizes" %}
 

diff --git a/docs/documentation/elements/delete.html b/docs/documentation/elements/delete.html
index c512230886be1a9306453c6e1cfa7ab2f7599def..0a87f56a6feff2dc927061ab32382d777ad68f29 100644 (file)
--- a/docs/documentation/elements/delete.html
+++ b/docs/documentation/elements/delete.html
@@ -61,57 +61,32 @@ doc-subtab: delete
       <p>
         The <code>.delete</code> element is a stand-alone element that can be used in different contexts.
       </p>
+      <p>
+        On its own, it's a simple circle with a cross:
+      </p>
     </div>
 
-    <div class="columns">
-      <div class="column">
-        <div class="content">
-          <p>
-            On its own, it's a simple circle with a cross:
-          </p>
-        </div>
-        {{cross_example}}
-      </div>
-      <div class="column">
-        {% highlight html %}{{cross_example}}{% endhighlight %}
-      </div>
-    </div>
+    {% include snippet.html content=cross_example %}
 
     {% include anchor.html name="Sizes" %}
 
-    <div class="columns">
-      <div class="column">
-        <div class="content">
-          <p>
-            It comes in <strong>4 sizes</strong>:
-          </p>
-        </div>
-        {{cross_sizes_example}}
-      </div>
-      <div class="column">
-        {% highlight html %}{{cross_sizes_example}}{% endhighlight %}
-      </div>
+    <div class="content">
+      <p>
+        It comes in <strong>4 sizes</strong>:
+      </p>
     </div>
 
-    <hr style="margin-bottom: 0;">
-
-    <h3 id="combinations" class="title" style="padding-top: 1.5rem;">
-      Combinations
-    </h3>
-
-    <div class="columns">
-      <div class="column">
-        <div class="content">
-          <p>
-            Bulma uses it for the <a href="/documentation/elements/tag/">tags</a>, the <a href="/documentation/elements/notification/">notifications</a>, and the <a href="/documentation/components/message/">messages</a>:
-          </p>
-        </div>
-        {{cross_elements_example}}
-      </div>
-      <div class="column">
-        {% highlight html %}{{cross_elements_example}}{% endhighlight %}
-      </div>
+    {% include snippet.html content=cross_sizes_example %}
+
+    {% include anchor.html name="Combinations" %}
+
+    <div class="content">
+      <p>
+        Bulma uses it for the <a href="/documentation/elements/tag/">tags</a>, the <a href="/documentation/elements/notification/">notifications</a>, and the <a href="/documentation/components/message/">messages</a>:
+      </p>
     </div>
 
+    {% include snippet.html content=cross_elements_example %}
+
   </div>
 </section>

diff --git a/docs/documentation/elements/icon.html b/docs/documentation/elements/icon.html
index e3a76926bae8a13b9bfef4b00ff4c8030cb0d783..b0a4fc54f68996c03cc34d77526cec57a96c3454 100644 (file)
--- a/docs/documentation/elements/icon.html
+++ b/docs/documentation/elements/icon.html
@@ -42,11 +42,7 @@ variables:
       <p>Because the icons can take a few seconds to load, and because you want control over the <strong>space</strong> the icons will take, you can use the <code>icon</code> class as a container:</p>
     </div>
 
-    <div class="bd-example">
-      {{icon_example}}
-    </div>
-
-    {% highlight html %}{{icon_example}}{% endhighlight %}
+    {% include snippet.html content=icon_example %}
 
     <div class="content">
       <p>The <code>icon</code> container will take up <em>exactly</em> <strong>1.5rem x 1.5rem</strong>. The icon itself is sized at <strong>21px</strong>.</p>

diff --git a/docs/documentation/elements/image.html b/docs/documentation/elements/image.html
index ce3fd1d9538578f3b12a36dba8fe2c7a56daea0a..9a08bfea233b68a6a6e571629241caa89e18cc96 100644 (file)
--- a/docs/documentation/elements/image.html
+++ b/docs/documentation/elements/image.html
@@ -49,17 +49,10 @@ variables:
       <p>Because images can take a few seconds to load (or not at all), use the <code>.image</code> container to specify a <strong>precisely sized</strong> container so that your layout isn't broken because of image loading or image errors.</p>
     </div>
 
-    <div class="bd-example">
-      <figure class="image is-128x128">
-        <img src="{{site.url}}/images/placeholders/128x128.png">
-      </figure>
-    </div>
-
-    {% highlight html %}{{ image }}{% endhighlight %}
+    {% include snippet.html content=image %}
 
-    <hr>
+    {% include anchor.html name="Fixed square images" %}
 
-    <h3 class="title">Fixed square images</h3>
     <div class="content">
       <p>There are <strong>7</strong> dimensions to choose from, useful for <strong>avatars</strong>:</p>
     </div>
@@ -76,23 +69,15 @@ variables:
       </tbody>
     </table>
 
-    <h4 class="title is-4">Retina images</h4>
+    {% include anchor.html name="Retina images" %}
 
     <div class="content">
       <p>Because the image is fixed in size, you can use an image that is <strong>twice as big</strong>. So for example, in a <code>128x128</code> container, you can use a <code>256x256</code> image, but resized to <strong>128x128</strong> pixels.</p>
     </div>
 
-    <div class="bd-example">
-      <figure class="image is-128x128">
-        <img src="{{site.url}}/images/placeholders/256x256.png">
-      </figure>
-    </div>
-
-    {% highlight html %}{{ retina_image }}{% endhighlight %}
-
-    <hr>
+    {% include snippet.html content=retina_image %}
 
-    <h3 class="title">Responsive images with ratios</h3>
+    {% include anchor.html name="Responsive images with ratios" %}
 
     <div class="content">
       <p>If you don't know the exact dimensions but know the <strong>ratio</strong> instead, you can use one of the <strong>5 ratio modifers</strong>:</p>

diff --git a/docs/documentation/elements/notification.html b/docs/documentation/elements/notification.html
index a23e56fd19923bc4c778bc81467e05ecf20cece0..b491a9ead70f4c819f629a1891e85372526ff499 100644 (file)
--- a/docs/documentation/elements/notification.html
+++ b/docs/documentation/elements/notification.html
@@ -75,25 +75,11 @@ variables:
 
     <hr>
 
-    <div class="columns">
-      <div class="column">
-        {{ notification }}
-      </div>
-      <div class="column">
-        {% highlight html %}{{ notification }}{% endhighlight %}
-      </div>
-    </div>
+    {% include snippet.html content=notification %}
 
     {% include anchor.html name="Colors" %}
 
-    <div class="columns">
-      <div class="column">
-        {{ notification_colors }}
-      </div>
-      <div class="column">
-        {% highlight html %}{{ notification_colors }}{% endhighlight %}
-      </div>
-    </div>
+    {% include snippet.html content=notification_colors %}
 
     {% include variables.html %}
 

diff --git a/docs/documentation/elements/progress.html b/docs/documentation/elements/progress.html
index 7cc0a0b95ae95a4a48853a7caa2713d694fe0dca..66e20faeb2aea2f1d74fd361a87e247ce369e432 100644 (file)
--- a/docs/documentation/elements/progress.html
+++ b/docs/documentation/elements/progress.html
@@ -46,24 +46,15 @@ variables:
 
     <hr>
 
-    <div class="bd-example">
-      {{ progress }}
-    </div>
-    {% highlight html %}{{ progress }}{% endhighlight %}
+    {% include snippet.html content=progress %}
 
     {% include anchor.html name="Colors" %}
 
-    <div class="bd-example">
-      {{ progress_colors }}
-    </div>
-    {% highlight html %}{{ progress_colors }}{% endhighlight %}
+    {% include snippet.html content=progress_colors %}
 
     {% include anchor.html name="Sizes" %}
 
-    <div class="bd-example">
-      {{ progress_sizes }}
-    </div>
-    {% highlight html %}{{ progress_sizes }}{% endhighlight %}
+    {% include snippet.html content=progress_sizes %}
 
     {% include variables.html element=true %}