Explore topic-wise InterviewSolutions in .

There are two ways to use MATERIAL DESIGN Lite:

• LOCAL Installation - You can download the material.{primary}-{accent}.min.css and material.min.js files on your local machine and include it in your HTML code.
• CDN Based Version - You can include the material.{primary}-{accent}.min.css and material.min.js files into your HTML code DIRECTLY from the Content Delivery Network (CDN).

There are two ways to use Material Design Lite:

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.

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.

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>

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>

In general, follow these basic steps to use an MDL component in your HTML page:

1. Start with a standard HTML element, such as <button>, <DIV>, or <ul>, depending on the MDL component you WANT to use. This establishes the element in the page and readies it for MDL modification.
2. Add one or more MDL-specific CSS classes to the element, such as mdl-button or mdl-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">

A note about HTML elements and MDL CSS classes

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.

In general, follow these basic steps to use an MDL component in your HTML page:

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">

A note about HTML elements and MDL CSS classes

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.

Watching the whole REPOSITORY can INTRODUCE a lot of extra noise in your stream. To keep updated with just ISSUES you are interested in you only need to subscribe to that issue. This is done on the issue page by clicking the "Subscribe" button in the RIGHT hand sidebar.

Watching the whole repository can introduce a lot of extra noise in your stream. To keep updated with just issues you are interested in you only need to subscribe to that issue. This is done on the issue page by clicking the "Subscribe" button in the right hand sidebar.

MDL is IMPLEMENTED USING Sass and there are no current plans to change this. If you WISH to MAINTAIN a port to another preprocessor, you are more than welcome to.

MDL is implemented using Sass and there are no current plans to change this. If you wish to maintain a port to another preprocessor, you are more than welcome to.

Sure! There may be components or templates you WOULD like to SEE implemented in MDL that we don't yet provide. Please feel free to propose them on the ISSUE TRACKER. While we can't guarantee we'll be able to IMPLEMENT them all, we will consider requests and review them at regular intervals.

Sure! There may be components or templates you would like to see implemented in MDL that we don't yet provide. Please feel free to propose them on the Issue Tracker. While we can't guarantee we'll be able to implement them all, we will consider requests and review them at regular intervals.

We encourage the MDL user and DEVELOPER COMMUNITY to ask questions, and help ANSWER questions, on Stack Overflow, USING the Material-Design-Lite tag.

We encourage the MDL user and developer community to ask questions, and help answer questions, on Stack Overflow, using the Material-Design-Lite tag.

For V1 of MDL we are focused on the use-case of folks who are likely to need a few DIFFERENT components on their page and will want to INCLUDE most of the MDL library. This means that support and DOCS AROUND just plucking single components on their own is minimal.

That said, if you need to generate a build using just a single (or smaller number of) components, you will need to use Gulp with our Sass build. You can comment out those components you don’t need in material-design-lite.scss, comment out the scripts you don’t need in the Gulpfile and then run gulp to create your build.

For V1 of MDL we are focused on the use-case of folks who are likely to need a few different components on their page and will want to include most of the MDL library. This means that support and docs around just plucking single components on their own is minimal.

That said, if you need to generate a build using just a single (or smaller number of) components, you will need to use Gulp with our Sass build. You can comment out those components you don’t need in material-design-lite.scss, comment out the scripts you don’t need in the Gulpfile and then run gulp to create your build.

MDL is used in production by a few DIFFERENT Google properties. These use an older, INCOMPLETE VERSION but DEMONSTRATE what deployed experiences can LOOK like. 

MDL is used in production by a few different Google properties. These use an older, incomplete version but demonstrate what deployed experiences can look like. 

MDL is USED in production by a few different Google PROPERTIES. These USE an older, incomplete version but demonstrate what deployed EXPERIENCES can look LIKE. 

MDL is used in production by a few different Google properties. These use an older, incomplete version but demonstrate what deployed experiences can look like. 

MDL is an evolutionary step from the styleguide PROVIDED in Web Starter Kit. The more Web Starter Kit was used, the more it became clear that MANY developers simply wanted Material Design in their sites.

The WSK Styleguide also did not align to Material Design FULLY, it was simply based on the idea. From the WSK project, MDL was born to try and fill this need for developers. In the process making the implementation as faithful as POSSIBLE to the specification.

