Add responsive button sizes (#3484)

* Add responsive button sizes

* Clean up code

* Add responsive buttons playground

docs/_includes/elements/anchor.html

@@ -5,4 +5,9 @@
   <a class="bd-anchor-link" href="#{{ include.name | slugify }}">
     #
   </a>
+  {% if include.tag %}
+    <span class="tag is-success">
+      {{ include.tag }}
+    </span>
+  {% endif %}
 </h3>

docs/_includes/snippets/responsive-buttons.html

@@ -0,0 +1,35 @@
+{% assign sizes = "default,small,normal,medium,large" | split: "," %}
+
+<table class="table is-bordered">
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Fixed size</th>
+      <th>Responsive size <small class="has-text-grey has-text-weight-normal">(resize window to see in action)</small></th>
+      <th>Code</th>
+    </tr>
+  </thead>
+  <tbody>
+    {% for size in sizes %}
+{% capture responsive_code %}
+<button class="button {% unless size == 'default' %}is-{{ size }} {% endunless %}is-responsive">
+  {{ size | capitalize }}
+</button>
+{% endcapture %}
+      <tr>
+        <td>{{ size | capitalize }}</td>
+        <td>
+          <button class="button is-{{ size }}">
+            {{ size | capitalize }}
+          </button>
+        </td>
+        <td>
+          {{ responsive_code }}
+        </td>
+        <td>
+          {% highlight html %}{{ responsive_code }}{% endhighlight %}
+        </td>
+      </tr>
+    {% endfor %}
+  </tbody>
+</table>