⚡ AMP MUI CSS Framework

Download from GitHub

Appbar

Container Element

MUI provides a simple .mui-appbar container that automatically adjusts its height based on the viewport dimensions:

  • 48px (phone landscape)
  • 56px (phone portrait)
  • 64px (default)
<div class="mui-appbar">
  <!-- content -->
</div>

Helpers

MUI also provides several helper classes that are useful for sharing the appbar height with other elements:

  • .mui--appbar-height (sets height property)
  • .mui--appbar-min-height (sets min-height property)
  • .mui--appbar-line-height (sets line-height property)

The height helpers are especially useful for centering appbar content:

Left Side Right Side 
<div class="mui-appbar">
  <table width="100%">
    <tr>
      <td class="mui--appbar-height">Left Side</td>
      <td class="mui--appbar-height" align="right">Right Side</td>
    </tr>
  </table>
</div>

Buttons

Attach the .mui-btn class to any <button>, <a>, <input type="submit"> elements to use the MUI button style.

Default Buttons

<div>
  <button class="mui-btn">Button</button>
  <button class="mui-btn mui-btn--primary">Button</button>
  <button class="mui-btn mui-btn--danger">Button</button>
  <button class="mui-btn mui-btn--accent">Button</button>
</div>
<div>
  <button class="mui-btn" disabled>Button</button>
  <button class="mui-btn mui-btn--primary" disabled>Button</button>
  <button class="mui-btn mui-btn--danger" disabled>Button</button>
  <button class="mui-btn mui-btn--accent" disabled>Button</button>
</div>

Flat Buttons

<div>
  <button class="mui-btn mui-btn--flat">Button</button>
  <button class="mui-btn mui-btn--flat mui-btn--primary">Button</button>
  <button class="mui-btn mui-btn--flat mui-btn--danger">Button</button>
  <button class="mui-btn mui-btn--flat mui-btn--accent">Button</button>
</div>
<div>
  <button class="mui-btn mui-btn--flat" disabled>Button</button>
  <button class="mui-btn mui-btn--flat mui-btn--primary" disabled>Button</button>
  <button class="mui-btn mui-btn--flat mui-btn--danger" disabled>Button</button>
  <button class="mui-btn mui-btn--flat mui-btn--accent" disabled>Button</button>
</div>

Raised Buttons

<div>
  <button class="mui-btn mui-btn--raised">Button</button>
  <button class="mui-btn mui-btn--raised mui-btn--primary">Button</button>
  <button class="mui-btn mui-btn--raised mui-btn--danger">Button</button>
  <button class="mui-btn mui-btn--raised mui-btn--accent">Button</button>
</div>
<div>
  <button class="mui-btn mui-btn--raised" disabled>Button</button>
  <button class="mui-btn mui-btn--raised mui-btn--primary" disabled>Button</button>
  <button class="mui-btn mui-btn--raised mui-btn--danger" disabled>Button</button>
  <button class="mui-btn mui-btn--raised mui-btn--accent" disabled>Button</button>
</div>

Floating Action Buttons

<div>
  <button class="mui-btn mui-btn--fab">+</button>
  <button class="mui-btn mui-btn--fab mui-btn--primary">+</button>
  <button class="mui-btn mui-btn--fab mui-btn--danger">+</button>
  <button class="mui-btn mui-btn--fab mui-btn--accent">+</button>
</div>
<div>
  <button class="mui-btn mui-btn--fab" disabled>+</button>
  <button class="mui-btn mui-btn--fab mui-btn--primary" disabled>+</button>
  <button class="mui-btn mui-btn--fab mui-btn--danger" disabled>+</button>
  <button class="mui-btn mui-btn--fab mui-btn--accent" disabled>+</button>
</div>

Button sizes

<div>
  <button class="mui-btn mui-btn--small mui-btn--primary">Button</button>
  <button class="mui-btn mui-btn--small mui-btn--primary mui-btn--flat">Button</button>
  <button class="mui-btn mui-btn--small mui-btn--primary mui-btn--raised">Button</button>
  <button class="mui-btn mui-btn--small mui-btn--primary mui-btn--fab">+</button>
