Improve snippet

docs/documentation/columns/basics.html

@@ -53,6 +53,8 @@ doc-subtab: basics
       </div>
     </div>
 
-    {% highlight html %}{{ columns }}{% endhighlight %}
+    <div class="highlight-full">
+      {% highlight html %}{{ columns }}{% endhighlight %}
+    </div>
   </div>
 </section>

docs/documentation/columns/sizes.html

@@ -468,7 +468,9 @@ doc-subtab: sizes
       </div>
     </div>
 
-    {% highlight html %}{{ columns_narrow }}{% endhighlight %}
+    <div class="highlight-full">
+      {% highlight html %}{{ columns_narrow }}{% endhighlight %}
+    </div>
 
     <div class="content">
       <p>As for the size modifiers, you can have narrow columns for different <strong>breakpoints</strong>:</p>

docs/documentation/components/breadcrumb.html

@@ -162,8 +162,6 @@ variables:
     <hr>
     {% include snippet.html content=breadcrumb_example horizontal=true clipped=true %}
 
-    {% highlight html %}{{breadcrumb_example}}{% endhighlight %}
-
     {% include anchor.html name="Alignment" %}
 
     <div class="content">
@@ -172,12 +170,8 @@ variables:
 
     {% include snippet.html content=breadcrumb_centered_example horizontal=true clipped=true %}
 
-    {% highlight html %}{{breadcrumb_centered_example}}{% endhighlight %}
-
     {% include snippet.html content=breadcrumb_right_example horizontal=true clipped=true %}
 
-    {% highlight html %}{{breadcrumb_right_example}}{% endhighlight %}
-
     {% include anchor.html name="Icons" %}
 
     <div class="content">
@@ -186,8 +180,6 @@ variables:
 
     {% include snippet.html content=breadcrumb_icons_example horizontal=true clipped=true %}
 
-    {% highlight html %}{{breadcrumb_icons_example}}{% endhighlight %}
-
     {% include anchor.html name="Alternative separators" %}
 
     <div class="content">
@@ -196,20 +188,12 @@ variables:
 
     {% include snippet.html content=breadcrumb_arrow_example horizontal=true clipped=true %}
 
-    {% highlight html %}{{breadcrumb_arrow_example}}{% endhighlight %}
-
     {% include snippet.html content=breadcrumb_bullet_example horizontal=true clipped=true %}
 
-    {% highlight html %}{{breadcrumb_bullet_example}}{% endhighlight %}
-
     {% include snippet.html content=breadcrumb_dot_example horizontal=true clipped=true %}
 
-    {% highlight html %}{{breadcrumb_dot_example}}{% endhighlight %}
-
     {% include snippet.html content=breadcrumb_succeeds_example horizontal=true clipped=true %}
 
-    {% highlight html %}{{breadcrumb_succeeds_example}}{% endhighlight %}
-
     {% include anchor.html name="Sizes" %}
 
     <div class="content">
@@ -218,16 +202,10 @@ variables:
 
     {% include snippet.html content=breadcrumb_small_example horizontal=true clipped=true %}
 
-    {% highlight html %}{{breadcrumb_small_example}}{% endhighlight %}
-
     {% include snippet.html content=breadcrumb_medium_example horizontal=true clipped=true %}
 
-    {% highlight html %}{{breadcrumb_medium_example}}{% endhighlight %}
-
     {% include snippet.html content=breadcrumb_large_example horizontal=true clipped=true %}
 
-    {% highlight html %}{{breadcrumb_large_example}}{% endhighlight %}
-
     {% include variables.html %}
 
   </div>

docs/documentation/components/modal.html

@@ -165,7 +165,9 @@ variables:
       </p>
     </div>
 
-    {% highlight html %}{{ modal_card }}{% endhighlight %}
+    <div class="highlight-full">
+      {% highlight html %}{{ modal_card }}{% endhighlight %}
+    </div>
 
     {% include variables.html %}
 

docs/documentation/components/navbar.html

