MaterialZ is a CSS library created by Zachary Yaro that implements the Material Design spec. Simply adding the stylesheets introduces a base coat of Material theming to any site. With a few tweaks, other widgets, such as app bars, lists, and cards, can be added.
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.
The top three levels of headings have been styled according to the heading, title, and subhead styles in the Material Design guidelines.
<h1>Headline</h1>
<h2>Title</h2>
<h3>Subhead</h3>
While there is no official design spec, the <kbd> element has formatting similar to keyboard hints in some of Google's Material Design apps.
Reload the page with <kbd>Ctrl</kbd>+<kbd>R</kbd>.
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).
<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>
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" />
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" />
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>
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" />
Any <input type="range" /> will be styled as a paper slider.
<input type="range" />
<input type="range" disabled="disabled" />
Any <progress> element will be styled as a paper progress bar.
<progress value="0.5"></progress>
Adding the material-widgets.css style sheet will allow the following widgets to be added.
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>
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="Action 1">
<img src="icon1.png" alt="Action 1" />
</button>
<button title="Action 2">
<img src="icon2.png" alt="Action 2" />
</button>
<button title="Action 3">
<img src="icon3.svg" alt="Action 3" />
</button>
<button title="Action 4">
Action 4
</button>
</div>
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).
<header role="toolbar" class="appBar">
<span style="float: right;">
<button title="Action 1">
<img src="icon1.png" alt="Action 1" />
</button>
<button title="Action 2">
<img src="icon2.png" alt="Action 2" />
</button>
<button title="Action 3">
<img src="icon3.svg" alt="Action 3" />
</button>
<button title="Action 4">
Action 4
</button>
</span>
Title text
</header>
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>
A progress (or role="progress") element with the circular class will be styled as a circular progress indicator. Change the color (or border-top-color) to change the color of the spinner.
<progress class="circular"></progress>
<progress class="circular" style="width: 32px; height: 32px;"></progress>
<progress class="circular" style="color: #2196f3;"></progress>
<progress class="circular" style="border-top-color: #2196f3;"></progress>
Adding the material-depth.css style sheet enables depth classes z1 through z5, which add shadows to elements.
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).
<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>