</div>
<div>
  <button class="mui-btn mui-btn--primary">Button</button>
  <button class="mui-btn mui-btn--primary mui-btn--flat">Button</button>
  <button class="mui-btn mui-btn--primary mui-btn--raised">Button</button>
  <button class="mui-btn mui-btn--primary mui-btn--fab">+</button>
</div>
<div>
  <button class="mui-btn mui-btn--large mui-btn--primary">Button</button>
  <button class="mui-btn mui-btn--large mui-btn--primary mui-btn--flat">Button</button>
  <button class="mui-btn mui-btn--large mui-btn--primary mui-btn--raised">Button</button>
  <button class="mui-btn mui-btn--large mui-btn--primary mui-btn--fab">+</button>
</div>

Container

Fixed Container

To wrap your content in a responsive container use the .mui-container class:

<div class="mui-container">
  <!--

  Container is centered on page with 15px of
  padding on either side. The inner width is
  fluid for small viewports and has a max
  width for larger dimensions:

  * 570px (≥ 544px)
  * 740px (≥ 768px)
  * 960px (≥ 992px)
  * 1170px (≥ 1200px)
  
  -->
</div>

Fluid Container

To wrap your content in a fluid container use the .mui-container-fluid class:

<div class="mui-container-fluid">
  <!--

  Container is centered on page with 15px of
  padding on either side. The inner width is
  fluid for all viewport widths.

  -->
</div>

Dividers

Default divider

Content 1
Content 2 
<div>
  Content 1
</div>
<div class="mui-divider"></div>
<div>
  Content 2
</div>

Top

Content 1
Content 2 
<div>
  Content 1
</div>
<div class="mui--divider-top">
  Content 2
</div>

Bottom

Content 1
Content 2 
<div class="mui--divider-bottom">
  Content 1
</div>
<div>
  Content 2
</div>

Left

Content1  Content2 
<span>Content1</span>
<span class="mui--divider-left">&nbsp;Content2</span>

Right

Content1  Content2 
<span class="mui--divider-right">Content1&nbsp;</span>
<span>Content2</span>

Dropdowns

Left-aligned (default)

<div class="mui-dropdown">
  <button class="mui-btn mui-btn--primary" on="tap:dropdown_1.toggleVisibility">
    Dropdown
    <span class="mui-caret"></span>
  </button>
  <ul class="mui-dropdown__menu" id="dropdown_1" hidden>
    <li><a href="#">Option 1</a></li>
    <li><a href="#">Option 2</a></li>
    <li><a href="#">Option 3</a></li>
    <li><a href="#">Option 4</a></li>
  </ul>
</div>

Right-aligned

To right-align the dropdown menu, use the .mui-dropdown__menu--right class.

<div class="mui-dropdown">
  <button class="mui-btn mui-btn--primary" on="tap:dropdown_2.toggleVisibility">
    Dropdown
    <span class="mui-caret"></span>
  </button>
  <ul class="mui-dropdown__menu mui-dropdown__menu--right" id="dropdown_2" hidden>
    <li><a href="#">A very long menu option</a></li>
    <li><a href="#">Option 2</a></li>
    <li><a href="#">Option 3</a></li>
    <li><a href="#">Option 4</a></li>
  </ul>
</div>

Forms

Basic example

Wrap form inputs in a .mui-textfield class to use MUI styling.

Title 
<form class="mui-form">
  <legend>Title</legend>
  <div class="mui-textfield">
    <input type="text" placeholder="Input 1">
  </div>
  <div class="mui-textfield">
    <input type="text" placeholder="Input 2">
  </div>
  <div class="mui-textfield">
    <textarea placeholder="Textarea"></textarea>
  </div>
  <button type="submit" class="mui-btn mui-btn--raised">Submit</button>
</form>

Fixed labels

Append a <label> element to a textfield to add a fixed label.