MDL is an evolutionary step from the styleguide provided in Web Starter Kit. The more Web Starter Kit was used, the more it became clear that many developers simply wanted Material Design in their sites.

The WSK Styleguide also did not align to Material Design fully, it was simply based on the idea. From the WSK project, MDL was born to try and fill this need for developers. In the process making the implementation as faithful as possible to the specification.

Minified: If it’s your first time using MDL, we recommend downloading one of the default packages from the ‘GETTING Started’ page that include a minified VERSION of our CSS/JS and optionally our pre-made Templates.

CDN: If you’re just prototyping or want to avoid hosting your own copy of the MDL CSS and JS files, you can use our CDN to PULL down a heavily edge-cached version.

Customiser: If you’re creating a new site with MDL and are using a custom color scheme, we recommend downloading the default package then generating a custom build using the Customiser tool. You can use this to override the material.min.css file for your own NEEDS.

Sass: If you would prefer to go all in, you can get the Sass version of MDL, which includes our original sources, docs and templates. This version allows maximum customisation using CSS variables and the REST of the Sass goodness you’re used to.

Minified: If it’s your first time using MDL, we recommend downloading one of the default packages from the ‘Getting Started’ page that include a minified version of our CSS/JS and optionally our pre-made Templates.

CDN: If you’re just prototyping or want to avoid hosting your own copy of the MDL CSS and JS files, you can use our CDN to pull down a heavily edge-cached version.

Customiser: If you’re creating a new site with MDL and are using a custom color scheme, we recommend downloading the default package then generating a custom build using the Customiser tool. You can use this to override the material.min.css file for your own needs.

Sass: If you would prefer to go all in, you can get the Sass version of MDL, which includes our original sources, docs and templates. This version allows maximum customisation using CSS variables and the rest of the Sass goodness you’re used to.

We think the community does a great job offering their own take on how Material Design should be implemented for CSS libraries.

That said, the large, diverse number of IMPLEMENTATIONS available are often quite liberal with their interpretation of the spec (not their fault!) and their opinions don’t always reflect what the Material Design team would consider ‘correct’. MDL was developed in CLOSE collaboration with the Material Design and Chrome UX teams and undergoes regular reviews for spec compliance. When we run into an AREA of the spec that isn’t yet fully fleshed out, MDL is able to offer REVIEWED opinions on how these should be solved in a way that TRIES to stay true to Material Design.

We think the community does a great job offering their own take on how Material Design should be implemented for CSS libraries.

That said, the large, diverse number of implementations available are often quite liberal with their interpretation of the spec (not their fault!) and their opinions don’t always reflect what the Material Design team would consider ‘correct’. MDL was developed in close collaboration with the Material Design and Chrome UX teams and undergoes regular reviews for spec compliance. When we run into an area of the spec that isn’t yet fully fleshed out, MDL is able to offer reviewed opinions on how these should be solved in a way that tries to stay true to Material Design.

Material Design can replace many PARTS of BOOTSTRAP. However, it does not intend to feature-match everything Bootstrap offers. Instead MDL intends to implement the COMPONENTS specified by the Material Design specification. This allows it to provide the most comprehensive and accurate SOLUTION available.

Material Design can replace many parts of Bootstrap. However, it does not intend to feature-match everything Bootstrap offers. Instead MDL intends to implement the components specified by the Material Design specification. This allows it to provide the most comprehensive and accurate solution available.

MDL focuses on delivering an experience that is OPTIMISED for static content sites, like BLOGS, marketing pages and more TRADITIONAL text-based web pages.

The Paper elements built with Polymer are fully encapsulated components that can be used individually or composed together to create a material design-style site, and support more ADVANCED USER interaction.

That said, MDL can be used alongside the Polymer element counterparts. Polymer uses the power of Web Components to encapsulate the designs used for those components. MDL does not affect the styling within custom components.

MDL focuses on delivering an experience that is optimised for static content sites, like blogs, marketing pages and more traditional text-based web pages.

The Paper elements built with Polymer are fully encapsulated components that can be used individually or composed together to create a material design-style site, and support more advanced user interaction.

