mixins.html

---
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, except 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>