Material Design Lite Introduction

what is Material Design Lite(MDL) ?

• Material Design Lite(MDL) Components are created using CSS, HTML5 and JavaScript.
• These Components can be combined together on a single document based on design requirements to create an awesome MDL style webpage.
• The Advantage of using MDL is that pages created are user friendly, consistent across platforms and browsers, beautiful and lots of functionality.
• All Principles of modern design are available in MDL framework, it provides browser and platform independence along with graceful degradation, hence useful for developers creating portable, productive and user friendly webpages.

Salient features:

• In-built responsive designing.
• Standard CSS with minimal footprint.
• Includes new versions of common user interface controls such as buttons, check boxes, and text fields which are adapted to follow Material Design concepts.
• Includes enhanced and specialized features like cards, column layouts, sliders, spinners, tabs, typography, and so on.
• Can be used with or without any library or development environment.
• Cross-browser, and can be used to create reusable web components.
• Free to use

Components:

• Like all framework, the most important component of MDL design language is components , which comprises of User Interface controls like Cards, Menus, Progress Bars, Switches, buttons etc.
• These Components ranges from the most commonly uses one(like buttons) to some specialized one (like spinners)
• These Components and other resources are part of the MDL library and development framework, its free to download, modify and use, and comes with create commons license.

learn material design lite tutorials - introduction examples

Downloading and Adding MDL Resources:

• The First Step to using MDL on your webpage is to Include Material Design Lite Resources(i.e HTML, CSS and JavaScript Files) on your webpage
• Instead of Downloading and keeping the files on your own server, we recommend that you the Google CDN(content distribution Network), since it reduces page load time.
• If you wish to Modify and customize these files, you can download them and host on your own server, build from the source code or install using npm/bower project.

Color Scheme:

• The MDL Design Language makes use to two color tones for all components and styles, the two color tone comprises ofprimary and accent color, which can also be customized using Customize and Preview Tool
• The Colors used as primary and accent are described in the name of the CSS files as well in the pattern of

material.{primary}-{accent}.min.css eg material.red-purple.min.css 

• The CDN server already hosts multiple color themes, which can be selected using Customize and Preview Tool, simple add them to your webpage and job done.

Using MDL Components:

• The MDL Components are the building blocks of any MDL webpage, using these components is easy, simply use the related class within elements at proper places in the document.
• In the Demo, we use the MDL component to create a Button with ripple features and colors.

This material design lite tutorial provides you the basics on the following areas android material design , google material design , material ui , google design , amg lite , bootstrap material design , mdl , materialize css , cool material , material design list , material design website , material design cards , material design ui , material design web , material design apps , material design tutorial , angular material design , material design table , material design angular , material design examples , material design theme , material design animation , material design css , what is material design , material design framework , material design buttons , material design template , material design components , google material design colors , material design google , material design light