Search within TutorialsPark

MDL : Introduction

How to use MDL - Material Design Lite to create Webpages with Components and Icons

Material Design Lite (MDL) : Introduction

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.

Material Design Lite(MDL) : 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.

Material Design Lite(MDL) : 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.

Example: Material Design Lite (MDL) : Downloading and Adding MDL Resources

Note:You Can download the Individual files, modify and host them locally as well.

Material Design Lite(MDL) : Color Scheme

The MDL Design Language makes use to two color tones for all components and styles, the two color tone comprises of primary 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

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.

Material Design Lite(MDL) : 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.

Example: Material Design Lite (MDL) : Button Component

Give it a TRY! » Note: Button Component has ripple effects and button color.