Material Design Kit
Interactive web components inspired from Material Design, using vanilla CSS, JavaScript and HTML.
Layout components
- x Drawer - A navigation drawer that can slide in from the left or right.
- x Drawer Layout - A wrapper element that positions a Drawer and other content.
- x Header - A container element for navigation and other content at the top of the screen with visual effects based on scroll position.
- x Header Layout - A wrapper element that positions a Header and other content.
- x Box - A container element for generic content with visual effects based on scroll position.
- Tabs
- Footer
Media components
- x Reveal - A content area that reveals on user interaction.
- x Carousel - A component for cycling through elements with Mouse Grab (desktop) and Touch support.
- Overlay
Form components
Informative
Notifications
Behaviors
- x Scroll Target - Allows an element to respond to scroll events from a designated scroll target.
- x Scroll Effect - Allows a consumer of the Scroll Target behavior to use scroll effects.
- Ripple
- Swipe Dismiss
Style guide
- Browser resets - (normalize.css)
- Responsive breakpoints
- Flexbox layout
- Colors
- Typography
- Shadow
- Grid
- Button
- Card
- List
Compatibility
Supports the last two versions of every major browser.
- Chrome
- Safari
- Firefox
- IE 11/Edge
- Opera
- Mobile Safari
- Chrome on Android
Library
- x Compatible with projects using (or not using) jQuery, Bootstrap and MDL.
- x UMD library format - supports AMD, CommonJS (browserify), ES6 imports and global namespace.
Demos
Note there are many more demos included with the source of each component.
- 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
- Reveal
- Carousel
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>
<script>domFactory.handler.autoInit()</script>
</body>
</html>