Material Design Kit
- 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.
- 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.
- 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.
- Swipe Dismiss
- Browser resets - (normalize.css)
- Responsive breakpoints
- Flexbox layout
Supports the last two versions of every major browser.
- IE 11/Edge
- Mobile Safari
- Chrome on Android
- 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.
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
InstallationInstall 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>