Improve snippet

docs/_includes/snippet.html

@@ -16,10 +16,10 @@
     {% if include.clipped %}bd-is-clipped{% endif %}
     {% if include.size %}bd-is-{{ include.size }}{% endif %}
     ">
-    <div class="bd-snippet-preview">
+    <div class="bd-snippet-preview {% if include.paddingless %}is-paddingless{% endif %}">
       {{ include.content }}
     </div>
-    <div class="bd-snippet-code {% unless include.clipped %}highlight-full{% endunless %}">
+    <div class="bd-snippet-code {% unless include.clipped %}highlight-full{% endunless %} {% if include.more %}bd-is-more bd-is-more-clipped{% endif %}">
       {% highlight html %}{{ include.content }}{% endhighlight %}
     </div>
   </div>

docs/_javascript/main.js

@@ -107,15 +107,12 @@ document.addEventListener('DOMContentLoaded', () => {
       const expandEl = '<button class="button is-small bd-expand">Expand</button>';
       $el.insertAdjacentHTML('beforeend', copyEl);
 
-      if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
-        $el.insertAdjacentHTML('beforeend', expandEl);
-      }
-
       const $parent = $el.parentNode;
-      if ($parent && $parent.className == 'bd-highlight-clipped') {
+      if ($parent && $parent.classList.contains('bd-is-more')) {
         const showEl = '<button class="bd-show"><div><span class="icon"><i class="fa fa-code"></i></span> <strong>Show code</strong></div></button>';
-        $el.classList.add('bd-is-clipped');
         $el.insertAdjacentHTML('beforeend', showEl);
+      } else if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
+        $el.insertAdjacentHTML('beforeend', expandEl);
       }
 
       itemsProcessed++;
@@ -146,11 +143,11 @@ document.addEventListener('DOMContentLoaded', () => {
       });
     });
 
-    const $highlightShows = getAll('.bd-highlight-clipped .bd-show');
+    const $highlightShows = getAll('.highlight .bd-show');
 
     $highlightShows.forEach($el => {
       $el.addEventListener('click', () => {
-        $el.parentNode.classList.remove('bd-is-clipped');
+        $el.parentNode.parentNode.classList.remove('bd-is-more-clipped');
       });
     });
   }

docs/_sass/example.sass

@@ -33,6 +33,8 @@
     margin-bottom: 1.5rem
 
 .bd-example
+  &.bd-is-clipped
+    border-top-right-radius: $radius-large
   & + .highlight
     border: 1px solid $yellow
     border-radius: 0 0 $radius $radius
@@ -40,10 +42,6 @@
     margin-top: -1.5rem
     &:not(:last-child)
       margin-bottom: 1.5rem
-  & + .bd-highlight-clipped
-    margin-top: -1.5rem
-    &:not(:last-child)
-      margin-bottom: 1.5rem
 
 // Snippet
 .bd-snippet
@@ -62,6 +60,23 @@
 .bd-snippet-code
   background-color: $pre-background
 
+.bd-snippet-code.bd-is-more.bd-is-more-clipped
+  .highlight
+    height: 2em
+    overflow: hidden
+    pre
+      overflow: hidden
+    .bd-show
+      display: flex
+
+.bd-snippet.bd-is-horizontal
+  border-radius: $radius-large
+  border-top-left-radius: 0
+  .bd-snippet-code.bd-is-more.bd-is-more-clipped
+    .highlight
+      pre
+        padding-top: 0.325rem
+
 .bd-snippet.bd-is-clipped
   .bd-snippet-code
     overflow: auto
@@ -69,6 +84,8 @@
 +desktop
   .bd-snippet.bd-is-vertical
     align-items: stretch
+    border-radius: $radius-large
+    border-top-left-radius: 0
     display: flex
     justify-content: center
     .bd-snippet-preview,
@@ -79,6 +96,7 @@
       .highlight,
       .highlight pre
         align-items: stretch
+        border-radius: 0 $radius-large $radius-large 0
         display: flex
         flex-direction: column
       .highlight,
@@ -171,36 +189,26 @@ $structure-invert: $danger-invert
       box-shadow: none
   .bd-expand
     right: 45px
-  +tablet
-    pre
-      white-space: pre-wrap
-
-.bd-highlight-clipped
   .bd-show
     +overlay
     align-items: center
