CSS Helpers

Alignment

text-left
text-right
text-center
text-justify
text-nowrap
<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>
View in new tab »
align-top align-middle align-bottom
<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>
View in new tab »

Animation

Disable transition animations with the .mui--no-transition class:

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

Appbar dimension helpers



Vertically centered
<!-- 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>
View in new tab »

Caret

<div>
  <span class="mui-caret"></span>
</div>
View in new tab »

Depth helpers

z5

z4

z3

z2

z1
<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>
View in new tab »

Float helpers

pull-left pull-right
pull-right pull-left
<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>
View in new tab »

Lists

  • list-unstyled 1
  • list-unstyled 2
  • list-inline 1
  • list-inline 2
<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>
View in new tab »

Responsive utilities

xs sm (≥ 544px) md (≥ 768px) lg (≥ 992px) xl (≥ 1200px)
visible-*
hidden-*
<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>
View in new tab »

Text color

dark
dark-secondary
dark-hint

light
light-secondary
light-hint

accent
accent-secondary
accent-hint

black
white
danger
<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>
View in new tab »

Background color



<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>
View in new tab »

Toggle

hide
show
invisible
overflow hidden
<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>
View in new tab »

User Select

This text is not selectable
<div class="mui--no-user-select">This text is not selectable</div>
View in new tab »
« Previous Next »