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 ⭷


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>

Keyboard shortcuts

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 Ctrl+R.
Reload the page with <kbd>Ctrl</kbd>+<kbd>R</kbd>.

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, 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" />

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="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>

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">
    <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>

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. 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>

Circular progress indicators

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>

Toggle switches

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;" />

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. A card with a depth class applied will also be lightened as appropriate for its elevation in dark theme.

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>

Responsive design

MaterialZ automatically adjusts a few things in narrow windows.

Narrow window changes

In a window ≤ 600px wide, MaterialZ makes the following adjustments:

As of the current version of MaterialZ, the 600px breakpoint cannot be configured, however you can find/replace “600px” in the MaterialZ CSS files to change the breakpoint. This will be configurable in a future version of MaterialZ.

Dark theme

Adding the material-dark.css style sheet overrides the default (light) Material styles to standard Material dark theme.

Dark theme setting

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 ⭷


Accent color

If you only need to support browsers that support CSS custom properties, you can specify a single accent color.

Accent color property

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;
}



If you want to customize the accent color in browsers that do not support CSS custom properties⭷, you can find/replace “#40c4ff” in the MaterialZ CSS files to change the accent color.