Explain mixins

docs/documentation/overview/mixins.html

@@ -0,0 +1,71 @@
+---
+layout: documentation
+doc-tab: overview
+doc-subtab: mixins
+---
+
+{% include subnav-overview.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Mixins</h1>
+    <h2 class="subtitle">Utility mixins for custom elements and responsive helpers</h2>
+
+    <hr>
+
+<table class="table is-bordered">
+<tr>
+  <td><code>=arrow($color)</code></td>
+  <td>Creates a CSS-only down arrow. Used for the dropdown select.</td>
+</tr>
+<tr>
+  <td><code>=block</code></td>
+  <td>Defines a margin-bottom of 1.5rem, expect when the element is the last child. Used for almost all block elements.</td>
+</tr>
+<tr>
+  <td><code>=clearfix</code></td>
+  <td>Adds a clearfix at the end of the element. Used for the "is-clearfix" helper.</td>
+</tr>
+<tr>
+  <td><code>=center($size)</code></td>
+  <td>Positions an element in the exact center of its parent. Used for the spinner in a loading button.</td>
+</tr>
+<tr>
+  <td><code>=delete</code></td>
+  <td>Creates a CSS-only cross. Used for the delete element in modals, messages, tags...</td>
+</tr>
+<tr>
+  <td><code>=fa($size, $dimensions)</code></td>
+  <td>Sets the style of a Font Awesome icon container.</td>
+</tr>
+<tr>
+  <td><code>=hamburger($dimensions)</code></td>
+  <td>Creates a CSS-only hamburger menu with 3 bars. Used for the "nav-toggle".</td>
+</tr>
+<tr>
+  <td><code>=loader</code></td>
+  <td>Creates a CSS-only loading spinner. Used for the ".loader" element, and for input and button spinners.</td>
+</tr>
+<tr>
+  <td><code>=overflow-touch</code></td>
+  <td>Sets the style of a container so that it keeps momentum when scrolling on iOS devices.</td>
+</tr>
+<tr>
+  <td><code>=overlay($offset: 0)</code></td>
+  <td>Makes the element overlay its parent container, like the transparent modal background.</td>
+</tr>
+<tr>
+  <td><code>=placeholder</code></td>
+  <td>Sets the styles of an input placeholder.</td>
+</tr>
+<tr>
+  <td><code>=unselectable</code></td>
+  <td>Turns the element unselectable. Used for buttons to prevent selection when clicking.</td>
+</tr>
+</table>
+
+    <div class="content">
+      <p>These mixins are already used throughout Bulma, but you can use them as well to extend your own styles.</p>
+    </div>
+  </div>
+</section>