MaterialZ is a CSS library that implements the Material Design spec. Simply adding the stylesheets introduces a base coat of Material theming. With a few tweaks, other widgets, such as app bars, lists, and cards, can be added. MaterialZ is designed to be a low-effort “it just works” alternative to other Material Design libraries, trading advanced customization options for minimizing complexity.
Get it on GitHub ⭷
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, tel or number will be styled as a paper text field. Date/time pickers date, datetime-local, month, time, or week will as well.
<input type="text" placeholder="Text field" />
<input type="number" value="10" />
<input type="date" />
<input type="datetime-local" />
<input type="month" />
<input type="time" />
<input type="week" />
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. A card with the full-width class as well will have “auto” left and right margins, and will fill the entire window width in narrow windows. (Each of these sections is a <section class="card full-width z1">.)
<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 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>
A checkbox with the switch class will be styled as a toggle switch. When toggled on, the switch will be the current color.
<input type="checkbox" class="switch" />
<input type="checkbox" class="switch" checked="checked" />
<input type="checkbox" class="switch" disabled="disabled" />
<input type="checkbox" class="switch" checked="checked" disabled="disabled" />
<input type="checkbox" class="switch" checked="checked" style="color: #f44336;" />
<input type="checkbox" class="switch" checked="checked" disabled="disabled" style="color: #f44336;" />
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. A card with a depth class applied will also be lightened as appropriate for its elevation in dark theme.
<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>
MaterialZ automatically adjusts a few things in narrow windows.
In a window ≤ 600px wide, MaterialZ makes the following adjustments:
Adding the material-dark.css style sheet overrides the default (light) Material styles to standard Material dark theme.
The easiest way to let the user choose a theme is to add a (prefers-color-scheme: dark) media query to the import, which will automatically load it if the user's system theme is set to dark. (This page does that.) At time of writing, this is supported on the latest versions of all major browsers on the latest versions of Android, iOS, MacOS, and Windows.
<link rel="stylesheet" type="text/css" href="material-dark.css" media="(prefers-color-scheme: dark)" />
You can also include/exclude the import based on a user setting.
You can, of course, not include a light/dark theme option, but that is generally not recommended.
See also: Material dark theme guidelines ⭷
If you only need to support browsers that support CSS custom properties, you can specify a single accent color.
Instead of individually overriding the colors of elements, set the --mz-accent-color property. Do keep in mind older browsers will ignore your custom property.
:root {
--mz-accent-color: #f44336;
}