Title 
<form class="mui-form">
  <legend>Title</legend>
  <div class="mui-textfield">
    <input type="text">
    <label>Input 1</label>
  </div>
  <div class="mui-textfield">
    <input type="text">
    <label>Input 2</label>
  </div>
  <div class="mui-textfield">
    <textarea></textarea>
    <label>Textarea</label>
  </div>
  <button type="submit" class="mui-btn mui-btn--raised">Submit</button>
</form>

Floating labels

Use the .mui-textfield--float-label class to float labels.

Title 
<form class="mui-form">
  <legend>Title</legend>
  <div class="mui-textfield mui-textfield--float-label">
    <input type="text">
    <label>Input 1</label>
  </div>
  <div class="mui-textfield mui-textfield--float-label">
    <input type="text" value="Value on load">
    <label>Input 2</label>
  </div>
  <div class="mui-textfield mui-textfield--float-label">
    <textarea>Value on load</textarea>
    <label>Textarea</label>
  </div>
  <button type="submit" class="mui-btn mui-btn--raised">Submit</button>
</form>

Inline Form

Attach the .mui-form--inline class to the <form> element to inline inputs above the small breakpoint.

<form class="mui-form--inline">
  <div class="mui-textfield">
    <input type="text">
  </div>
  <button class="mui-btn">submit</button>
</form>

Checkboxes and radio buttons

Wrap checkbox and radio elements in a div with class .mui-checkbox or .mui-radio.

<form>
  <div class="mui-checkbox">
    <label>
      <input type="checkbox" value="" checked>
      Option one
    </label>
  </div>
  <div class="mui-checkbox">
    <label>
      <input type="checkbox" value="">
      Option two
    </label>
  </div>
  <div class="mui-checkbox">
    <label>
      <input type="checkbox" value="" disabled>
      Option three is disabled
    </label>
  </div>
  <div class="mui-radio">
    <label>
      <input type="radio"
             name="optionsRadios"
             id="optionsRadios1"
             value="option1"
             checked>
      Option one
    </label>
  </div>
  <div class="mui-radio">
    <label>
      <input type="radio"
             name="optionsRadios"
             id="optionsRadios2"
             value="option2">
      Option two
    </label>
  </div>
  <div class="mui-radio">
    <label>
      <input type="radio"
             name="optionsRadios"
             id="optionsRadios3"
             value="option3"
             disabled>
      Option three is disabled
    </label>
  </div>
</form>

Select boxes

Wrap select elements in a div with class .mui-select.

Title 
<form class="mui-form">
  <legend>Title</legend>
  <div class="mui-select">
    <select>
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
      <option>Option 4</option>
    </select>
    <label>Select Example</label>
  </div>
  <div class="mui-select">
    <select>
      <optgroup label="Group 1">
        <option>Option 1</option>
        <option>Option 2</option>
      </optgroup>
      <optgroup label="Group 2">
        <option>Option 3</option>
        <option>Option 4</option>
      </optgroup>
    </select>
    <label>Optgroups Example</label>
  </div>
  <button type="submit" class="mui-btn mui-btn--raised">Submit</button>
</form>

Form Validation

MUI automatically styles input elements that use the HTML5 required attribute or <input type="email|url|tel">.

Title 
<form class="mui-form">
  <legend>Title</legend>
  <div class="mui-textfield">
    <input type="text" required>
    <label>Required Text Field</label>
  </div>
  <div class="mui-textfield mui-textfield--float-label">
    <input type="email" required>
    <label>Required Email Address</label>
  </div>
  <div class="mui-textfield mui-textfield--float-label">
    <textarea required></textarea>
    <label>Required Textarea</label>
  </div>
  <div class="mui-textfield mui-textfield--float-label">
    <input type="email" value="Validation error">
    <label>Email Address</label>
  </div>
  <button type="submit" class="mui-btn mui-btn--raised">Submit</button>
</form>

Grid

Grid System

Currently, MUI uses the same grid system as Bootstrap except with the mui- class prefix prepended. The system is a mobile-first grid that scales up to 12 columns as the viewport size increases.

Example: Stacked-to-horizontal

