Interactive web components inspired from Material Design, using vanilla CSS, JavaScript and HTML.
- 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.
- Tabs
- Footer
- Reveal - A content area that reveals on user interaction.
- Carousel - A component for cycling through elements with Mouse Grab (desktop) and Touch support.
- Overlay
- Text Fields
- Slider
- Toggle
- Tooltip
- Progress
- Snackbar
- Scroll Target - Allows an element to respond to scroll events from a designated scroll target.
- Scroll Effect - Allows a consumer of the Scroll Target behavior to use scroll effects.
- Ripple
- Swipe Dismiss
- Browser resets - (normalize.css)
- Responsive breakpoints
- Flexbox layout
- Colors
- Typography
- Shadow
- Grid
- Button
- Card
- List
Supports the last two versions of every major browser.
- Chrome
- Safari
- Firefox
- IE 11/Edge
- Opera
- Mobile Safari
- Chrome on Android
Library
- Compatible with projects using (or not using) jQuery, Bootstrap and MDL.
- UMD library format - supports AMD, CommonJS (browserify), ES6 imports and global namespace.
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
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>Get help directly from our team via our Slack channel. Request invite