Create snippet component

docs/_includes/anchor.html

@@ -1,6 +1,6 @@
 <hr style="margin-bottom: 0;">
 
-<h3 id="{{ include.name | slugify }}" class="title is-4 bd-anchor-title">
+<h3 id="{{ include.name | slugify }}" class="title is-4 is-spaced bd-anchor-title">
   {{ include.name }}
   <a class="bd-anchor-link" href="#{{ include.name | slugify }}">
     #

docs/_includes/snippet.html

@@ -0,0 +1,8 @@
+<div class="bd-snippet">
+  <div class="bd-snippet-preview">
+    {{ include.content }}
+  </div>
+  <div class="bd-snippet-code">
+    {% highlight html %}{{ include.content }}{% endhighlight %}
+  </div>
+</div>

docs/_sass/example.sass

@@ -1,18 +1,13 @@
 .bd-example,
-.bd-structure
-  border: 1px solid $warning
-  border-top-right-radius: $radius
-  color: $warning-invert
-  padding: 1.5rem
+.bd-structure,
+.bd-snippet
+  border: 1px solid $yellow
   position: relative
-  &:not(:first-child)
-    margin-top: 2rem
-  &:not(:last-child)
-    margin-bottom: 1.5rem
   &:before
-    background: $warning
+    background: $yellow
     border-radius: $radius $radius 0 0
     bottom: 100%
+    color: $yellow-invert
     content: "Example"
     display: inline-block
     font-size: 7px
@@ -29,18 +24,56 @@
       border-right: none
       padding: 0
 
+.bd-example,
+.bd-structure
+  padding: 1.5rem
+  &:not(:first-child)
+    margin-top: 2rem
+  &:not(:last-child)
+    margin-bottom: 1.5rem
+
 .bd-example
   & + .highlight
-    border: 1px solid $warning
+    border: 1px solid $yellow
     border-radius: 0 0 $radius $radius
     border-top: none
     margin-top: -1.5rem
     &:not(:last-child)
       margin-bottom: 1.5rem
 
+// Snippet
+.bd-snippet
+  +block
+  border: 1px solid $yellow
+  margin-top: 2rem
+  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
+    align-items: stretch
+    display: flex
+    flex-direction: column
+    .highlight
+      flex-grow: 1
+
+// Highlight
 .highlight.bd-is-hovering
   border-radius: 2px
-  box-shadow: 0 0 0 3px $border
+  box-shadow: 0 0 0 2px $yellow
 
 .highlight pre
   max-height: 480px
@@ -111,8 +144,8 @@ $structure-invert: $danger-invert
     right: 0.25rem
     top: 0.25rem
     &:hover
-      background-color: $text
-      color: $white
+      background-color: $yellow
+      color: $yellow-invert
   .bd-expand
     right: 45px
   +tablet

docs/bulma-docs.sass

@@ -21,6 +21,3 @@ $twitter: #55acee
 @import "./_sass/love"
 @import "./_sass/bootstrap"
 @import "./_sass/klmn"
-
-// .columns
-//   background-color: coral

docs/css/bulma-docs.css

@@ -9549,29 +9549,19 @@ html.route-index #carbon {
 }
 
 .bd-example,
