CSS Helpers

<div class="mui--text-left">text-left</div>
<div class="mui--text-right">text-right</div>
<div class="mui--text-center">text-center</div>
<div class="mui--text-justify">text-justify</div>
<div class="mui--text-nowrap">text-nowrap</div>

<table width="100%">
  <tr style="height:50px;">
    <td width="33%" class="mui--align-top">align-top</td>
    <td width="33%" class="mui--align-middle">align-middle</td>
    <td width="33%" class="mui--align-bottom">align-bottom</td>
  </tr>
</table>

<div>
  <span class="mui--no-transition"></span>
</div>

<!-- Same height as appbar without other styles -->
<div class="mui--appbar-height" style="border:1px solid #aaa;"></div>
<br>

<!-- Only sets the minimum height -->
<div class="mui--appbar-min-height" style="border:1px solid #aaa;"></div>
<br>

<!-- Vertically center text in appbar -->
<div class="mui--appbar-height mui--appbar-line-height" style="border:1px solid #aaa;">Vertically centered</div>

<div>
  <span class="mui-caret"></span>
  <span class="mui-caret mui-caret--up"></span>
  <span class="mui-caret mui-caret--right"></span>
  <span class="mui-caret mui-caret--left"></span>
</div>

<div class="mui--z5">z5</div>
<br>
<div class="mui--z4">z4</div>
<br>
<div class="mui--z3">z3</div>
<br>
<div class="mui--z2">z2</div>
<br>
<div class="mui--z1">z1</div>

<div>
  <span class="mui--pull-left">pull-left</span>
  <span class="mui--pull-right">pull-right</span>
  <div class="mui--clearfix"></div>
</div>
<div>
  <span class="mui--pull-right">pull-right</span>
  <span class="mui--pull-left">pull-left</span>
  <div class="mui--clearfix"></div>
</div>

<div>
  <ul class="mui-list--unstyled">
    <li>list-unstyled 1</li>
    <li>list-unstyled 2</li>
  </ul>
  <ul class="mui-list--inline">
    <li>list-inline 1</li>
    <li>list-inline 2</li>
  </ul>
</div>

<table class="mui-table">
  <thead>
    <tr>
      <th></th>
      <th>xs</th>
      <th>sm (≥ 544px)</th>
      <th>md (≥ 768px)</th>
      <th>lg (≥ 992px)</th>
      <th>xl (≥ 1200px)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>visible-*</code></td>
      <td>
        <div class="mui--visible-xs-block">&#10003;</div>
        <div>
          <div class="mui--visible-xs-inline">&#10003;</div>
          <div class="mui--visible-xs-inline-block">&#10003;</div>
        </div>
      </td>
      <td>
        <div class="mui--visible-sm-block">&#10003;</div>
        <div>
          <div class="mui--visible-sm-inline">&#10003;</div>
          <div class="mui--visible-sm-inline-block">&#10003;</div>
        </div>
      </td>
      <td>
        <div class="mui--visible-md-block">&#10003;</div>
        <div>
          <div class="mui--visible-md-inline">&#10003;</div>
          <div class="mui--visible-md-inline-block">&#10003;</div>
        </div>
      </td>
      <td>
        <div class="mui--visible-lg-block">&#10003;</div>
        <div>
          <div class="mui--visible-lg-inline">&#10003;</div>
          <div class="mui--visible-lg-inline-block">&#10003;</div>
        </div>
      </td>
      <td>
        <div class="mui--visible-xl-block">&#10003;</div>
        <div>
          <div class="mui--visible-xl-inline">&#10003;</div>
          <div class="mui--visible-xl-inline-block">&#10003;</div>
        </div>
      </td>
    </tr>
    <tr>
      <td><code>hidden-*</code></td>
      <td><div class="mui--hidden-xs">&#10003;</div></td>
      <td><div class="mui--hidden-sm">&#10003;</div></td>
      <td><div class="mui--hidden-md">&#10003;</div></td>
      <td><div class="mui--hidden-lg">&#10003;</div></td>
      <td><div class="mui--hidden-xl">&#10003;</div></td>
    </tr>
  </tbody>
</table>

<div class="mui--text-dark">dark</div>
<div class="mui--text-dark-secondary">dark-secondary</div>
<div class="mui--text-dark-hint">dark-hint</div>
<br>
<div style="background-color:#444;">
  <div class="mui--text-light">light</div>
  <div class="mui--text-light-secondary">light-secondary</div>
  <div class="mui--text-light-hint">light-hint</div>
</div>
<br>
<div class="mui--text-accent">accent</div>
<div class="mui--text-accent-secondary">accent-secondary</div>
<div class="mui--text-accent-hint">accent-hint</div>
<br>
<div class="mui--text-black">black</div>
<div class="mui--text-white" style="background-color:#444;">white</div>
<div class="mui--text-danger">danger</div>

<div class="mui--bg-primary" style="height:10px;"></div>
<div class="mui--bg-primary-dark" style="height:10px;"></div>
<div class="mui--bg-primary-light" style="height:10px;"></div>
<br>
<div class="mui--bg-accent" style="height:10px;"></div>
<div class="mui--bg-accent-dark" style="height:10px;"></div>
<div class="mui--bg-accent-light" style="height:10px;"></div>
<br>
<div class="mui--bg-danger" style="height:10px;"></div>

<div>
  <div class="mui--hide">hide</div>
  <div class="mui--show">show</div>
  <div class="mui--invisible">invisible</div>
  <div class="mui--overflow-hidden">overflow hidden</div>
</div>

<div class="mui--no-user-select">This text is not selectable</div>