Add Flexbox helpers documentation

docs/_includes/components/categories.html

@@ -13,11 +13,6 @@
         </a>
         <a class="bd-category-name {% if category_id == current_link_id %}is-active{% endif %}" href="{{ site.url }}{{ category_link.path }}">
           <strong>{{ category_link.name }}</strong>
-          {% if category_link.name == 'Helpers' %}
-            <span class="tag bd-mini-tag is-primary">
-              New!
-            </span>
-          {% endif %}
         </a>
       </header>
 
@@ -27,6 +22,11 @@
           <li {% if link_id == current_link_id %}class="is-current"{% endif %}>
             <a href="{{ site.url }}{{ link.path }}">
               {{ link.name }}
+              {% if link.new %}
+                <span class="ml-1 tag bd-mini-tag is-primary">
+                  New!
+                </span>
+              {% endif %}
             </a>
           </li>
         {% endfor %}

docs/_includes/components/links.html

@@ -22,6 +22,7 @@
       icon=link.icon
       name=link.name
       subtitle=link.subtitle
+      new=link.new
     %}
   {% endfor %}
 </nav>

docs/_includes/elements/flexbox-helper-table.html

@@ -0,0 +1,16 @@
+<table class="table is-bordered">
+  <thead>
+    <tr>
+      <th>Class</th>
+      <th>Property: Value</th>
+    </tr>
+  </thead>
+  <tbody>
+    {% for value in include.values %}
+      <tr>
+        <td><code>is-{{ include.property }}-{{ value }}</code></td>
+        <td><code>{{ include.property }}: {{ value }}</code></td>
+      </tr>
+    {% endfor %}
+  </tbody>
+</table>

docs/_includes/elements/link.html

@@ -14,6 +14,11 @@
         <span class="bd-link-counter"></span>
       {% endif %}
     </figure>
+    {% if include.new %}
+      <span style="float: right;" class="ml-2 tag is-primary">
+        New!
+      </span>
+    {% endif %}
     {{ include.name }}
   </h2>
   <p class="bd-link-subtitle">