-.bd-structure {
+.bd-structure,
+.bd-snippet {
   border: 1px solid #ffdd57;
-  border-top-right-radius: 3px;
-  color: rgba(0, 0, 0, 0.7);
-  padding: 1.5rem;
   position: relative;
 }
 
-.bd-example:not(:first-child),
-.bd-structure:not(:first-child) {
-  margin-top: 2rem;
-}
-
-.bd-example:not(:last-child),
-.bd-structure:not(:last-child) {
-  margin-bottom: 1.5rem;
-}
-
 .bd-example:before,
-.bd-structure:before {
+.bd-structure:before,
+.bd-snippet:before {
   background: #ffdd57;
   border-radius: 3px 3px 0 0;
   bottom: 100%;
+  color: rgba(0, 0, 0, 0.7);
   content: "Example";
   display: inline-block;
   font-size: 7px;
@@ -9586,13 +9576,29 @@ html.route-index #carbon {
 
 @media screen and (min-width: 769px), print {
   .bd-example.is-fullwidth,
-  .bd-structure.is-fullwidth {
+  .bd-structure.is-fullwidth,
+  .bd-snippet.is-fullwidth {
     border-left: none;
     border-right: none;
     padding: 0;
   }
 }
 
+.bd-example,
+.bd-structure {
+  padding: 1.5rem;
+}
+
+.bd-example:not(:first-child),
+.bd-structure:not(:first-child) {
+  margin-top: 2rem;
+}
+
+.bd-example:not(:last-child),
+.bd-structure:not(:last-child) {
+  margin-bottom: 1.5rem;
+}
+
 .bd-example + .highlight {
   border: 1px solid #ffdd57;
   border-radius: 0 0 3px 3px;
@@ -9604,9 +9610,56 @@ html.route-index #carbon {
   margin-bottom: 1.5rem;
 }
 
+.bd-snippet {
+  border: 1px solid #ffdd57;
+  margin-top: 2rem;
+  position: relative;
+}
+
+.bd-snippet:not(:last-child) {
+  margin-bottom: 1.5rem;
+}
+
+.bd-snippet::before {
+  content: "Snippet";
+}
+
+@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 {
+  padding: 1.5rem;
+}
+
+.bd-snippet-code {
+  background-color: whitesmoke;
+}
+
+@media screen and (min-width: 769px), print {
+  .bd-snippet-code {
+    align-items: stretch;
+    display: flex;
+    flex-direction: column;
+  }
+  .bd-snippet-code .highlight {
+    flex-grow: 1;
+  }
+}
+
 .highlight.bd-is-hovering {
   border-radius: 2px;
-  box-shadow: 0 0 0 3px #dbdbdb;
+  box-shadow: 0 0 0 2px #ffdd57;
 }
 
 .highlight pre {
@@ -9706,8 +9759,8 @@ html.route-index #carbon {
 
 .highlight .bd-copy:hover,
 .highlight .bd-expand:hover {
-  background-color: #4a4a4a;
-  color: white;
+  background-color: #ffdd57;
+  color: rgba(0, 0, 0, 0.7);
 }
 
 .highlight .bd-expand {

docs/documentation/elements/button.html

@@ -425,14 +425,7 @@ variables:
       </p>
     </div>
 
-    <div class="columns">
-      <div class="column">
-        {{button_example}}
-      </div>
-      <div class="column">
-        {% highlight html %}{{button_example}}{% endhighlight %}
-      </div>
-    </div>
+    {% include snippet.html content=button_example %}
 
     <div class="content">
       <p>
@@ -454,59 +447,23 @@ variables:
       </ul>
     </div>
 
-    <div class="columns">
-      <div class="column">
-        {{button_tags_example}}
-      </div>
-      <div class="column">
-        {% highlight html %}{{button_tags_example}}{% endhighlight %}
-      </div>
-    </div>
+    {% include snippet.html content=button_tags_example %}
 
     {% include anchor.html name="Colors" %}
 
-    <div class="columns">
-      <div class="column">
-        {{button_colors_a_example}}
-      </div>
-      <div class="column">
-        {% highlight html %}{{button_colors_a_example}}{% endhighlight %}
-      </div>
-    </div>
+    {% include snippet.html content=button_colors_a_example %}
 
-    <div class="columns">
-      <div class="column">
-        {{button_colors_b_example}}
-      </div>
-      <div class="column">
-        {% highlight html %}{{button_colors_b_example}}{% endhighlight %}
-      </div>
-    </div>
+    {% include snippet.html content=button_colors_b_example %}
 
     {% include anchor.html name="Sizes" %}
 
-    <div class="columns">
-      <div class="column">
-        {{button_sizes_example}}
-      </div>
-      <div class="column">
-        {% highlight html %}{{button_sizes_example}}{% endhighlight %}
-      </div>
-    </div>
+    {% include snippet.html content=button_sizes_example %}
 
-    <hr>
+    {% include anchor.html name="Styles" %}
 
-    <h3 class="title">Styles</h3>
     <h4 class="subtitle">Outlined</h4>
 
-    <div class="columns">
-      <div class="column">
-        {{button_outlined_example}}
-      </div>
-      <div class="column">
-        {% highlight html %}{{button_outlined_example}}{% endhighlight %}
-      </div>
-    </div>
+    {% include snippet.html content=button_outlined_example %}
 
     <h4 class="subtitle">Inverted (the text color becomes the background color, and vice-versa)</h4>
 
@@ -517,7 +474,7 @@ variables:
         </div>
       </div>
       <div class="column">
-    {% highlight html %}{{button_inverted_example}}{% endhighlight %}
+        {% highlight html %}{{button_inverted_example}}{% endhighlight %}
       </div>
     </div>
 
@@ -534,52 +491,23 @@ variables:
       </div>
     </div>
 
-    <hr>
+    {% include anchor.html name="States" %}
 
-    <h3 class="title">States</h3>
     <h4 class="subtitle">Normal</h4>
 
-    <div class="columns">
-      <div class="column">
-        {{button_normal_example}}
-      </div>
-      <div class="column">
-        {% highlight html %}{{button_normal_example}}{% endhighlight %}
-      </div>
-    </div>
+    {% include snippet.html content=button_normal_example %}
 
     <h4 class="subtitle">Hover</h4>
 
-    <div class="columns">
-      <div class="column">
-        {{button_hover_example}}
-      </div>
-      <div class="column">
-        {% highlight html %}{{button_hover_example}}{% endhighlight %}
-      </div>
-    </div>
+    {% include snippet.html content=button_hover_example %}
 
     <h4 class="subtitle">Focus</h4>
 
-    <div class="columns">
-      <div class="column">
-        {{button_focus_example}}
-      </div>
-      <div class="column">
-        {% highlight html %}{{button_focus_example}}{% endhighlight %}
-      </div>
-    </div>
+    {% include snippet.html content=button_focus_example %}
 
     <h4 class="subtitle">Active</h4>
 
-    <div class="columns">
-      <div class="column">
-        {{button_active_example}}
-      </div>
-      <div class="column">
-        {% highlight html %}{{button_active_example}}{% endhighlight %}
-      </div>
-    </div>
+    {% include snippet.html content=button_active_example %}
 
     <h4 class="subtitle">Loading</h4>
 
@@ -643,14 +571,7 @@ variables:
 
     <h4 class="subtitle">With Font Awesome icons</h4>
 
-    <div class="columns">
-      <div class="column">
-        {{button_fa_example}}
-      </div>
-      <div class="column">
-        {% highlight html %}{{button_fa_example}}{% endhighlight %}
-      </div>
-    </div>
+    {% include snippet.html content=button_fa_example %}
 
     <div class="columns">
       <div class="column">
@@ -669,40 +590,29 @@ variables:
       </div>
     </div>
 
-    <hr>
+    {% include anchor.html name="Button group" %}
 
-    <h3 class="title">Button group</h3>
     <div class="content">
-      <p>If you want to <strong>group</strong> buttons together, use the <code>is-grouped</code> modifier on the <code>field</code> container:</p>
+      <p>If you want to <strong>group</strong> buttons together on a <strong>single line</strong>, use the <code>is-grouped</code> modifier on the <code>field</code> container:</p>
     </div>
-    <div class="bd-example">
-      {{button_group_example}}
-    </div>
-    {% highlight html %}{{button_group_example}}{% endhighlight %}
 
-    <hr>
+    {% include snippet.html content=button_group_example %}
+
+    {% include anchor.html name="Button addons" %}
 
-    <h3 class="title">Button addons</h3>
     <div class="content">
       <p>If you want to use buttons as <strong>addons</strong>, use the <code>has-addons</code> modifier on the <code>field</code> container:</p>
     </div>
 
-    <div class="bd-example">
-      {{button_addons_example}}
-    </div>
-    {% highlight html %}{{button_addons_example}}{% endhighlight %}
+    {% include snippet.html content=button_addons_example %}
 
-    <hr>
+    {% include anchor.html name="Button group with addons" %}
 
-    <h3 class="title">Button group with addons</h3>
     <div class="content">
       <p>You can group together addons as well:</p>
     </div>
 
-    <div class="bd-example">
-      {{button_group_addons_example}}
-    </div>
-    {% highlight html %}{{button_group_addons_example}}{% endhighlight %}
+    {% include snippet.html content=button_group_addons_example %}
 
     {% include variables.html %}
 

docs/documentation/elements/table.html

@@ -399,9 +399,7 @@ variables:
 
     {% highlight html %}{{table_example}}{% endhighlight %}
 
-    <hr>
-
-    <h3 class="title">Modifiers</h3>
+    {% include anchor.html name="Modifiers" %}
 
     <div class="columns">
       <div class="column">

docs/documentation/layout/container.html

@@ -81,7 +81,7 @@ doc-subtab: container
 
 <section class="section">
 <div class="container">
-  <h3 class="title">Fluid container</h3>
+  <h3 class="title is-4">Fluid container</h3>
   <div class="content">
     <p>If you don't want to have a maximum width but want to keep the 24px margin on the left and right sides, add the <code>is-fluid</code> modifier:</p>
   </div>
@@ -96,7 +96,7 @@ doc-subtab: container
 
 <section class="section">
 <div class="container">
-  <h3 class="title">Breakpoint containers</h3>
+  <h3 class="title is-4">Breakpoint containers</h3>
   <div class="content">
     <p>
       <span class="tag is-success">New!</span>

docs/documentation/layout/media-object.html

@@ -219,9 +219,8 @@ doc-subtab: media-object
 
     {% highlight html %}{{media_bis_example}}{% endhighlight %}
 
-    <hr>
+    {% include anchor.html name="Nesting" %}
 
-    <h3 class="title">Nesting</h3>
     <div class="content">
       <p>You can nest media objects up to <strong>3 levels</strong> deep.</p>
     </div>

docs/documentation/layout/tiles.html

@@ -24,9 +24,8 @@ doc-subtab: tiles
 </div>
 {% endhighlight %}
 
-    <hr>
+    {% include anchor.html name="Example" %}
 
-    <h3 class="title">Example</h3>
     <div class="tile is-ancestor">
       <div class="tile is-vertical is-8">
         <div class="tile">
@@ -123,9 +122,8 @@ doc-subtab: tiles
 </div>
 {% endhighlight %}
 
-    <hr>
+    {% include anchor.html name="Modifiers" %}
 
-    <h3 class="title">Modifiers</h3>
 
     <div class="content">
       <p>The <code>tile</code> element has <strong>16 modifiers</strong>:</p>
@@ -154,9 +152,8 @@ doc-subtab: tiles
       </ul>
     </div>
 
-    <hr>
+    {% include anchor.html name="How it works: Nesting" %}
 
-    <h3 class="title">How it works: Nesting</h3>
     <div class="content">
       <p>Everything is a tile! To create a grid of tiles, you only need to <strong>nest</strong> <code>tile</code> elements.</p>
     </div>
@@ -313,9 +310,8 @@ doc-subtab: tiles
 </div>
 {% endhighlight %}
 
-    <hr>
+    {% include anchor.html name="Nesting requirements" %}
 
-    <h3 class="title">Nesting requirements</h3>
 
     <article class="message is-danger">
       <div class="message-header">
@@ -446,9 +442,8 @@ tile is-ancestor
 </div>
 {% endhighlight %}
 
-    <hr>
+    {% include anchor.html name="3 columns" %}
 
-    <h3 class="title">3 columns</h3>
 
     <div class="tile is-ancestor">
       <div class="tile is-parent">
@@ -636,9 +631,8 @@ tile is-ancestor
 </div>
 {% endhighlight %}
 
-    <hr>
+    {% include anchor.html name="4 columns" %}
 
-    <h3 class="title">4 columns</h3>
 
     <div class="tile is-ancestor">
       <div class="tile is-parent">

docs/documentation/modifiers/responsive-helpers.html

@@ -66,9 +66,7 @@ doc-subtab: responsive-helpers
     <h1 class="title">Responsive helpers</h1>
     <h2 class="subtitle"><strong>Show/hide content</strong> depending on the width of the viewport</h2>
 
-    <hr>
-
-    <h3 class="title">Show</h3>
+    {% include anchor.html name="Show" %}
 
     <div class="content">
       <p>
@@ -186,11 +184,12 @@ doc-subtab: responsive-helpers
     </table>
 
     <div class="content">
-      <p>For the other display options, just replace <code>is-flex</code> with <code>is-block</code> <code>is-inline</code> <code>is-inline-block</code> or <code>is-inline-flex</code>
-
-    <hr>
+      <p>
+        For the other display options, just replace <code>is-flex</code> with <code>is-block</code> <code>is-inline</code> <code>is-inline-block</code> or <code>is-inline-flex</code>
+      </p>
+    </div>
 
-    <h3 class="title">Hide</h3>
+    {% include anchor.html name="Hide" %}
 
     <table class="table is-bordered">
       {{ thead }}

docs/documentation/modifiers/typography-helpers.html

@@ -62,9 +62,7 @@ doc-subtab: typography-helpers
       Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width
     </h2>
 
-    <hr>
-
-    <h3 class="title">Size</h3>
+    {% include anchor.html name="Size" %}
 
     <div class="content">
       <p>
@@ -115,11 +113,7 @@ doc-subtab: typography-helpers
       </tbody>
     </table>
 
-    <hr>
-
-    <h3 class="title">
-      Responsive size
-    </h3>
+    {% include anchor.html name="Responsive size" %}
 
     <div class="content">
       <p>
@@ -190,11 +184,7 @@ doc-subtab: typography-helpers
       </p>
     </div>
 
-    <hr>
-
-    <h3 class="title">
-      Colors
-    </h3>
+    {% include anchor.html name="Colors" %}
 
     <div class="content">
       <p>
@@ -235,9 +225,7 @@ doc-subtab: typography-helpers
       </tbody>
     </table>
 
-    <hr>
-
-    <h3 class="title">Alignment</h3>
+    {% include anchor.html name="Alignment" %}
 
     <div class="content">
       <p>
@@ -272,15 +260,13 @@ doc-subtab: typography-helpers
       </tbody>
     </table>
 
-    <hr>
-
-    <h3 class="title">Responsive Alignment</h3>
+    {% include anchor.html name="Responsive Alignment" %}
 
     <div class="content">
       <p>
         You can now <strong>align text</strong> for <em>each</em> viewport width. You simply need to append the <strong>viewport width</strong> to the alignment modifier.
       </p>
-      
+
       <p>
         For example, here are the modifiers for <code>.has-text-left</code>:
       </p>
@@ -364,9 +350,7 @@ doc-subtab: typography-helpers
       </tbody>
     </table>
 
-    <hr>
-
-    <h3 class="title">Text transformation</h3>
+    {% include anchor.html name="Text transformation" %}
 
     <div class="content">
       <p>

docs/documentation/overview/functions.html

@@ -23,9 +23,7 @@ doc-subtab: functions
       </ul>
     </div>
 
-    <hr>
-
-    <h2 id="findColorInvert" class="title">The <code>findColorInvert()</code> function</h2>
+    {% include anchor.html name="The <code>findColorInvert()</code> function" %}
 
     <div class="content">
       <p>The <code>findColorInvert($color)</code> function takes a <strong>color</strong> as an input, and outputs either transparent <strong>black</strong> <code>rgba(#000, 0.7)</code> or <strong>white</strong> <code>#fff</code>:</p>

docs/documentation/overview/responsiveness.html

@@ -12,9 +12,8 @@ doc-subtab: responsiveness
     <h1 class="title">Responsiveness</h1>
     <h2 class="subtitle">Bulma is a <strong>mobile-first</strong> framework</h2>
 
-    <hr>
+    {% include anchor.html name="Vertical by default" %}
 
-    <h3 class="title">Vertical by default</h3>
     <div class="content">
       <p>
         Every element in Bulma is <strong>mobile-first</strong> and optimizes for <strong>vertical reading</strong>, so by default on mobile:
@@ -27,9 +26,8 @@ doc-subtab: responsiveness
       <p>For example, you can enforce the <strong>horizontal</strong> layout for both <code>columns</code> or <code>nav</code> by appending the <code>is-mobile</code> modifer.</p>
     </div>
 
-    <hr>
+    {% include anchor.html name="Breakpoints" %}
 
-    <h3 class="title">Breakpoints</h3>
     <div class="content">
       <p>Bulma has 5 breakpoints:</p>
       <ul>

docs/tiles.html

@@ -45,9 +45,8 @@ route: tiles
       </ul>
     </div>
 
-    <hr>
+    {% include anchor.html name="How it works: Nesting" %}
 
-    <h3 class="title">How it works: Nesting</h3>
     <div class="content">
       <p>Everything is a tile! To create a grid of tiles, you only need to <strong>nest</strong> <code>tile</code> elements.</p>
     </div>
@@ -204,9 +203,7 @@ route: tiles
 </div>
 {% endhighlight %}
 
-    <hr>
-
-    <h3 class="title">Nesting requirements</h3>
+    {% include anchor.html name="Nesting requirements" %}
 
     <article class="message is-danger">
       <div class="message-header">
@@ -337,9 +334,7 @@ tile is-ancestor
 </div>
 {% endhighlight %}
 
-    <hr>
-
-    <h3 class="title">3 columns</h3>
+    {% include anchor.html name="3 columns" %}
 
     <div class="tile is-ancestor">
       <div class="tile is-parent">
@@ -527,9 +522,7 @@ tile is-ancestor
 </div>
 {% endhighlight %}
 
-    <hr>
-
-    <h3 class="title">4 columns</h3>
+    {% include anchor.html name="4 columns" %}
 
     <div class="tile is-ancestor">
       <div class="tile is-parent">