md-1
md-1
md-1
md-1
md-1
md-1
md-1
md-1
md-1
md-1
md-1
md-1
md-8
md-4
md-4
md-4
md-4
md-6
md-6
<div class="mui-container-fluid">
  <div class="mui-row">
    <div class="mui-col-md-1">md-1</div>
    <div class="mui-col-md-1">md-1</div>
    <div class="mui-col-md-1">md-1</div>
    <div class="mui-col-md-1">md-1</div>
    <div class="mui-col-md-1">md-1</div>
    <div class="mui-col-md-1">md-1</div>
    <div class="mui-col-md-1">md-1</div>
    <div class="mui-col-md-1">md-1</div>
    <div class="mui-col-md-1">md-1</div>
    <div class="mui-col-md-1">md-1</div>
    <div class="mui-col-md-1">md-1</div>
    <div class="mui-col-md-1">md-1</div>
  </div>
  <div class="mui-row">
    <div class="mui-col-md-8">md-8</div>
    <div class="mui-col-md-4">md-4</div>
  </div>
  <div class="mui-row">
    <div class="mui-col-md-4">md-4</div>
    <div class="mui-col-md-4">md-4</div>
    <div class="mui-col-md-4">md-4</div>
  </div>
  <div class="mui-row">
    <div class="mui-col-md-6">md-6</div>
    <div class="mui-col-md-6">md-6</div>
  </div>
</div>

Example: Mobile and desktop

xs-12 md-8
xs-6 md-4
xs-6 md-4
xs-6 md-4
xs-6 md-4
xs-6
xs-6
<div class="mui-container-fluid">
  <div class="mui-row">
    <div class="mui-col-xs-12 mui-col-md-8">xs-12 md-8</div>
    <div class="mui-col-xs-6 mui-col-md-4">xs-6 md-4</div>
  </div>
  <div class="mui-row">
    <div class="mui-col-xs-6 mui-col-md-4">xs-6 md-4</div>
    <div class="mui-col-xs-6 mui-col-md-4">xs-6 md-4</div>
    <div class="mui-col-xs-6 mui-col-md-4">xs-6 md-4</div>
  </div>
  <div class="mui-row">
    <div class="mui-col-xs-6">xs-6</div>
    <div class="mui-col-xs-6">xs-6</div>
  </div>
</div>

Example: Offsetting columns

md-4
md-4 md-offset-4
md-3 md-offset-3
md-3 md-offset-3
md-6 md-offset-3
<div class="mui-container-fluid">
  <div class="mui-row">
    <div class="mui-col-md-4">md-4</div>
    <div class="mui-col-md-4 mui-col-md-offset-4">md-4 md-offset-4</div>
  </div>
  <div class="mui-row">
    <div class="mui-col-md-3 mui-col-md-offset-3">md-3 md-offset-3</div>
    <div class="mui-col-md-3 mui-col-md-offset-3">md-3 md-offset-3</div>
  </div>
  <div class="mui-row">
    <div class="mui-col-md-6 mui-col-md-offset-3">md-6 md-offset-3</div>
  </div>
</div>

Overlay

The MUI CSS library provides an overlay element which can be used to darken the viewport and disable scrolling. To implement features such as modal dialogs, simply add your modal element to the overlay as a child element:

Example

<div class="mui-overlay" id="overlay_1" on="tap:overlay_1.hide" tabindex="-1" role="dialog" hidden></div>
<button class="mui-btn mui-btn--primary" on="tap:overlay_1.show">Activate overlay</button>

Modal Example

<div class="mui-overlay" id="overlay_2" tabindex="-1" role="dialog" hidden>
  <div class="mui-panel">
    <p>This is a modal</p>
    <button class="mui-btn mui-btn--primary" on="tap:overlay_2.hide">Close</button>
  </div>
</div>
<button class="mui-btn mui-btn--primary" on="tap:overlay_2.show">Activate modal</button>

Panels

Example

<div class="mui-panel">
  <!-- content -->
</div>

Tables

Default tables

Column 1 Column 2
Cell 1-1 Cell 1-2
Cell 2-1 Cell 2-2 
<table class="mui-table">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1-1</td>
      <td>Cell 1-2</td>
    </tr>
    <tr>
      <td>Cell 2-1</td>
      <td>Cell 2-2</td>
    </tr>
  </tbody>
