Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible.
The MDL components are created with CSS, JavaScript, and HTML. You can use the components to construct web pages and web apps that are attractive, consistent, and functional. Pages developed with MDL will adhere to modern web design principles like browser portability, device independence, and graceful degradation.
The MDL component library includes new versions of common user interface controls such as buttons, check boxes, and text fields, adapted to follow Material Design concepts. The library also includes enhanced and specialized features like cards, column layouts, sliders, spinners, tabs, typography, and more. MDL is free to download and use, and may be used with or without any library or development environment (such as Web Starter Kit). It is a cross-browser, cross-OS web developer’s toolkit that can be used by anyone who wants to write more productive, portable, and — most importantly — usable web pages.
General rules and principles
In general, follow these basic steps to use an MDL component in your HTML page:
- Start with a standard HTML element, such as
buttons,divorul, depending on the MDL component you want to use. This establishes the element in the page and readies it for MDL modification. - Add one or more MDL-specific CSS classes to the element, such as
mdl-buttonormdl-tabs__panel, again depending on the component. The classes apply the MDL enhancements to the element and turn it into an MDL component.
Remember to include the meta viewport tag in your document so mobile devices will render correctly.
<meta name="viewport" content="width=device-width, initial-scale=1.0">Material Design Lite uses namespaced BEM classes—which can apply to almost any HTML element—to construct components. For some components you can use almost any element. The examples in each component’s documentation use elements that perform well as that component. If you must use elements other than those shown in the examples, we encourage you to experiment to find the best combination of HTML elements and MDL CSS classes for your application.
Use MDL on dynamic websites
Material Design Lite will automatically register and render all elements marked with MDL classes upon page load. However in the case where you are creating DOM elements dynamically you need to register new elements using the upgradeElement function. Here is how you can dynamically create the same raised button with ripples shown in the section above:
<div id="container"/>
<script>
var button = document.createElement('button');
var textNode = document.createTextNode('Click Me!');
button.appendChild(textNode);
button.className = 'mdl-button mdl-js-button mdl-js-ripple-effect';
componentHandler.upgradeElement(button);
document.getElementById('container').appendChild(button);
</script>What are MDL’s responsibilities?
Material Design Lite is built to provide a lightweight and basic set of Material Design components and templates for web sites. The project does not intend to provide structures to create all possible UX needs, but to provide a low-friction Material Design implementation you can build on. Even within Material Design itself, cards specifically, it is unfeasible to provide every combination in a seamless manner. When you find something not provided, such as dropdowns in the drawer, you may need to code your own component.
The team is committed to providing a great experience to developers while staying true to the promise of lite.
For more information https://getmdl.io/
0 Comments