MaterialZ is a CSS library created by Zachary Yaro that implements the Material Design spec. Simply adding the stylesheets will instantly Material-theme any site. With a few tweaks, other widgets, such as app bars, lists, and cards, can be added.


Elements

Adding the material-elements.css style sheet will automatically style the following elements. That style sheet works based on standard HTML elements and attributes, so it can work without adding additional classes other frameworks without CSS classes clashing.

Headings

The top three levels of headings have been styled according to the heading, title, and subhead styles in the Material Design guidelines.

Headline

Title

Subhead

<h1>Headline</h1>
<h2>Title</h2>
<h3>Subhead</h3>

Buttons

Any <button> element, any <input> with type set to button, submit, or reset, or any other element with role="button" will automatically be styled as a flat paper button. Adding a depth class will turn it into a raised button (see Depth below).




Div button
Raised div button
<button>Button</button>
<button class="z1">Raised button</button>

<button disabled="disabled">Disabled button</button>
<button class="z1" disabled="disabled">Disabled raised button</button>

<input type="button" value="Input Button" />
<input type="button" class="z1" value="Raised input button" />

<div role="button">Div Button</div>
<div role="button" class="z1">Raised Div Button</div>

Radio buttons

An <input type="radio" /> will be styled and animated as a paper radio button. (Note this is only fully supported in WebKit- and Blink-based browsers, such as Chrome and Safari.)

<input type="radio" name="radioset1" />
<input type="radio" name="radioset1" checked="checked" />
<input type="radio" name="radioset2" disabled="disabled" />
<input type="radio" name="radioset2" checked="checked" disabled="disabled" />

Checkboxes

An <input type="checkbox" /> will be styled and animated as a paper checkbox. (Note this is only fully supported in WebKit- and Blink-based browsers, such as Chrome and Safari.)

<input type="checkbox" />
<input type="checkbox" checked="checked" />
<input type="checkbox" disabled="disabled" />
<input type="checkbox" checked="checked" disabled="disabled" />

Drop-down menus

A simple <select> element will be styled as a paper drop-down menu.

<select>
    <option>Lorem</option>
    <option>Ipsum</option>
    <option>Dolor</option>
    <option>Sit</option>
    <option>Amet</option>
</select>

Text fields

Any <input /> with type set to search, password, email, url, or number will be styled as a paper text field.

<input type="text" placeholder="Text field" />

Sliders

Any <input type="range" /> will be styled as a paper slider.

<input type="range" />
<input type="range" disabled="disabled" />

Progress bars

Any <progress> element will be styled as a paper progress bar.

<progress value="0.5"></progress>

Widgets

Adding the material-widgets.css style sheet will allow the following widgets to be added.

Lists

An <ol> or <ul> with the list class will have its list items and buttons styled.

<ul class="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li><button>Button</button></li>
    <li><div role="button">Div button</button></li>
</ul>

Toolbars

An element with role="toolbar" will have its buttons styled as paper toolbar buttons. Icons will be resized to 24px, so SVGs and 2x PNGs may be used.

<div role="toolbar">
    <button title="Button 1">
        <img src="icon1.png" alt="Icon 1" />
    </button>
    <button title="Button 2">
        <img src="icon2.png" alt="Icon 2" />
    </button>
    <button title="Button 3">
        <img src="icon3.svg" alt="Icon 3" />
    </button>
</div>

App bars

An element (usually a <header>) with the appBar class will be styled as an app bar—fixed to the top of the page, and set to be 64px tall on larger screens and 56px tall on smaller screens. An app bar can be a toolbar as well by adding role="toolbar". A depth class can be added to visually raise button the app bar above other content (see Depth below).

[See the app bar at the top of the screen for an example.]
<header role="toolbar" class="appBar">
    <button style="float: right;" title="Button 3">
        <img src="icon3.svg" alt="Icon 3" />
    </button>
    <button style="float: right;" title="Button 2">
        <img src="icon2.png" alt="Icon 2" />
    </button>
    <button style="float: right;" title="Button 1">
        <img src="icon1.png" alt="Icon 1" />
    </button>

    Title text

</header>

Cards

An element with the card class will be styled as a paper card. Add a depth class to determine how high to visually raise the card (see Depth below).

<div class="card z1" style="width: 192px; height: 192px;"></div>

Circular progress indicators

A progress (or role="progress") element with the circular class will be styled as a circular progress indicator. Change the border-top-color to change the color of the spinner.

<progress class="circular"></progress> <progress class="circular" style="border-top-color: #2196f3;"></progress>

Depth

Adding the material-depth.css style sheet enables depth classes z1 through z5, which add shadows to elements.

Depth classes

An element with any of the five z-depth classes will have a shadow applied to it. A button with a depth class applied will function as a raised button (see Elements above).

z = 1

z = 2

z = 3

z = 4

z = 5
<div class="card z1" style="width: 256px;">
    z = 1
</div>

<div class="card z2" style="width: 256px;">
    z = 2
</div>

<div class="card z3" style="width: 256px;">
    z = 3
</div>

<div class="card z4" style="width: 256px;">
    z = 4
</div>

<div class="card z5" style="width: 256px;">
    z = 5
</div>