</table>

Bordered tables

To add borders use the .mui-table--bordered class:

Column 1 Column 2
Cell 1-1 Cell 1-2
Cell 2-1 Cell 2-2 
<table class="mui-table mui-table--bordered">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1-1</td>
      <td>Cell 1-2</td>
    </tr>
    <tr>
      <td>Cell 2-1</td>
      <td>Cell 2-2</td>
    </tr>
  </tbody>
</table>

Tabs

Default tabs

Pane-1
Pane-2
Pane-3
<ul class="mui-tabs__bar">
  <li class="mui--is-active" [class]="tabs_pane_1 == 1 ? 'mui--is-active' : ''"><a on="tap:AMP.setState({tabs_pane_1: 1})">Tab-1</a></li>
  <li [class]="tabs_pane_1 == 2 ? 'mui--is-active' : ''"><a on="tap:AMP.setState({tabs_pane_1: 2})">Tab-2</a></li>
  <li [class]="tabs_pane_1 == 3 ? 'mui--is-active' : ''"><a on="tap:AMP.setState({tabs_pane_1: 3})">Tab-3</a></li>
</ul>
<div class="mui-tabs__pane mui--is-active" [class]="'mui-tabs__pane' + (tabs_pane_1 == 1 ? ' mui--is-active' : '')">Pane-1</div>
<div class="mui-tabs__pane" [class]="'mui-tabs__pane' + (tabs_pane_1 == 2 ? ' mui--is-active' : '')">Pane-2</div>
<div class="mui-tabs__pane" [class]="'mui-tabs__pane' + (tabs_pane_1 == 3 ? ' mui--is-active' : '')">Pane-3</div>

Justified tabs

Pane-1
Pane-2
Pane-3
<ul class="mui-tabs__bar mui-tabs__bar--justified">
  <li class="mui--is-active" [class]="tabs_pane_2 == 1 ? 'mui--is-active' : ''"><a on="tap:AMP.setState({tabs_pane_2: 1})">Tab-1</a></li>
  <li [class]="tabs_pane_2 == 2 ? 'mui--is-active' : ''"><a on="tap:AMP.setState({tabs_pane_2: 2})">Tab-2</a></li>
  <li [class]="tabs_pane_2 == 3 ? 'mui--is-active' : ''"><a on="tap:AMP.setState({tabs_pane_2: 3})">Tab-3</a></li>
</ul>
<div class="mui-tabs__pane mui--is-active" [class]="'mui-tabs__pane' + (tabs_pane_2 == 1 ? ' mui--is-active' : '')">Pane-1</div>
<div class="mui-tabs__pane" [class]="'mui-tabs__pane' + (tabs_pane_2 == 2 ? ' mui--is-active' : '')">Pane-2</div>
<div class="mui-tabs__pane" [class]="'mui-tabs__pane' + (tabs_pane_2 == 3 ? ' mui--is-active' : '')">Pane-3</div>

Typography

Styles

MUI has several helper classes to implement different text styles:

Display4
Display3
Display2
Display1
Headline
Title
Subhead
Body2
Body1
Caption
Menu
Button
<div class="mui--text-display4">Display4</div>
<div class="mui--text-display3">Display3</div>
<div class="mui--text-display2">Display2</div>
<div class="mui--text-display1">Display1</div>
<div class="mui--text-headline">Headline</div>
<div class="mui--text-title">Title</div>
<div class="mui--text-subhead">Subhead</div>
<div class="mui--text-body2">Body2</div>
<div class="mui--text-body1">Body1</div>
<div class="mui--text-caption">Caption</div>
<div class="mui--text-menu">Menu</div>
<div class="mui--text-button">Button</div>

Colors

You can use the CSS color helpers to change the 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 class="mui--bg-primary-light">
  <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">white</div>
<div class="mui--text-danger">danger</div>

Material Design Spec

You can combine style and color helpers to implement the Material Design typograpy spec:

