Add heading

docs/_includes/head.html

@@ -4,7 +4,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
 
-  <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
+  <title>{% if page.title %}{{ page.title }} | {% endif %}{{ site.title }}</title>
 
   <link rel="stylesheet" href="{{ site.fontawesome }}">
   <link rel="stylesheet" href="{{ site.url }}/css/bulma-docs.css">

docs/_includes/heading.html

@@ -0,0 +1,5 @@
+<hr style="margin-bottom: 0;">
+
+<h3 id="{{ include.name | downcase }}" class="title" style="padding-top: 1.5rem;">
+  {{ include.name }}
+</h3>

docs/_includes/meta.html

@@ -1,4 +1,4 @@
-<div class="field is-grouped">
+<div id="meta" class="field is-grouped">
 
   {% if include.new %}
     <div class="control">

docs/_javascript/main.js

@@ -2,6 +2,23 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // Dropdowns
 
+  const $metalinks = getAll('#meta a');
+
+  if ($metalinks.length > 0) {
+    $metalinks.forEach($el => {
+      $el.addEventListener('click', event => {
+        event.preventDefault();
+        const target = $el.getAttribute('href');
+        const $target = document.getElementById(target.substring(1));
+        $target.scrollIntoView(true);
+        window.history.replaceState(null, document.title, `${window.location.origin}${window.location.pathname}${target}`);
+        return false;
+      });
+    });
+  }
+
+  // Dropdowns
+
   const $dropdowns = getAll('.dropdown:not(.is-hoverable)');
 
   if ($dropdowns.length > 0) {

docs/documentation/components/breadcrumb.html

@@ -232,11 +232,7 @@ variables:
 
     {% highlight html %}{{breadcrumb_succeeds_example}}{% endhighlight %}
 
-    <hr style="margin-bottom: 0;">
+    {% include heading.html name="Sizes" %}
-
-    <h3 id="sizes" class="title" style="padding-top: 1.5rem;">
-      Sizes
-    </h3>
 
     <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>

docs/documentation/components/message.html

@@ -225,11 +225,7 @@ variables:
       </div>
     </div>
 
-    <hr style="margin-bottom: 0;">
+    {% include heading.html name="Colors" %}
-
-    <h3 id="colors" class="title" style="padding-top: 1.5rem;">
-      Colors
-    </h3>
 
     <div class="columns">
       <div class="column is-half">
@@ -240,11 +236,7 @@ variables:
       </div>
     </div>
 
-    <hr style="margin-bottom: 0;">
+    {% include heading.html name="Sizes" %}
-
-    <h3 id="sizes" class="title" style="padding-top: 1.5rem;">
-      Sizes
-    </h3>
 
     <div class="columns">
       <div class="column is-half">

docs/documentation/components/tabs.html

@@ -418,11 +418,7 @@ variables:
     </div>
     {% highlight html %}{{tabs_icons_example}}{% endhighlight %}
 
-    <hr style="margin-bottom: 0;">
+    {% include heading.html name="Sizes" %}
-
-    <h3 id="sizes" class="title" style="padding-top: 1.5rem;">
-      Sizes
-    </h3>
     <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>

docs/documentation/elements/box.html

@@ -1,4 +1,5 @@
 ---
+title: Box
 layout: documentation
 doc-tab: elements
 doc-subtab: box

docs/documentation/elements/button.html

@@ -1,4 +1,5 @@
 ---
+title: Button
 layout: documentation
 doc-tab: elements
 doc-subtab: button
@@ -416,11 +417,7 @@ variables:
       </div>
     </div>
 
-    <hr style="margin-bottom: 0;">
+    {% include heading.html name="Colors" %}
-
-    <h3 id="colors" class="title" style="padding-top: 1.5rem;">
-      Colors
-    </h3>
 
     <div class="columns">
       <div class="column">
@@ -440,11 +437,7 @@ variables:
       </div>
     </div>
 
-    <hr style="margin-bottom: 0;">
+    {% include heading.html name="Sizes" %}
-
-    <h3 id="sizes" class="title" style="padding-top: 1.5rem;">
-      Sizes
-    </h3>
 
     <div class="columns">
       <div class="column">

docs/documentation/elements/content.html

@@ -1,4 +1,5 @@
 ---
+title: Content
 layout: documentation
 doc-tab: elements
 doc-subtab: content
@@ -37,6 +38,18 @@ variables:
   value: $text-strong
 ---
 
+{% capture content_pre %}
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Hello World</title>
+  </head>
+  <body>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
+  </body>
+</html>
+{% endcapture %}
+
 {% capture content_example %}
 <div class="content">
   <h1>Hello World</h1>
@@ -74,15 +87,7 @@ variables:
   <p>Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl, suscipit sed mi sit amet, mollis malesuada nulla. Nulla facilisi. Nullam ac erat ante.</p>
   <h4>Fourth level</h4>
   <p>Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac. Mauris euismod metus a tellus laoreet, at elementum ex efficitur.</p>
-  <pre>&lt;!DOCTYPE html&gt;
+  <pre>{{ content_pre }}</pre>
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;title&gt;Hello World&lt;/title&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.&lt;/p&gt;
-  &lt;/body&gt;
-&lt;/html&gt;</pre>
   <p>Maecenas eleifend sollicitudin dui, faucibus sollicitudin augue cursus non. Ut finibus eleifend arcu ut vehicula. Mauris eu est maximus est porta condimentum in eu justo. Nulla id iaculis sapien.</p>
   <table>
     <thead>
@@ -137,6 +142,12 @@ variables:
     <h2 class="subtitle">
       A single class to handle WYSIWYG generated content, where only <strong>HTML tags</strong> are available
     </h2>
+    {%
+      include meta.html
+      colors=false
+      sizes=true
+      variables=true
+    %}
 
     <hr>
 
@@ -159,9 +170,8 @@ variables:
 
     {% highlight html %}{{content_example}}{% endhighlight %}
 
-    <hr>
+    {% include heading.html name="Sizes" %}
 
-    <h3 class="title">Sizes</h3>
     <div class="content">
       <p>You can use the <code>is-small</code>, <code>is-medium</code> and <code>is-large</code> modifiers to change the font size.</p>
     </div>
@@ -208,7 +218,7 @@ variables:
       </div>
     </div>
 
-    {% include variables.html %}
+    {% include variables.html element=true %}
 
   </div>
 </section>

docs/documentation/elements/delete.html

@@ -1,44 +1,13 @@
 ---
+title: Delete
 layout: documentation
 doc-tab: elements
 doc-subtab: delete
 ---
 
-{% include subnav-elements.html %}
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Delete</h1>
-    <h2 class="subtitle">
-      A versatile <strong>delete</strong> cross
-    </h2>
-
-    <hr>
-
-    <div class="content">
-      <p>
-        The <code>.delete</code> element is a stand-alone element that can be used in different contexts.
-      </p>
-    </div>
-
 {% capture cross_example %}
 <a class="delete"></a>
 {% endcapture %}
-<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>
 
 {% capture cross_sizes_example %}
 <a class="delete is-small"></a>
@@ -46,21 +15,6 @@ doc-subtab: delete
 <a class="delete is-medium"></a>
 <a class="delete is-large"></a>
 {% endcapture %}
-<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>
 
 {% capture cross_elements_example %}
 <div class="block">
@@ -85,21 +39,79 @@ doc-subtab: delete
   </div>
 </article>
 {% endcapture %}
-<div class="columns">
+
-<div class="column">
+{% include subnav-elements.html %}
-  <div class="content">
+
-    <p>
+<section class="section">
-      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>:
+  <div class="container">
-    </p>
+    <h1 class="title">Delete</h1>
-  </div>
+    <h2 class="subtitle">
-  {{cross_elements_example}}
+      A versatile <strong>delete</strong> cross
-</div>
+    </h2>
-<div class="column">
+    {%
-{% highlight html %}
+      include meta.html
-{{cross_elements_example}}
+      colors=false
-{% endhighlight %}
+      sizes=true
-</div>
+      variables=false
-</div>
+    %}
+
+    <hr>
+
+    <div class="content">
+      <p>
+        The <code>.delete</code> element is a stand-alone element that can be used in different contexts.
+      </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 heading.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>
+
+    <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>
+    </div>
 
   </div>
 </section>

docs/documentation/elements/form.html

@@ -1,4 +1,5 @@
 ---
+title: Form
 layout: documentation
 doc-tab: elements
 doc-subtab: form

docs/documentation/elements/icon.html

@@ -1,4 +1,5 @@
 ---
+title: Icon
 layout: documentation
 doc-tab: elements
 doc-subtab: icon
@@ -28,6 +29,12 @@ variables:
     <h2 class="subtitle">
       Bulma is compatible with <strong><a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a></strong> icons.
     </h2>
+    {%
+      include meta.html
+      colors=false
+      sizes=true
+      variables=true
+    %}
 
     <hr>
 
@@ -45,9 +52,7 @@ variables:
       <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>
     </div>
 
-    <hr>
+    {% include heading.html name="Sizes" %}
-
-    <h3 class="title">Sizes</h3>
 
     <div class="content">
       <p>Font Awesome icons use a font-size of <strong>28px</strong> by default, and are best rendered when using <strong>multiples of 7</strong>.</p>

docs/documentation/elements/image.html

@@ -1,12 +1,33 @@
 ---
+title: Image
 layout: documentation
 doc-tab: elements
 doc-subtab: image
+dimensions:
+- 16
+- 24
+- 32
+- 48
+- 64
+- 96
+- 128
 variables:
 - name: $dimensions
   value: 16 24 32 48 64 96 128
 ---
 
+{% capture image %}
+<figure class="image is-128x128">
+  <img src="{{site.url}}/images/placeholders/128x128.png">
+</figure>
+{% endcapture %}
+
+{% capture retina_image %}
+<figure class="image is-128x128">
+  <img src="{{site.url}}/images/placeholders/256x256.png">
+</figure>
+{% endcapture %}
+
 {% include subnav-elements.html %}
 
 <section class="section">
@@ -15,6 +36,12 @@ variables:
     <h2 class="subtitle">
       A container for <strong>responsive images</strong>
     </h2>
+    {%
+      include meta.html
+      colors=false
+      sizes=false
+      variables=true
+    %}
 
     <hr>
 
@@ -28,11 +55,7 @@ variables:
       </figure>
     </div>
 
-{% highlight html %}
+    {% highlight html %}{{ image }}{% endhighlight %}
-<figure class="image is-128x128">
-  <img src="{{site.url}}/images/placeholders/128x128.png">
-</figure>
-{% endhighlight %}
 
     <hr>
 
@@ -43,41 +66,13 @@ variables:
 
     <table class="table is-bordered">
       <tbody>
-        <tr>
+        {% for dimension in page.dimensions %}
-          <td><code>image is-16x16</code></td>
+          <tr>
-          <td><figure class="image is-16x16"><img src="{{site.url}}/images/placeholders/16x16.png"></figure></td>
+            <td><code>image is-{{ dimension }}x{{ dimension }}</code></td>
-          <td>16x16px</td>
+            <td><figure class="image is-{{ dimension }}x{{ dimension }}"><img src="{{site.url}}/images/placeholders/{{ dimension }}x{{ dimension }}.png"></figure></td>
-        </tr>
+            <td>{{ dimension }}x{{ dimension }}px</td>
-        <tr>
+          </tr>
-          <td><code>image is-24x24</code></td>
+        {% endfor %}
-          <td><figure class="image is-24x24"><img src="{{site.url}}/images/placeholders/24x24.png"></figure></td>
-          <td>24x24px</td>
-        </tr>
-        <tr>
-          <td><code>image is-32x32</code></td>
-          <td><figure class="image is-32x32"><img src="{{site.url}}/images/placeholders/32x32.png"></figure></td>
-          <td>32x32px</td>
-        </tr>
-        <tr>
-          <td><code>image is-48x48</code></td>
-          <td><figure class="image is-48x48"><img src="{{site.url}}/images/placeholders/48x48.png"></figure></td>
-          <td>48x48px</td>
-        </tr>
-        <tr>
-          <td><code>image is-64x64</code></td>
-          <td><figure class="image is-64x64"><img src="{{site.url}}/images/placeholders/64x64.png"></figure></td>
-          <td>64x64px</td>
-        </tr>
-        <tr>
-          <td><code>image is-96x96</code></td>
-          <td><figure class="image is-96x96"><img src="{{site.url}}/images/placeholders/96x96.png"></figure></td>
-          <td>96x96px</td>
-        </tr>
-        <tr>
-          <td><code>image is-128x128</code></td>
-          <td><figure class="image is-128x128"><img src="{{site.url}}/images/placeholders/128x128.png"></figure></td>
-          <td>128x128px</td>
-        </tr>
       </tbody>
     </table>
 
@@ -93,11 +88,7 @@ variables:
       </figure>
     </div>
 
-{% highlight html %}
+    {% highlight html %}{{ retina_image }}{% endhighlight %}
-<figure class="image is-128x128">
-  <img src="{{site.url}}/images/placeholders/256x256.png">
-</figure>
-{% endhighlight %}
 
     <hr>
 

docs/documentation/elements/notification.html

@@ -1,4 +1,5 @@
 ---
+title: Notification
 layout: documentation
 doc-tab: elements
 doc-subtab: notification
@@ -11,53 +12,16 @@ variables:
   value: 1.25rem 2.5rem 1.25rem 1.5rem
 ---
 
-{% include subnav-elements.html %}
+{% capture notification %}
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Notifications</h1>
-    <h2 class="subtitle">
-      Bold <strong>notification</strong> blocks, to alert your users of something
-    </h2>
-
-    <hr>
-
-    <div class="columns">
-      <div class="column">
-        <div class="notification">
-          <button class="delete"></button>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet, consectetur adipiscing elit
-        </div>
-        <div class="notification is-primary">
-          <button class="delete"></button>
-          Info lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet, consectetur adipiscing elit
-        </div>
-        <div class="notification is-info">
-          <button class="delete"></button>
-          Info lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet, consectetur adipiscing elit
-        </div>
-        <div class="notification is-success">
-          <button class="delete"></button>
-          Success lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet, consectetur adipiscing elit
-        </div>
-        <div class="notification is-warning">
-          <button class="delete"></button>
-          Warning lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet, consectetur adipiscing elit
-        </div>
-        <div class="notification is-danger">
-          <button class="delete"></button>
-          Danger lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet, consectetur adipiscing elit
-        </div>
-      </div>
-      <div class="column">
-{% highlight html %}
 <div class="notification">
   <button class="delete"></button>
   Lorem ipsum dolor sit amet, consectetur
   adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
   consectetur adipiscing elit
 </div>
+{% endcapture %}
 
+{% capture notification_colors %}
 <div class="notification is-primary">
   <button class="delete"></button>
   Primar lorem ipsum dolor sit amet, consectetur
@@ -92,7 +56,42 @@ variables:
   adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
   consectetur adipiscing elit
 </div>
-{% endhighlight %}
+{% endcapture %}
+
+{% include subnav-elements.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Notifications</h1>
+    <h2 class="subtitle">
+      Bold <strong>notification</strong> blocks, to alert your users of something
+    </h2>
+    {%
+      include meta.html
+      colors=true
+      sizes=false
+      variables=true
+    %}
+
+    <hr>
+
+    <div class="columns">
+      <div class="column">
+        {{ notification }}
+      </div>
+      <div class="column">
+        {% highlight html %}{{ notification }}{% endhighlight %}
+      </div>
+    </div>
+
+    {% include heading.html name="Colors" %}
+
+    <div class="columns">
+      <div class="column">
+        {{ notification_colors }}
+      </div>
+      <div class="column">
+        {% highlight html %}{{ notification_colors }}{% endhighlight %}
       </div>
     </div>
 

docs/documentation/elements/progress.html

@@ -1,4 +1,5 @@
 ---
+title: Progess Bar
 layout: documentation
 doc-tab: elements
 doc-subtab: progress
@@ -9,6 +10,25 @@ variables:
   value: $text
 ---
 
+{% capture progress %}
+<progress class="progress" value="15" max="100">15%</progress>
+{% endcapture %}
+
+{% capture progress_colors %}
+<progress class="progress is-primary" value="30" max="100">30%</progress>
+<progress class="progress is-info" value="45" max="100">45%</progress>
+<progress class="progress is-success" value="60" max="100">60%</progress>
+<progress class="progress is-warning" value="75" max="100">75%</progress>
+<progress class="progress is-danger" value="90" max="100">90%</progress>
+{% endcapture %}
+
+{% capture progress_sizes %}
+<progress class="progress is-small" value="15" max="100">15%</progress>
+<progress class="progress" value="30" max="100">30%</progress>
+<progress class="progress is-medium" value="45" max="100">45%</progress>
+<progress class="progress is-large" value="60" max="100">60%</progress>
+{% endcapture %}
+
 {% include subnav-elements.html %}
 
 <section class="section">
@@ -17,41 +37,33 @@ variables:
     <h2 class="subtitle">
       Native HTML <strong>progress</strong> bars
     </h2>
+    {%
+      include meta.html
+      colors=true
+      sizes=true
+      variables=true
+    %}
 
     <hr>
 
     <div class="example">
-      <progress class="progress" value="15" max="100">15%</progress>
+      {{ progress }}
-      <progress class="progress is-primary" value="30" max="100">30%</progress>
-      <progress class="progress is-info" value="45" max="100">45%</progress>
-      <progress class="progress is-success" value="60" max="100">60%</progress>
-      <progress class="progress is-warning" value="75" max="100">75%</progress>
-      <progress class="progress is-danger" value="90" max="100">90%</progress>
     </div>
-{% highlight html %}
+    {% highlight html %}{{ progress }}{% endhighlight %}
-<progress class="progress" value="15" max="100">15%</progress>
-<progress class="progress is-primary" value="30" max="100">30%</progress>
-<progress class="progress is-info" value="45" max="100">45%</progress>
-<progress class="progress is-success" value="60" max="100">60%</progress>
-<progress class="progress is-warning" value="75" max="100">75%</progress>
-<progress class="progress is-danger" value="90" max="100">90%</progress>
-{% endhighlight %}
 
-    <hr>
+    {% include heading.html name="Colors" %}
 
-    <h3 class="title">Sizes</h3>
     <div class="example">
-      <progress class="progress is-small" value="15" max="100">15%</progress>
+      {{ progress_colors }}
-      <progress class="progress" value="30" max="100">30%</progress>
-      <progress class="progress is-medium" value="45" max="100">45%</progress>
-      <progress class="progress is-large" value="60" max="100">60%</progress>
     </div>
-{% highlight html %}
+    {% highlight html %}{{ progress_colors }}{% endhighlight %}
-<progress class="progress is-small" value="15" max="100">15%</progress>
+
-<progress class="progress" value="30" max="100">30%</progress>
+    {% include heading.html name="Sizes" %}
-<progress class="progress is-medium" value="45" max="100">45%</progress>
+
-<progress class="progress is-large" value="60" max="100">60%</progress>
+    <div class="example">
-{% endhighlight %}
+      {{ progress_sizes }}
+    </div>
+    {% highlight html %}{{ progress_sizes }}{% endhighlight %}
 
     {% include variables.html element=true %}
 

docs/documentation/elements/table.html

@@ -1,4 +1,5 @@
 ---
+title: Table
 layout: documentation
 doc-tab: elements
 doc-subtab: table
@@ -343,6 +344,12 @@ variables:
   <div class="container">
     <h1 class="title">Tables</h1>
     <h2 class="subtitle">The inevitable HTML <strong>table</strong>, with special case cells</h2>
+    {%
+      include meta.html
+      colors=false
+      sizes=false
+      variables=true
+    %}
 
     <hr>
 

docs/documentation/elements/tag.html

@@ -1,4 +1,5 @@
 ---
+title: Tags
 layout: documentation
 doc-tab: elements
 doc-subtab: tag
@@ -32,6 +33,10 @@ variables:
 <span class="tag is-info is-large">Large</span>
 {% endcapture %}
 
+{% capture rounded %}
+<span class="tag is-rounded">Rounded</span>
+{% endcapture %}
+
 {% capture delete %}
 <span class="tag is-success">
   Bar
@@ -55,6 +60,12 @@ variables:
     <h2 class="subtitle">
       Small <strong>tag labels</strong> to insert anywhere
     </h2>
+    {%
+      include meta.html
+      colors=true
+      sizes=true
+      variables=true
+    %}
 
     <hr>
 
@@ -72,6 +83,8 @@ variables:
       </div>
     </div>
 
+    {% include heading.html name="Colors" %}
+
     <div class="columns">
       <div class="column is-4">
         Like with buttons, there are <strong>9 different colors</strong> available.
@@ -126,6 +139,8 @@ variables:
       </div>
     </div>
 
+    {% include heading.html name="Sizes" %}
+
     <div class="columns">
       <div class="column is-4">
         And <strong>2 additional</strong> sizes.
@@ -147,6 +162,22 @@ variables:
       </div>
     </div>
 
+    {% include heading.html name="Modifiers" %}
+
+    <div class="columns">
+      <div class="column is-4">
+        You can add the <code>is-rounded</code> modifier to make a <strong>rounded</strong> tag.
+      </div>
+      <div class="column is-2">
+        {{ rounded }}
+      </div>
+      <div class="column is-6">
+        {% highlight html %}{{ rounded }}{% endhighlight %}
+      </div>
+    </div>
+
+    {% include heading.html name="Combinations" %}
+
     <div class="columns">
       <div class="column is-4">
         You can also append a <strong>delete button</strong>.

docs/documentation/elements/title.html

@@ -1,4 +1,5 @@
 ---
+title: Title and Subtitle
 layout: documentation
 doc-tab: elements
 doc-subtab: title
@@ -74,12 +75,28 @@ variables:
     <h2 class="subtitle">
       Simple <strong>headings</strong> to add depth to your page
     </h2>
+    {%
+      include meta.html
+      colors=false
+      sizes=true
+      variables=true
+    %}
 
     <hr>
 
     <div class="columns">
       <div class="column">
-        <p>There are <strong>2 types</strong> of heading:</p>
+        <div class="content">
+          <p>There are <strong>2 types</strong> of heading:</p>
+          <ul>
+            <li>
+              <code>.title</code>
+            </li>
+            <li>
+              <code>.subtitle</code>
+            </li>
+          </ul>
+        </div>
       </div>
       <div class="column">
         <p class="title">Title</p>
@@ -90,7 +107,7 @@ variables:
       </div>
     </div>
 
-    <hr>
+    {% include heading.html name="Sizes" %}
 
     <div class="columns">
       <div class="column">

docs/documentation/form/checkbox.html

@@ -1,4 +1,5 @@
 ---
+title: Checkbox
 layout: documentation
 doc-tab: form
 doc-subtab: checkbox

docs/documentation/form/general.html

@@ -1,4 +1,5 @@
 ---
+title: Form controls
 layout: documentation
 doc-tab: form
 doc-subtab: general

docs/documentation/form/input.html

@@ -1,4 +1,5 @@
 ---
+title: Input
 layout: documentation
 doc-tab: form
 doc-subtab: input

docs/documentation/form/radio.html

@@ -1,4 +1,5 @@
 ---
+title: Radio button
 layout: documentation
 doc-tab: form
 doc-subtab: radio

docs/documentation/form/select.html

@@ -1,4 +1,5 @@
 ---
+title: Select
 layout: documentation
 doc-tab: form
 doc-subtab: select

docs/documentation/form/textarea.html

@@ -1,4 +1,5 @@
 ---
+title: Textarea
 layout: documentation
 doc-tab: form
 doc-subtab: textarea

docs/documentation/grid/columns.html

@@ -1,4 +1,5 @@
 ---
+title: Columns powered by Flexbox
 layout: documentation
 doc-tab: grid
 doc-subtab: columns

docs/documentation/grid/tiles.html

@@ -1,4 +1,5 @@
 ---
+title: Tiles powered by Flexbox
 layout: documentation
 doc-tab: grid
 doc-subtab: tiles

docs/documentation/layout/container.html

@@ -1,4 +1,5 @@
 ---
+title: Container
 layout: documentation
 doc-tab: layout
 doc-subtab: container

docs/documentation/layout/footer.html

@@ -1,4 +1,5 @@
 ---
+title: Footer
 layout: documentation
 doc-tab: layout
 doc-subtab: footer

docs/documentation/layout/hero.html

@@ -1,4 +1,5 @@
 ---
+title: Hero
 layout: documentation
 doc-tab: layout
 doc-subtab: hero

docs/documentation/layout/section.html

@@ -1,4 +1,5 @@
 ---
+title: Section
 layout: documentation
 doc-tab: layout
 doc-subtab: section

docs/documentation/modifiers/helpers.html

@@ -1,4 +1,5 @@
 ---
+title: Helpers
 layout: documentation
 doc-tab: modifiers
 doc-subtab: helpers

docs/documentation/modifiers/responsive-helpers.html

@@ -1,4 +1,5 @@
 ---
+title: Responsive helpers
 layout: documentation
 doc-tab: modifiers
 doc-subtab: responsive-helpers

docs/documentation/modifiers/syntax.html

@@ -1,4 +1,5 @@
 ---
+title: Modifiers syntax
 layout: documentation
 doc-tab: modifiers
 doc-subtab: syntax

docs/documentation/modifiers/typography-helpers.html

@@ -1,4 +1,5 @@
 ---
+title: Typography helpers
 layout: documentation
 doc-tab: modifiers
 doc-subtab: typography-helpers

docs/documentation/overview/classes.html

@@ -1,4 +1,5 @@
 ---
+title: CSS classes
 layout: documentation
 doc-tab: overview
 doc-subtab: classes

docs/documentation/overview/customize.html

@@ -1,4 +1,5 @@
 ---
+title: Customize Bulma
 layout: documentation
 doc-tab: overview
 doc-subtab: customize

docs/documentation/overview/functions.html

@@ -1,4 +1,5 @@
 ---
+title: Functions
 layout: documentation
 doc-tab: overview
 doc-subtab: functions

docs/documentation/overview/mixins.html

@@ -1,4 +1,5 @@
 ---
+title: Mixins
 layout: documentation
 doc-tab: overview
 doc-subtab: mixins

docs/documentation/overview/modular.html

@@ -1,4 +1,5 @@
 ---
+title: Modularity
 layout: documentation
 doc-tab: overview
 doc-subtab: modular

docs/documentation/overview/responsiveness.html

@@ -1,4 +1,5 @@
 ---
+title: Responsiveness
 layout: documentation
 doc-tab: overview
 doc-subtab: responsiveness

docs/documentation/overview/start.html

@@ -1,4 +1,5 @@
 ---
+title: Get started with Bulma
 layout: documentation
 doc-tab: overview
 doc-subtab: start

docs/documentation/overview/variables.html

@@ -1,4 +1,5 @@
 ---
+title: Variables
 layout: documentation
 doc-tab: overview
 doc-subtab: variables

docs/extensions.html

@@ -1,4 +1,5 @@
 ---
+title: Extensions
 layout: default
 route: extensions
 extensions:

docs/lib/main.js

@@ -4,6 +4,23 @@ document.addEventListener('DOMContentLoaded', function () {
 
   // Dropdowns
 
+  var $metalinks = getAll('#meta a');
+
+  if ($metalinks.length > 0) {
+    $metalinks.forEach(function ($el) {
+      $el.addEventListener('click', function (event) {
+        event.preventDefault();
+        var target = $el.getAttribute('href');
+        var $target = document.getElementById(target.substring(1));
+        $target.scrollIntoView(true);
+        window.history.replaceState(null, document.title, '' + window.location.origin + window.location.pathname + target);
+        return false;
+      });
+    });
+  }
+
+  // Dropdowns
+
   var $dropdowns = getAll('.dropdown:not(.is-hoverable)');
 
   if ($dropdowns.length > 0) {

docs/thank-you.html

@@ -1,4 +1,5 @@
 ---
+title: Thank you
 layout: default
 route: index
 ---

docs/versions.html

@@ -1,4 +1,5 @@
 ---
+title: Versions
 layout: default
 route: versions
 ---