Package Exports

material-design-kit
material-design-kit/dist/drawer-layout.js
material-design-kit/dist/drawer.js
material-design-kit/dist/header-layout.js
material-design-kit/dist/header.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (material-design-kit) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Material Design Kit

Interactive web components inspired from Material Design, using vanilla CSS, JavaScript and HTML.

Demos

Note there are many more demos included with each component below.

Left drawer - Slides in from the left
Drawer layout with header layout - Uses a Header Layout with a custom scrolling region
Header layout within drawer - Positions a header and other content within a drawer
Header layout within drawer with transform effects - Positions a header and other content within a drawer and use transform effects on header elements based on scroll position
Header with parallax and blend background effects

Compatibility

Supports ES5-compliant browsers (IE9+)
Compatible with projects using (or not using) jQuery, Bootstrap and MDL

Components

Drawer - A navigation drawer that can slide in from the left or right.
Drawer Layout - A wrapper element that positions a Drawer and other content.
Header - A container element for navigation and other content at the top of the screen with visual effects based on scroll position.
Header Layout - A wrapper element that positions a Header and other content.
Box - A container element for generic content with visual effects based on scroll position.
Reveal - A content area that reveals on user interaction.

Installation

Install MDK and it's dependencies via npm.

npm install material-design-kit dom-factory

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="node_modules/material-design-kit/dist/material-design-kit.css">
</head>
<body>
  <script src="node_modules/dom-factory/dist/dom-factory.js"></script>
  <script src="node_modules/material-design-kit/dist/material-design-kit.js" async defer></script>
</body>
</html>

Get help

Get help directly from our team via our Slack channel. Request invite