Add lots of snippets

docs/_includes/snippet.html

@@ -1,8 +1,12 @@
-<div class="bd-snippet">
+<div class="
+  bd-snippet
+  {% if include.horizontal %}bd-is-horizontal{% else %}bd-is-vertical{% endif %}
+  {% if include.size %}bd-is-{{ include.size }}{% endif %}
+  ">
   <div class="bd-snippet-preview">
     {{ 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 %}">
     {% highlight html %}{{ include.content }}{% endhighlight %}
   </div>
 </div>

docs/_includes/subnav-components.html

@@ -1,21 +1,14 @@
 <nav class="navbar has-shadow">
-  <div class="container is-fullhd">
+  <div class="container">
     <div class="navbar-brand">
-      {% if site.vernum >= 43 %}
+      <a class="navbar-item is-tab {% if page.doc-subtab == 'breadcrumb' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/breadcrumb/">
-        <a class="navbar-item is-tab {% if page.doc-subtab == 'breadcrumb' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/breadcrumb/">
+        Breadcrumb
-          Breadcrumb
+      </a>
-        </a>
-      {% endif %}
       <a class="navbar-item is-tab {% if page.doc-subtab == 'card' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/card/">
         Card
       </a>
-      {% if site.vernum >= 44 %}
+      <a class="navbar-item is-tab {% if page.doc-subtab == 'dropdown' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/dropdown/">
-        <a class="navbar-item is-tab {% if page.doc-subtab == 'dropdown' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/dropdown/">
+        Dropdown
-          Dropdown
-        </a>
-      {% endif %}
-      <a class="navbar-item is-tab {% if page.doc-subtab == 'media-object' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/media-object/">
-        Media object
       </a>
       <a class="navbar-item is-tab {% if page.doc-subtab == 'menu' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/menu/">
         Menu
@@ -26,15 +19,9 @@
       <a class="navbar-item is-tab {% if page.doc-subtab == 'modal' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/modal/">
         Modal
       </a>
-      {% if site.vernum >= 43 %}
+      <a class="navbar-item is-tab {% if page.doc-subtab == 'navbar' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/navbar/">
-        <a class="navbar-item is-tab {% if page.doc-subtab == 'navbar' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/navbar/">
+        Navbar
-          Navbar
+      </a>
-        </a>
-      {% else %}
-        <a class="navbar-item is-tab {% if page.doc-subtab == 'nav' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/nav/">
-          Nav
-        </a>
-      {% endif %}
       <a class="navbar-item is-tab {% if page.doc-subtab == 'pagination' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/pagination/">
         Pagination
       </a>

docs/_sass/example.sass

@@ -49,33 +49,41 @@
   position: relative
   &::before
     content: "Snippet"
-  +tablet
     align-items: stretch
     display: flex
 
-.bd-snippet-preview,
-.bd-snippet-code
-  +tablet
-    width: 50%
-
 .bd-snippet-preview
   padding: 1.5rem
 
 .bd-snippet-code
   background-color: $pre-background
-  +tablet
+
-    &,
++desktop
-    .highlight,
+  .bd-snippet.bd-is-vertical
-    .highlight pre
+    align-items: stretch
-      align-items: stretch
+    display: flex
-      display: flex
+    justify-content: center
-      flex-direction: column
+    .bd-snippet-preview,
-    .highlight,
+    .bd-snippet-code
-    .highlight pre,
+      width: 50%
-    .highlight .language-html
+    .bd-snippet-code
-      flex-grow: 1
+      &,
-    .highlight pre
+      .highlight,
-      white-space: pre
+      .highlight pre
+        align-items: stretch
+        display: flex
+        flex-direction: column
+      .highlight,
+      .highlight pre,
+      .highlight .language-html
+        flex-grow: 1
+      .highlight pre
+        white-space: pre
+    &.bd-is-one-third
+      .bd-snippet-preview
+        width: 33.3333%
+      .bd-snippet-code
+        width: 66.6666%
 
 // Highlight
 .highlight.bd-is-hovering
@@ -83,7 +91,7 @@
   box-shadow: 0 0 0 2px $yellow
 
 .highlight pre
-  max-height: 480px
+  max-height: 320px
   margin-bottom: 0 !important
   padding: 0
   code

docs/css/bulma-docs.css

@@ -9622,20 +9622,8 @@ html.route-index #carbon {
 
 .bd-snippet::before {
   content: "Snippet";
-}
+  align-items: stretch;
-
+  display: flex;
-@media screen and (min-width: 769px), print {
-  .bd-snippet {
-    align-items: stretch;
-    display: flex;
-  }
-}
-
-@media screen and (min-width: 769px), print {
-  .bd-snippet-preview,
-  .bd-snippet-code {
-    width: 50%;
-  }
 }
 
 .bd-snippet-preview {
@@ -9646,22 +9634,37 @@ html.route-index #carbon {
   background-color: whitesmoke;
 }
 
-@media screen and (min-width: 769px), print {
+@media screen and (min-width: 1008px) {
-  .bd-snippet-code,
+  .bd-snippet.bd-is-vertical {
-  .bd-snippet-code .highlight,
+    align-items: stretch;
-  .bd-snippet-code .highlight pre {
+    display: flex;
+    justify-content: center;
+  }
+  .bd-snippet.bd-is-vertical .bd-snippet-preview,
+  .bd-snippet.bd-is-vertical .bd-snippet-code {
+    width: 50%;
+  }
+  .bd-snippet.bd-is-vertical .bd-snippet-code,
+  .bd-snippet.bd-is-vertical .bd-snippet-code .highlight,
+  .bd-snippet.bd-is-vertical .bd-snippet-code .highlight pre {
     align-items: stretch;
     display: flex;
     flex-direction: column;
   }
-  .bd-snippet-code .highlight,
+  .bd-snippet.bd-is-vertical .bd-snippet-code .highlight,
-  .bd-snippet-code .highlight pre,
+  .bd-snippet.bd-is-vertical .bd-snippet-code .highlight pre,
-  .bd-snippet-code .highlight .language-html {
+  .bd-snippet.bd-is-vertical .bd-snippet-code .highlight .language-html {
     flex-grow: 1;
   }
-  .bd-snippet-code .highlight pre {
+  .bd-snippet.bd-is-vertical .bd-snippet-code .highlight pre {
     white-space: pre;
   }
+  .bd-snippet.bd-is-vertical.bd-is-one-third .bd-snippet-preview {
+    width: 33.3333%;
+  }
+  .bd-snippet.bd-is-vertical.bd-is-one-third .bd-snippet-code {
+    width: 66.6666%;
+  }
 }
 
 .highlight.bd-is-hovering {
@@ -9670,7 +9673,7 @@ html.route-index #carbon {
 }
 
 .highlight pre {
-  max-height: 480px;
+  max-height: 320px;
   margin-bottom: 0 !important;
   padding: 0;
 }

docs/documentation/components/dropdown.html

@@ -253,11 +253,7 @@ variables:
       </div>
     </div>
 
-    <hr>
+    {% include anchor.html name="Dropdown content" %}
-
-    <h3 class="title">
-      Dropdown content
-    </h3>
 
     <div class="content">
       <p>
@@ -274,11 +270,7 @@ variables:
       </div>
     </div>
 
-    <hr>
+    {% include anchor.html name="Hoverable or Toggable" %}
-
-    <h3 class="title">
-      Hoverable or Toggable
-    </h3>
 
     <div class="content">
       <p>
@@ -309,11 +301,7 @@ variables:
       </div>
     </div>
 
-    <hr>
+    {% include anchor.html name="Right aligned" %}
-
-    <h3 class="title">
-      Right aligned
-    </h3>
 
     <div class="content">
       <p>

docs/documentation/components/menu.html

@@ -73,14 +73,7 @@ variables:
 
     <hr>
 
-    <div class="columns">
+    {% include snippet.html content=menu_example size="one-third" %}
-      <div class="column is-3">
-        {{menu_example}}
-      </div>
-      <div class="column highlight-full">
-        {% highlight html %}{{menu_example}}{% endhighlight %}
-      </div>
-    </div>
 
     {% include variables.html %}
 

docs/documentation/components/message.html

@@ -201,78 +201,29 @@ variables:
 
     <hr>
 
-    <div class="columns">
+    {% include snippet.html content=message_example %}
-      <div class="column is-half">
-        {{message_example}}
-      </div>
-      <div class="column is-half">
-        {% highlight html %}{{message_example}}{% endhighlight %}
-      </div>
-    </div>
 
     {% include anchor.html name="Colors" %}
 
-    <div class="columns">
+    {% include snippet.html content=message_colors_example %}
-      <div class="column is-half">
-        {{message_colors_example}}
-      </div>
-      <div class="column is-half">
-        {% highlight html %}{{message_colors_example}}{% endhighlight %}
-      </div>
-    </div>
 
-    <hr>
+    {% include anchor.html name="Message body only" %}
 
-    <h3 class="title">Message body only</h3>
     <div class="content">
       <p>You can <strong>omit</strong> the message header:</p>
     </div>
-    <div class="columns">
+
-      <div class="column is-half">
+    {% include snippet.html content=message_body_example %}
-        {{message_body_example}}
-      </div>
-      <div class="column is-half">
-        {% highlight html %}{{message_body_example}}{% endhighlight %}
-      </div>
-    </div>
 
     {% include anchor.html name="Sizes" %}
 
-    <div class="columns">
+    {% include snippet.html content=message_small %}
-      <div class="column is-half">
-        {{message_small}}
-      </div>
-      <div class="column is-half">
-        {% highlight html %}{{message_small}}{% endhighlight %}
-      </div>
-    </div>
 
-    <div class="columns">
+    {% include snippet.html content=message_normal %}
-      <div class="column is-half">
-        {{message_normal}}
-      </div>
-      <div class="column is-half">
-        {% highlight html %}{{message_normal}}{% endhighlight %}
-      </div>
-    </div>
 
-    <div class="columns">
+    {% include snippet.html content=message_medium %}
-      <div class="column is-half">
-        {{message_medium}}
-      </div>
-      <div class="column is-half">
-        {% highlight html %}{{message_medium}}{% endhighlight %}
-      </div>
-    </div>
 
-    <div class="columns">
+    {% include snippet.html content=message_large %}
-      <div class="column is-half">
-        {{message_large}}
-      </div>
-      <div class="column is-half">
-        {% highlight html %}{{message_large}}{% endhighlight %}
-      </div>
-    </div>
 
     {% include variables.html %}
 

docs/documentation/components/pagination.html

@@ -245,11 +245,7 @@ variables:
 
     {% highlight html %}{{pagination_right_example}}{% endhighlight %}
 
-    <hr style="margin-bottom: 0;">
+    {% include anchor.html name="Sizes" %}
-
-    <h2 id="sizes" class="title" style="padding-top: 1.5rem;">
-      Sizes
-    </h2>
 
     <p class="content">
       The pagination comes in <strong>3 additional sizes</strong>.<br>

docs/documentation/components/panel.html

@@ -152,14 +152,7 @@ variables:
       </p>
     </div>
 
-    <div class="columns">
+    {% include snippet.html content=panel_example size="one-third" %}
-      <div class="column is-4">
-        {{panel_example}}
-      </div>
-      <div class="column">
-        {% highlight html %}{{panel_example}}{% endhighlight %}
-      </div>
-    </div>
 
     {% include variables.html %}
 

docs/documentation/components/tabs.html

@@ -382,118 +382,76 @@ variables:
         The <strong>default</strong> tabs style has a single border at the bottom.</p>
     </div>
 
-    <div class="bd-example">
+    {% include snippet.html content=tabs_example horizontal=true %}
-      {{tabs_example}}
-    </div>
-    {% highlight html %}{{tabs_example}}{% endhighlight %}
 
-    <hr>
+    {% include snippet.html content=tabs_example horizontal=true clipped=true %}
+
+    {% include anchor.html name="Alignment" %}
 
-    <h3 class="title">Alignment</h3>
     <div class="content">
       <p>
         To align the tabs list, use the <code>is-centered</code> or <code>is-right</code> modifier on the <code>.tabs</code> container:
       </p>
     </div>
 
-    <div class="bd-example">
+    {% include snippet.html content=tabs_centered_example horizontal=true clipped=true %}
-      {{tabs_centered_example}}
-    </div>
-    {% highlight html %}{{tabs_centered_example}}{% endhighlight %}
 
-    <div class="bd-example">
+    {% include snippet.html content=tabs_right_example horizontal=true clipped=true %}
-      {{tabs_right_example}}
-    </div>
-    {% highlight html %}{{tabs_right_example}}{% endhighlight %}
 
-    <hr>
+    {% include anchor.html name="Icons" %}
 
-    <h3 class="title">Icons</h3>
     <div class="content">
       <p>You can use any of the <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a> <strong>icons</strong>.</p>
     </div>
 
-    <div class="bd-example">
+    {% include snippet.html content=tabs_icons_example horizontal=true clipped=true %}
-      {{tabs_icons_example}}
+
-    </div>
+    {% include snippet.html content=tabs_icons_example horizontal=true clipped=true %}
-    {% highlight html %}{{tabs_icons_example}}{% endhighlight %}
 
     {% 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>
 
-    <div class="bd-example">
+    {% include snippet.html content=tabs_small_example horizontal=true clipped=true %}
-      {{tabs_small_example}}
-    </div>
-    {% highlight html %}{{tabs_small_example}}{% endhighlight %}
 
-    <div class="bd-example">
+    {% include snippet.html content=tabs_medium_example horizontal=true clipped=true %}
-      {{tabs_medium_example}}
-    </div>
-    {% highlight html %}{{tabs_medium_example}}{% endhighlight %}
 
-    <div class="bd-example">
+    {% include snippet.html content=tabs_large_example horizontal=true clipped=true %}
-      {{tabs_large_example}}
-    </div>
-    {% highlight html %}{{tabs_large_example}}{% endhighlight %}
 
-    <hr>
+    {% include anchor.html name="Styles" %}
 
-    <h3 class="title">Styles</h3>
     <div class="content">
       If you want a more classic style with <strong>borders</strong>, just append the <code>is-boxed</code> modifier.
     </div>
 
-    <div class="bd-example">
+    {% include snippet.html content=tabs_boxed_example horizontal=true clipped=true %}
-      {{tabs_boxed_example}}
-    </div>
-    {% highlight html %}{{tabs_boxed_example}}{% endhighlight %}
 
     <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>
 
-    <div class="bd-example">
+    {% include snippet.html content=tabs_toggle_example horizontal=true clipped=true %}
-      {{tabs_toggle_example}}
-    </div>
-    {% highlight html %}{{tabs_toggle_example}}{% endhighlight %}
 
     <p class="content">
       If you want the tabs to take up the <strong>whole width</strong> available, use <code>is-fullwidth</code>.
     </p>
 
-    <div class="bd-example">
+    {% include snippet.html content=tabs_fullwidth_example horizontal=true clipped=true %}
-      {{tabs_fullwidth_example}}
-    </div>
-    {% highlight html %}{{tabs_fullwidth_example}}{% endhighlight %}
 
-    <hr>
+    {% include anchor.html name="Combining" %}
 
-    <h3 class="title">Combining</h3>
     <div class="content">
       <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>
 
-    <div class="bd-example">
+    {% include snippet.html content=tabs_centered_boxed_example horizontal=true clipped=true %}
-      {{tabs_centered_boxed_example}}
-    </div>
-    {% highlight html %}{{tabs_centered_boxed_example}}{% endhighlight %}
 
-    <div class="bd-example">
+    {% include snippet.html content=tabs_toggle_fullwidth_example horizontal=true clipped=true %}
-      {{tabs_toggle_fullwidth_example}}
-    </div>
-    {% highlight html %}{{tabs_toggle_fullwidth_example}}{% endhighlight %}
 
-    <div class="bd-example">
+    {% include snippet.html content=tabs_centered_boxed_medium_example horizontal=true clipped=true %}
-      {{tabs_centered_boxed_medium_example}}
-    </div>
-    {% highlight html %}{{tabs_centered_boxed_medium_example}}{% endhighlight %}
 
-    <div class="bd-example">
+    {% include snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true clipped=true %}
-      {{tabs_toggle_fullwidth_large_example}}
-    </div>
-    {% highlight html %}{{tabs_toggle_fullwidth_large_example}}{% endhighlight %}
 
     {% include variables.html %}
 

docs/documentation/elements/content.html

@@ -164,7 +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>
 
-    {% include snippet.html content=content_example fullheight=true %}
+    {% include snippet.html content=content_example %}
 
     {% include anchor.html name="Sizes" %}