-    background-color: rgba(#000, 0.9)
+    background-color: rgba($background, 0.7)
-    background-image: linear-gradient(rgba(#000, 0), rgba(#000, 0) 90%, rgba(#000, 1))
     border: none
-    color: $white
+    color: rgba(#000, 0.5)
     cursor: pointer
     display: none
-    font-size: $size-6
+    font-size: $size-small
     justify-content: center
-    opacity: 0.7
     width: 100%
     strong
       color: currentColor
       font-weight: $weight-semibold
     &:hover
-      opacity: 0.8
+      background-color: rgba($yellow, 0.8)
-  .highlight.bd-is-clipped
+      color: rgba(#000, 0.7)
-    height: 4em
+  +tablet
-    overflow: hidden
     pre
-        overflow: hidden
+      white-space: pre-wrap
-    .bd-show
-      display: flex
 
 +tablet
   .section:not(.is-fullwidth) > .bd-example:not(.is-fullwidth)
@@ -212,6 +220,10 @@ $structure-invert: $danger-invert
 
 .section.is-fullwidth
   padding: 0 !important
+  .bd-snippet
+    border-left: none
+    border-radius: 0
+    border-right: none
   .bd-example
     border-left: none
     border-radius: 0

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">
+    {% include snippet.html content=navbar_transparent_example paddingless=true horizontal=true more=true %}
-      {{navbar_transparent_example}}
-    </div>
-
-    {% highlight html %}{{navbar_transparent_example}}{% endhighlight %}
 
     {% 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">
+    {% include snippet.html content=table_example horizontal=true more=true %}
-      {{table_example}}
-    </div>
-
-    {% highlight html %}{{table_example}}{% endhighlight %}
 
     {% 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">
+    {% include snippet.html content=footer_example horizontal=true more=true %}
-<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 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">
+  {% include snippet.html content=heroNavbarA horizontal=true more=true %}
-    {{ heroNavbarA }}
+  {% include snippet.html content=heroNavbarB horizontal=true more=true %}
-  </div>
+  {% include snippet.html content=heroNavbarC horizontal=true more=true %}
-
-  <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>
 </section>

docs/documentation/layout/level.html

@@ -188,10 +188,7 @@ doc-subtab: level
       </nav>
     </div>
 
-    <div class="bd-example">
+    {% include snippet.html content=nav_example horizontal=true more=true %}
-      {{nav_example}}
-    </div>
-    {% highlight html %}{{nav_example}}{% endhighlight %}
 
     {% 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">
+    {% include snippet.html content=nav_centered_example horizontal=true more=true %}
-      {{nav_centered_example}}
-    </div>
 
-    {% highlight html %}{{nav_centered_example}}{% endhighlight %}
+    {% include snippet.html content=nav_centered_bis_example horizontal=true more=true %}
-
-    <div class="bd-example">
-      {{nav_centered_bis_example}}
-    </div>
-
-    {% highlight html %}{{nav_centered_bis_example}}{% endhighlight %}
 
     {% 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">
+    {% include snippet.html content=nav_mobile_example horizontal=true more=true %}
-      {{nav_mobile_example}}
-    </div>
-
-    {% highlight html %}{{nav_mobile_example}}{% endhighlight %}
 
   </div>
 </section>

docs/documentation/layout/media-object.html

@@ -203,21 +203,13 @@ doc-subtab: media-object
       </article>
     </div>
 
-    <div class="bd-example">
+    {% include snippet.html content=media_example horizontal=true more=true %}
-      {{media_example}}
-    </div>
-
-    {% highlight html %}{{media_example}}{% endhighlight %}
 
     <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">
+    {% include snippet.html content=media_bis_example horizontal=true more=true %}
-      {{media_bis_example}}
-    </div>
-
-    {% highlight html %}{{media_bis_example}}{% endhighlight %}
 
     {% 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">
+    {% include snippet.html content=media_nested_example horizontal=true more=true %}
-      {{media_nested_example}}
-    </div>
-
-    {% highlight html %}{{media_nested_example}}{% endhighlight %}
 
   </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 %}
+        {% highlight html %}{{button_example}}{% endhighlight %}
-{{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 %}
+        {% highlight html %}{{button_primary_example}}{% endhighlight %}
-{{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">

docs/lib/main.js

@@ -109,15 +109,12 @@ document.addEventListener('DOMContentLoaded', function () {
       var expandEl = '<button class="button is-small bd-expand">Expand</button>';
       $el.insertAdjacentHTML('beforeend', copyEl);
 
-      if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
-        $el.insertAdjacentHTML('beforeend', expandEl);
-      }
-
       var $parent = $el.parentNode;
-      if ($parent && $parent.className == 'bd-highlight-clipped') {
+      if ($parent && $parent.classList.contains('bd-is-more')) {
         var showEl = '<button class="bd-show"><div><span class="icon"><i class="fa fa-code"></i></span> <strong>Show code</strong></div></button>';
-        $el.classList.add('bd-is-clipped');
         $el.insertAdjacentHTML('beforeend', showEl);
+      } else if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
+        $el.insertAdjacentHTML('beforeend', expandEl);
       }
 
       itemsProcessed++;
@@ -148,11 +145,11 @@ document.addEventListener('DOMContentLoaded', function () {
       });
     });
 
-    var $highlightShows = getAll('.bd-highlight-clipped .bd-show');
+    var $highlightShows = getAll('.highlight .bd-show');
 
     $highlightShows.forEach(function ($el) {
       $el.addEventListener('click', function () {
-        $el.parentNode.classList.remove('bd-is-clipped');
+        $el.parentNode.parentNode.classList.remove('bd-is-more-clipped');
       });
     });
   }