Material Design Lite - Overview

What is Material Design Lite?

Material Design Lite, MDL is a UI component library created with CSS, JavaScript, and HTML. MDL UI components helps in constructing attractive, consistent, and functional web pages and web apps while adhering to modern web design principles like browser portability, device independence, and graceful degradation.

Material Design Lite - Environment Setup

How to Use Material Design Lite??

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).
  

Material Design Lite - Layouts

HTML5 has the following container elements:

• <div> - Provides a generic container to HTML content.
• <header> - Represents the header section.
• <footer> - Represents the footer section.
• <article> - Represents articles.
• <section> - Provides a generic container for various types of sections.
  

Material Design Lite - Grids

The Material Design Lite (MDL) grid is a component for laying out content for varying screen sizes. The MDL grid is defined and enclosed by a container/div element. A grid has 12 columns in the desktop size screen, 8 in the tablet size screen, and 4 in the phone size screen, where each size have predefined margins and gutters. Cells are laid out in sequential manner in a row, in the order they are defined, with following exceptions:

Material Design Lite - Tabs

The Material Design Lite (MDL) tab component is a user interface component which helps to show multiple screens in a single space in exclusive manner.
The MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the tabs. The below table mentions the available classes and their effects.

Material Design Lite - Footers

An MDL footer component comes in two primary forms: mega-footer and mini-footer. ega-footer contains more complex content than mini-footer. A mega-footer can represent multiple sections of content which are separated by horizontal rules, whereas a mini-footer presents a single section of content. Both footer typically contains both informational and clickable content, such as links.

Material Design Lite - Badges

An MDL badge component is a onscreen notification which can be a number or icon. It is generally used to emphasize the number of items.
The MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the badges. The below table mentions the available classes and their effects.

Material Design Lite - Buttons

The MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the buttons. The below table mentions the available classes and their effects.

Material Design Lite - Cards

The MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the display various types of cards. The below table mentions the available classes and their effects.

Material Design Lite - Progress Bars

The MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the display various types of progress bars. The below table mentions the available classes and their effects.

Material Design Lite - Spinners

The MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the display various types of spinners. The below table mentions the available classes and their effects.

Material Design Lite - Menus

The MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the display various types of menu. The below table mentions the available classes and their effects.

Material Design Lite - Sliders

The MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the display various types of menu. The below table mentions the available classes and their effects.

Material Design Lite - Checkboxes

The MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the display various types of checkboxes. The below table mentions the available classes and their effects.

Material Design Lite - Radio Buttons

The MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the display various types of radio buttons. The below table mentions the available classes and their effects.

Material Design Lite - Icons

The MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the display various types of checkboxes as icons. The below table mentions the available classes and their effects.

Material Design Lite - Switches

The MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the display various types of checkboxes as switches. The below table mentions the available classes and their effects.

Material Design Lite - Datatable

The MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the display a table as data-table. The below table mentions the available classes and their effects.

Material Design Lite - Textfields

The MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the display various types of text inputs. The below table mentions the available classes and their effects.

Material Design Lite - Tooltips

The MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the display various types of tooltips. The below table mentions the available classes and their effects.