@@ -767,7 +767,9 @@ document.addEventListener('DOMContentLoaded', function () {
         </li>
         <li>
           a container for almost <strong>anything</strong> you want, like a <code>field</code>
-          {% highlight html %}{{ navbar_item_other_example }}{% endhighlight %}
+          <div class="highlight-full">
+            {% highlight html %}{{ navbar_item_other_example }}{% endhighlight %}
+          </div>
         </li>
       </ul>
       <p>
@@ -800,11 +802,7 @@ document.addEventListener('DOMContentLoaded', function () {
       </p>
     </div>
 
-    <div class="bd-example is-paddingless">
-      {{navbar_transparent_example}}
-    </div>
-
-    {% highlight html %}{{navbar_transparent_example}}{% endhighlight %}
+    {% include snippet.html content=navbar_transparent_example paddingless=true horizontal=true more=true %}
 
     {% include anchor.html name="Dropdown menu" %}
 

docs/documentation/components/pagination.html

@@ -205,7 +205,7 @@ variables:
       </p>
     </div>
 
-    {% include snippet.html content=pagination_example horizontal=true clipped=true %}
+    {% include snippet.html content=pagination_example horizontal=true more=true %}
 
     <div class="content">
       <p>
@@ -213,7 +213,7 @@ variables:
       </p>
     </div>
 
-    {% include snippet.html content=pagination_options_example horizontal=true clipped=true %}
+    {% include snippet.html content=pagination_options_example horizontal=true more=true %}
 
     <div class="content">
       <p>
@@ -221,9 +221,9 @@ variables:
       </p>
     </div>
 
-    {% include snippet.html content=pagination_centered_example horizontal=true clipped=true %}
+    {% include snippet.html content=pagination_centered_example horizontal=true more=true %}
 
-    {% include snippet.html content=pagination_right_example horizontal=true clipped=true %}
+    {% include snippet.html content=pagination_right_example horizontal=true more=true %}
 
     {% include anchor.html name="Sizes" %}
 
@@ -232,11 +232,11 @@ variables:
       You only need to append the <strong>modifier</strong> <code>is-small</code>, <code>is-medium</code>, or <code>is-large</code> to the <code>pagination</code> component.
     </p>
 
-    {% include snippet.html content=pagination_small_example horizontal=true clipped=true %}
+    {% include snippet.html content=pagination_small_example horizontal=true more=true %}
 
-    {% include snippet.html content=pagination_medium_example horizontal=true clipped=true %}
+    {% include snippet.html content=pagination_medium_example horizontal=true more=true %}
 
-    {% include snippet.html content=pagination_large_example horizontal=true clipped=true %}
+    {% include snippet.html content=pagination_large_example horizontal=true more=true %}
 
     {% include variables.html %}
 

docs/documentation/components/tabs.html

@@ -384,7 +384,7 @@ variables:
 
     {% include snippet.html content=tabs_example horizontal=true %}
 
-    {% include snippet.html content=tabs_example horizontal=true clipped=true %}
+    {% include snippet.html content=tabs_example horizontal=true more=true %}
 
     {% include anchor.html name="Alignment" %}
 
@@ -394,9 +394,9 @@ variables:
       </p>
     </div>
 
-    {% include snippet.html content=tabs_centered_example horizontal=true clipped=true %}
+    {% include snippet.html content=tabs_centered_example horizontal=true more=true %}
 
-    {% include snippet.html content=tabs_right_example horizontal=true clipped=true %}
+    {% include snippet.html content=tabs_right_example horizontal=true more=true %}
 
     {% include anchor.html name="Icons" %}
 
@@ -404,20 +404,20 @@ variables:
       <p>You can use any of the <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a> <strong>icons</strong>.</p>
     </div>
 
-    {% include snippet.html content=tabs_icons_example horizontal=true clipped=true %}
+    {% include snippet.html content=tabs_icons_example horizontal=true more=true %}
 
-    {% include snippet.html content=tabs_icons_example horizontal=true clipped=true %}
+    {% include snippet.html content=tabs_icons_example horizontal=true more=true %}
 
     {% include anchor.html name="Sizes" %}
     <div class="content">
       <p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
     </div>
 
-    {% include snippet.html content=tabs_small_example horizontal=true clipped=true %}
+    {% include snippet.html content=tabs_small_example horizontal=true more=true %}
 
-    {% include snippet.html content=tabs_medium_example horizontal=true clipped=true %}
+    {% include snippet.html content=tabs_medium_example horizontal=true more=true %}
 
-    {% include snippet.html content=tabs_large_example horizontal=true clipped=true %}
+    {% include snippet.html content=tabs_large_example horizontal=true more=true %}
 
     {% include anchor.html name="Styles" %}
 
@@ -425,19 +425,19 @@ variables:
       If you want a more classic style with <strong>borders</strong>, just append the <code>is-boxed</code> modifier.
     </div>
 
-    {% include snippet.html content=tabs_boxed_example horizontal=true clipped=true %}
+    {% include snippet.html content=tabs_boxed_example horizontal=true more=true %}
 
     <p class="content">
       If you want <strong>mutually exclusive</strong> tabs (like radio buttons where clicking one deselects all other ones), use the <code>is-toggle</code> modifier.
     </p>
 
-    {% include snippet.html content=tabs_toggle_example horizontal=true clipped=true %}
+    {% include snippet.html content=tabs_toggle_example horizontal=true more=true %}
 
     <p class="content">
       If you want the tabs to take up the <strong>whole width</strong> available, use <code>is-fullwidth</code>.
     </p>
 
-    {% include snippet.html content=tabs_fullwidth_example horizontal=true clipped=true %}
+    {% include snippet.html content=tabs_fullwidth_example horizontal=true more=true %}
 
     {% include anchor.html name="Combining" %}
 
@@ -445,13 +445,13 @@ variables:
       <p>You can <strong>combine</strong> different modifiers. For example, you can have <strong>centered boxed</strong> tabs, or <strong>fullwidth toggle</strong> ones.</p>
     </div>
 
-    {% include snippet.html content=tabs_centered_boxed_example horizontal=true clipped=true %}
+    {% include snippet.html content=tabs_centered_boxed_example horizontal=true more=true %}
 
-    {% include snippet.html content=tabs_toggle_fullwidth_example horizontal=true clipped=true %}
+    {% include snippet.html content=tabs_toggle_fullwidth_example horizontal=true more=true %}
 
-    {% include snippet.html content=tabs_centered_boxed_medium_example horizontal=true clipped=true %}
+    {% include snippet.html content=tabs_centered_boxed_medium_example horizontal=true more=true %}
 
-    {% include snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true clipped=true %}
+    {% include snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %}
 
     {% include variables.html %}
 

docs/documentation/elements/box.html

@@ -79,7 +79,7 @@ variables:
       </p>
     </div>
 
-    {% include snippet.html content=box_example %}
+    {% include snippet.html content=box_example more=true %}
 
     {% include variables.html %}
 

docs/documentation/elements/button.html

@@ -565,14 +565,11 @@ variables:
 
     <h4 class="subtitle">With Font Awesome icons</h4>
 
-    {% include snippet.html content=button_fa_example %}
+    {% include snippet.html content=button_fa_example clipped=true %}
 
     <div class="columns">
       <div class="column">
         <div class="content">
-          <p>
-            <span class="tag is-success">New!</span>
-          </p>
           <p>
             If the button only contains an icon, Bulma will make sure the button remains <strong>square</strong>, no matter the size of the button <em>or</em> of the icon.
           </p>

docs/documentation/elements/table.html

@@ -387,11 +387,7 @@ variables:
       </p>
     </div>
 
-    <div class="bd-example">
-      {{table_example}}
-    </div>
-
-    {% highlight html %}{{table_example}}{% endhighlight %}
+    {% include snippet.html content=table_example horizontal=true more=true %}
 
     {% include anchor.html name="Modifiers" %}
 

docs/documentation/form/general.html

@@ -945,7 +945,7 @@ variables:
       <p>Use the <code>is-expanded</code> modifier on the element you want to fill up the remaining space (in this case, the input):</p>
     </div>
 
-    {% include snippet.html content=addons_expanded_example horizontal=true clipped=true %}
+    {% include snippet.html content=addons_expanded_example horizontal=true more=true %}
 
     <div class="content">
       <p>If you want a full width select dropdown, pair <code>control is-expanded</code> with <code>select is-fullwidth</code>.</p>
@@ -1011,7 +1011,7 @@ variables:
       <p>You can use <code>is-grouped</code> or <code>has-addons</code> for the child elements.</p>
     </div>
 
-    {% include snippet.html content=horizontal_form_example horizontal=true clipped=true %}
+    {% include snippet.html content=horizontal_form_example horizontal=true more=true %}
 
     <div class="content">
       <p>
@@ -1033,7 +1033,7 @@ variables:
       </ul>
     </div>
 
-    {% include snippet.html content=field_label_example horizontal=true clipped=true %}
+    {% include snippet.html content=field_label_example horizontal=true more=true %}
 
 		{% capture custom_message %}Form elements can be <strong>customized</strong> using the following generic variables. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.{% endcapture %}
 

docs/documentation/layout/footer.html

@@ -10,6 +10,25 @@ variables:
 
 {% include subnav-layout.html %}
 
+{% capture footer_example %}
+<footer class="footer">
+  <div class="container">
+    <div class="content has-text-centered">
+      <p>
+        <strong>Bulma</strong> by <a href="http://jgthms.com">Jeremy Thomas</a>. The source code is licensed
+        <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content
+        is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
+      </p>
+      <p>
+        <a class="icon" href="https://github.com/jgthms/bulma">
+          <i class="fa fa-github"></i>
+        </a>
+      </p>
+    </div>
+  </div>
+</footer>
+{% endcapture %}
+
 <section class="section">
   <div class="container">
     <h1 class="title">Footer</h1>
@@ -17,43 +36,7 @@ variables:
       A simple responsive <strong>footer</strong> which can include anything: lists, headings, columns, icons, buttons, etc.
     </h2>
 
-<div class="bd-example">
-<footer class="footer">
-  <div class="container">
-    <div class="content has-text-centered">
-      <p>
-        <strong>Bulma</strong> by <a href="http://jgthms.com">Jeremy Thomas</a>. The source code is licensed
-        <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content
-        is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
-      </p>
-      <p>
-        <a class="icon" href="https://github.com/jgthms/bulma">
-          <i class="fa fa-github"></i>
-        </a>
-      </p>
-    </div>
-  </div>
-</footer>
-</div>
-
-{% highlight html %}
-<footer class="footer">
-  <div class="container">
-    <div class="content has-text-centered">
-      <p>
-        <strong>Bulma</strong> by <a href="http://jgthms.com">Jeremy Thomas</a>. The source code is licensed
-        <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content
-        is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
-      </p>
-      <p>
-        <a class="icon" href="https://github.com/jgthms/bulma">
-          <i class="fa fa-github"></i>
-        </a>
-      </p>
-    </div>
-  </div>
-</footer>
-{% endhighlight %}
+    {% include snippet.html content=footer_example horizontal=true more=true %}
 
     {% include variables.html layout=true %}
   </div>

docs/documentation/layout/hero.html

@@ -650,27 +650,7 @@ doc-subtab: hero
 {% endcapture %}
 
 <section class="section is-fullwidth">
-  <div class="bd-example">
-    {{ heroNavbarA }}
-  </div>
-
-  <div class="bd-highlight-clipped">
-    {% highlight html %}{{ heroNavbarA }}{% endhighlight %}
-  </div>
-
-  <div class="bd-example">
-    {{ heroNavbarB }}
-  </div>
-
-  <div class="bd-highlight-clipped">
-    {% highlight html %}{{ heroNavbarB }}{% endhighlight %}
-  </div>
-
-  <div class="bd-example">
-    {{ heroNavbarC }}
-  </div>
-
-  <div class="bd-highlight-clipped">
-    {% highlight html %}{{ heroNavbarC }}{% endhighlight %}
-  </div>
+  {% include snippet.html content=heroNavbarA horizontal=true more=true %}
+  {% include snippet.html content=heroNavbarB horizontal=true more=true %}
+  {% include snippet.html content=heroNavbarC horizontal=true more=true %}
 </section>

docs/documentation/layout/level.html

@@ -188,10 +188,7 @@ doc-subtab: level
       </nav>
     </div>
 
-    <div class="bd-example">
-      {{nav_example}}
-    </div>
-    {% highlight html %}{{nav_example}}{% endhighlight %}
+    {% include snippet.html content=nav_example horizontal=true more=true %}
 
     {% include anchor.html name="Centered level" %}
 
@@ -199,17 +196,9 @@ doc-subtab: level
       If you want a <strong>centered level</strong>, you can use as many <code>level-item</code> as you want, as long as they are <strong>direct</strong> children of the <code>level</code> container.
     </div>
 
-    <div class="bd-example">
-      {{nav_centered_example}}
-    </div>
+    {% include snippet.html content=nav_centered_example horizontal=true more=true %}
 
-    {% highlight html %}{{nav_centered_example}}{% endhighlight %}
-
-    <div class="bd-example">
-      {{nav_centered_bis_example}}
-    </div>
-
-    {% highlight html %}{{nav_centered_bis_example}}{% endhighlight %}
+    {% include snippet.html content=nav_centered_bis_example horizontal=true more=true %}
 
     {% include anchor.html name="Mobile level" %}
 
@@ -217,11 +206,7 @@ doc-subtab: level
       By default, for space concerns, the level is vertical on mobile. If you want the level to be horizontal on mobile as well, add the <code>is-mobile</code> modifier on the <code>level</code> container.
     </div>
 
-    <div class="bd-example">
-      {{nav_mobile_example}}
-    </div>
-
-    {% highlight html %}{{nav_mobile_example}}{% endhighlight %}
+    {% include snippet.html content=nav_mobile_example horizontal=true more=true %}
 
   </div>
 </section>

docs/documentation/layout/media-object.html

@@ -203,21 +203,13 @@ doc-subtab: media-object
       </article>
     </div>
 
-    <div class="bd-example">
-      {{media_example}}
-    </div>
-
-    {% highlight html %}{{media_example}}{% endhighlight %}
+    {% include snippet.html content=media_example horizontal=true more=true %}
 
     <div class="content">
       <p>You can include <em>any</em> other Bulma element, like inputs, textareas, icons, buttons... or even a <strong>nav bar</strong>.</p>
     </div>
 
-    <div class="bd-example">
-      {{media_bis_example}}
-    </div>
-
-    {% highlight html %}{{media_bis_example}}{% endhighlight %}
+    {% include snippet.html content=media_bis_example horizontal=true more=true %}
 
     {% include anchor.html name="Nesting" %}
 
@@ -225,11 +217,7 @@ doc-subtab: media-object
       <p>You can nest media objects up to <strong>3 levels</strong> deep.</p>
     </div>
 
-    <div class="bd-example">
-      {{media_nested_example}}
-    </div>
-
-    {% highlight html %}{{media_nested_example}}{% endhighlight %}
+    {% include snippet.html content=media_nested_example horizontal=true more=true %}
 
   </div>
 </section>

docs/documentation/modifiers/syntax.html

@@ -7,6 +7,18 @@ doc-subtab: syntax
 
 {% include subnav-modifiers.html %}
 
+{% capture button_example %}
+<a class="button">
+  Button
+</a>
+{% endcapture %}
+
+{% capture button_primary_example %}
+<a class="button is-primary">
+  Button
+</a>
+{% endcapture %}
+
 <section class="section">
   <div class="container">
     <h1 class="title">Modifiers syntax</h1>
@@ -18,40 +30,26 @@ doc-subtab: syntax
       <div class="column">
         <p>Let's start with a simple <strong>button</strong> that uses the <code>"button"</code> CSS class:</p>
       </div>
-{% capture button_example %}
-<a class="button">
-  Button
-</a>
-{% endcapture %}
       <div class="column">
         <p>
           {{button_example}}
         </p>
       </div>
       <div class="column is-half">
-{% highlight html %}
-{{button_example}}
-{% endhighlight %}
+        {% highlight html %}{{button_example}}{% endhighlight %}
       </div>
     </div>
     <div class="columns">
       <div class="column">
         <p>By <strong>adding</strong> the <code>"is-primary"</code> CSS class, you can modify the <strong>color</strong>:</p>
       </div>
-{% capture button_primary_example %}
-<a class="button is-primary">
-  Button
-</a>
-{% endcapture %}
       <div class="column">
         <p>
-{{button_primary_example}}
+          {{button_primary_example}}
         </p>
       </div>
       <div class="column is-half">
-{% highlight html %}
-{{button_primary_example}}
-{% endhighlight %}
+        {% highlight html %}{{button_primary_example}}{% endhighlight %}
       </div>
     </div>
     <div class="columns">
@@ -85,6 +83,7 @@ doc-subtab: syntax
         </p>
       </div>
       <div class="column is-half">
+        <div class="highlight-full">
 {% highlight html %}
 <a class="button is-primary">
   Button
@@ -102,6 +101,7 @@ doc-subtab: syntax
   Button
 </a>
 {% endhighlight %}
+        </div>
       </div>
     </div>
     <div class="columns">