That said, MDL can be used alongside the Polymer element counterparts. Polymer uses the power of Web Components to encapsulate the designs used for those components. MDL does not affect the styling within custom components.

The complete MDL experience should work in the LAST two VERSIONS of all evergreen browsers, whilst we gracefully degrade to CSS-only in browsers like IE9 that don’t pass our Cutting-the-mustard test.

Our browser compatibility matrix has the most up to date information on the browsers we officially support. For components, at MINIMUM we require support for querySelector, classList and addEventListener, which can be polyfilled as needed. Our Templates will work in IE10+, primarily due to our use of Flexbox.

The polyfills that we’re currently using for the MDL site to improve support in oldIE are the following:

<!--[if IE]>

<script SRC="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.2.0/es5-shim.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/classlist/2014.01.31/classList.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>

<![endif]-->

IE10 standards mode removes support for conditional comments, so the above will only get interpreted by older versions of IE, such as IE9.

The complete MDL experience should work in the last two versions of all evergreen browsers, whilst we gracefully degrade to CSS-only in browsers like IE9 that don’t pass our Cutting-the-mustard test.

Our browser compatibility matrix has the most up to date information on the browsers we officially support. For components, at minimum we require support for querySelector, classList and addEventListener, which can be polyfilled as needed. Our Templates will work in IE10+, primarily due to our use of Flexbox.

The polyfills that we’re currently using for the MDL site to improve support in oldIE are the following:

<!--[if IE]>

<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.2.0/es5-shim.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/classlist/2014.01.31/classList.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>

<![endif]-->

IE10 standards mode removes support for conditional comments, so the above will only get interpreted by older versions of IE, such as IE9.

MDL’s components were designed from the GROUND up with PROGRESSIVE enhancement in mind. We ATTEMPT to build on native HTML ELEMENTS as much as possible, relying on JavaScript where absolutely necessary for ‘ENHANCEMENTS’.

MDL’s components were designed from the ground up with progressive enhancement in mind. We attempt to build on native HTML elements as much as possible, relying on JavaScript where absolutely necessary for ‘enhancements’.

MDL was written using BEM. BEM stands for Block, Element, Modifier. It is a method used to construct CSS class-names so they are consistent, isolated, and EXPRESSIVE.

A few good resources for learning more about BEM methods are:

• CSSWizardry
• CSS-Tricks
• SMASHING MAGAZINE

These are great resources that simplify the data NEEDED to understand BEM. If you want to read the methodology from the inventors, Yandex provides the RESOURCE. This reference goes way beyond just the CSS and into the full JavaScript setup they use as well.

MDL was written using BEM. BEM stands for Block, Element, Modifier. It is a method used to construct CSS class-names so they are consistent, isolated, and expressive.

A few good resources for learning more about BEM methods are:

These are great resources that simplify the data needed to understand BEM. If you want to read the methodology from the inventors, Yandex provides the resource. This reference goes way beyond just the CSS and into the full JavaScript setup they use as well.

If you’re interested in a Material Design experience using vanilla Web technologies like CSS, JavaScript and HTML, MDL might be a useful option to consider. We OPTIMISE for websites heavy on content, such as marketing pages, articles, blogs and general web content that isn’t particularly app-y. If you just want to pick some colors, customise a template and ship a Material experience, we try to help make that process simpler.

Whilst there EXIST several community-driven options for Material Design, our experience has shown that there are several gaps in the Material specification when it comes to the web. Rather than guessing how these gaps should be filled (something we know the community has struggled with), we’ve opted for a close collaboration with the Material Design TEAM to provide a Material library that is both spec compatible for today and provides guidance on aspects of the spec still being evolved.

If you’re interested in a Material Design experience using vanilla Web technologies like CSS, JavaScript and HTML, MDL might be a useful option to consider. We optimise for websites heavy on content, such as marketing pages, articles, blogs and general web content that isn’t particularly app-y. If you just want to pick some colors, customise a template and ship a Material experience, we try to help make that process simpler.

Whilst there exist several community-driven options for Material Design, our experience has shown that there are several gaps in the Material specification when it comes to the web. Rather than guessing how these gaps should be filled (something we know the community has struggled with), we’ve opted for a close collaboration with the Material Design team to provide a Material library that is both spec compatible for today and provides guidance on aspects of the spec still being evolved.