Introduction to Material Design Lite for Website


 

Google has launched a new website framework, Material Design Lite – http://www.getmdl.io/ using which web developers can now add a Material Design look and feel to websites.

It uses CSS, HTML, JavaScript and enables website to display like App. It can be used for any website, blog, article or news site.

It works like a normal framework and web developer have to include the Material Lite CSS and JavaScript files in each HTML page in the project. It has containers, sliders, tables, menus buttons etc. Most elements can be changed using CSS classes like animation of adding a Ripple effect when a button is clicked.

The website – getmdl.io has several ready to use components which will enable a web developer to start using material design:

Templates

Templates There are 5 ready to use themes or templates namely Blog, Android.com MDL skin, Dashboard, Text-heavy webpage and Stand-alone article http://www.getmdl.io/templates/index.html

Introduction to Material Design Lite for Website

Components

Components UI components like Badges, Buttons, Cards, Layout, Loading, Menus, Sliders, Toggles, Tables, Text Fields Tooltips are nicely designed http://www.getmdl.io/components/index.html

Introduction to Material Design Lite for Website

Styles

Styles The site also guides on the styling aspect of website that includes Fonts. Icons, Spritesheets, color palette. As in mobile, MDL uses Roboto Font http://www.getmdl.io/styles/index.html

Introduction to Material Design Lite for Website

Customize

Customize There is a custom CSS theme builder and color wheel using which developers can choose and download primary and secondary theme CSS

Introduction to Material Design Lite for Website

Download MDL project files:

https: //github.com/google/material-design-lite
https: //github.com/google/material-design-lite/archive/master.zip

Posted in Material Design | Tagged | Comments Off on Introduction to Material Design Lite for Website
Powered By: wpnova.com