Add tags

docs/_includes/meta.html

@@ -0,0 +1,44 @@
+<div class="field is-grouped">
+
+  {% if include.since %}
+    <div class="control">
+      <div class="tags has-addons">
+        <span class="tag">Since</span>
+        <span class="tag is-info">{{ include.since }}</span>
+      </div>
+    </div>
+  {% endif %}
+
+  <div class="control">
+    <div class="tags has-addons">
+      <span class="tag">Colors</span>
+      {% if include.colors %}
+        <a class="tag is-success" href="#colors">Yes</a>
+      {% else %}
+        <span class="tag is-danger">No</span>
+      {% endif %}
+    </div>
+  </div>
+
+  <div class="control">
+    <div class="tags has-addons">
+      <span class="tag">Sizes</span>
+      {% if include.sizes %}
+        <a class="tag is-success" href="#sizes">Yes</a>
+      {% else %}
+        <span class="tag is-danger">No</span>
+      {% endif %}
+    </div>
+  </div>
+
+  <div class="control">
+    <div class="tags has-addons">
+      <span class="tag">Variables</span>
+      {% if include.variables %}
+        <a class="tag is-success" href="#variables">Yes</a>
+      {% else %}
+        <span class="tag is-danger">No</span>
+      {% endif %}
+    </div>
+  </div>
+</div>

docs/_includes/variables.html

@@ -0,0 +1,38 @@
+<hr style="margin-bottom: 0;">
+
+<h3 id="variables" class="title" style="padding-top: 1.5rem;">
+  Variables
+</h3>
+
+<div class="content">
+  <p>
+    You can use these variables to <strong>customize</strong> this {%if include.element %}element{% else %}component{% endif %}. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
+  </p>
+</div>
+
+<table class="table is-bordered">
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Default value</th>
+    </tr>
+  </thead>
+  <tfoot>
+    <tr>
+      <th>Name</th>
+      <th>Default value</th>
+    </tr>
+  </tfoot>
+  <tbody>
+    {% for variable in page.variables %}
+      <tr>
+        <td>
+          <code>{{ variable.name }}</code>
+        </td>
+        <td>
+          <code>{{ variable.value }}</code>
+        </td>
+      </tr>
+    {% endfor %}
+  </tbody>
+</table>