Add more snippets

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>

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

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 {

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 %}
 

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" %}
 

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>

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>

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>

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 %}
 

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 %}