Display4
Display3
Display2
Display1
Headline
Title
Subhead
Body2
Body1
Caption
Menu
Button
Display4
Display3
Display2
Display1
Headline
Title
Subhead
Body2
Body1
Caption
Menu
Button
Display4
Display3
Display2
Display1
Headline
Title
Subhead
Body2
Body1
Caption
Menu
Button
<div class="mui--text-dark-secondary mui--text-display4">Display4</div>
<div class="mui--text-dark-secondary mui--text-display3">Display3</div>
<div class="mui--text-dark-secondary mui--text-display2">Display2</div>
<div class="mui--text-dark-secondary mui--text-display1">Display1</div>
<div class="mui--text-dark mui--text-headline">Headline</div>
<div class="mui--text-dark mui--text-title">Title</div>
<div class="mui--text-dark mui--text-subhead">Subhead</div>
<div class="mui--text-dark mui--text-body2">Body2</div>
<div class="mui--text-dark mui--text-body1">Body1</div>
<div class="mui--text-dark-secondary mui--text-caption">Caption</div>
<div class="mui--text-dark mui--text-menu">Menu</div>
<div class="mui--text-dark mui--text-button">Button</div>

<div class="mui--bg-primary-light">
  <div class="mui--text-light-secondary mui--text-display4">Display4</div>
  <div class="mui--text-light-secondary mui--text-display3">Display3</div>
  <div class="mui--text-light-secondary mui--text-display2">Display2</div>
  <div class="mui--text-light-secondary mui--text-display1">Display1</div>
  <div class="mui--text-light mui--text-headline">Headline</div>
  <div class="mui--text-light mui--text-title">Title</div>
  <div class="mui--text-light mui--text-subhead">Subhead</div>
  <div class="mui--text-light mui--text-body2">Body2</div>
  <div class="mui--text-light mui--text-body1">Body1</div>
  <div class="mui--text-light-secondary mui--text-caption">Caption</div>
  <div class="mui--text-light mui--text-menu">Menu</div>
  <div class="mui--text-light mui--text-button">Button</div>
</div>

<div class="mui--text-accent-secondary mui--text-display4">Display4</div>
<div class="mui--text-accent-secondary mui--text-display3">Display3</div>
<div class="mui--text-accent-secondary mui--text-display2">Display2</div>
<div class="mui--text-accent-secondary mui--text-display1">Display1</div>
<div class="mui--text-accent mui--text-headline">Headline</div>
<div class="mui--text-accent mui--text-title">Title</div>
<div class="mui--text-accent mui--text-subhead">Subhead</div>
<div class="mui--text-accent mui--text-body2">Body2</div>
<div class="mui--text-accent mui--text-body1">Body1</div>
<div class="mui--text-accent-secondary mui--text-caption">Caption</div>
<div class="mui--text-accent mui--text-menu">Menu</div>
<div class="mui--text-accent mui--text-button">Button</div>

Semantic HTML

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Strong
Emphasis
Abbr 
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<hr>
<div>
  <a href="#">Links</a>
</div>
<div>
  <strong>Strong</strong>
</div>
<div>
  <em>Emphasis</em>
</div>
<div>
  <abbr title="Abbreviation">Abbr</abbr>
</div>

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>
align-top align-middle align-bottom 
<table width="100%">
  <tr>
    <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>

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"></div>
<br>

<!-- Only sets the minimum height -->
<div class="mui--appbar-min-height"></div>
<br>

<!-- Vertically center text in appbar -->
<div class="mui--appbar-height mui--appbar-line-height">Vertically centered</div>

Caret

<div>
  <span class="mui-caret"></span>
</div>

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>

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>

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>

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>

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 class="mui--bg-primary-light">
  <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">white</div>
<div class="mui--text-danger">danger</div>

Background color

 
 
 

 
 
 

 
<div class="mui--bg-primary"></div>
<div class="mui--bg-primary-dark"></div>
<div class="mui--bg-primary-light"></div>
<br>
<div class="mui--bg-accent"></div>
<div class="mui--bg-accent-dark"></div>
<div class="mui--bg-accent-light"></div>
<br>
<div class="mui--bg-danger"></div>

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>

User Select

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