Official CSS / JS / HTML component "Material Design Lite" that can create a website using Google's material design

Google is using the mobile OS "Android 5.0 Lollipop"And adopted by other products and services of the company"Material Design(Material design) "is UX designed with conscious not only looks but also usability. CSS / Javascript / HTML component that can create website using the material design "Material Design Lite"Published by Google.

Material Design Lite
http://www.getmdl.io/

Introducing Material Design Lite - Google Developers - Medium
https://medium.com/google-developers/introducing-material-design-lite-3ce67098c031

Material Design Lite is a tool kit containing material design style CSS / Javascript / HTML templates and components proposed by Google. To download Material Design Lite,Official siteAnd click "Download" at the right end of the screen.


Select "DOWNLOAD" and click "DOWNLOAD MDL V 1.0.0".


Click "Save file" to start downloading.


Incidentally, included in the downloaded ZIP file were JS file, CSS file, JSON file, etc.


Also, we have put together all the templates of the website that can be created using Material Design Lite because it is open to the public. Templates are published on GitHub, and you can use them as they are or analyze the contents of the source.

◆ Blog
This is a blog template made using Material Design Lite. Blog entries are arranged like cards.


The source of "blog" template can be confirmed from the following.

Material-design-lite / templates / blog at master · google / material-design-lite · GitHub
https://github.com/google/material-design-lite/tree/master/templates/blog


◆ Android official website
The template of Android official website is kore.


Scroll down the page to change the content design.


Cards with images are lined at the bottom of the page.


The template of "Android official website" is published on the following page.

Material-design-lite / templates / android-dot-com at master · google / material-design-lite
https://github.com/google/material-design-lite/tree/master/templates/android-dot-com


◆ Dashboard
Template of dashboard which arranged data and information simply. The menu bar is gathered to the left, it is a refreshing design.


The source of the "Dashboard" template can be checked from the GitHub page.

Material-design-lite / templates / dashboard at master · google / material-design-lite
https://github.com/google/material-design-lite/tree/master/templates/dashboard


◆ Text Only
Here is a text-only page template that does not use images for content.


The source of the template of the above page can be checked from the following URL.

Material-design-lite / templates / text-only at master · google / material-design-lite
https://github.com/google/material-design-lite/tree/master/templates/text-only


◆ Article
Template of a page that shows only articles, removing useless content and buttons. It is a simple page that only places text except it can search from the magnifying glass icon on the top right of the page.


You can check the source of the template that focused on the content only for the article from the following.

Material-design-lite / templates / article at master · google / material-design-lite
https://github.com/google/material-design-lite/tree/master/templates/article


Also, the system font adopted from Android 4.0 "RobotoIt is open to the public and can be freely downloaded. If used in conjunction with Material Design Lite, you should be able to build an Android-like website.


Material Design Lite
http://www.getmdl.io/styles/index.html

To download Roboto Please open the above URL and click "Download Roboto Font 1.21MB (.zip)".


Click "OK" to start downloading.


There are 18 font files in the downloaded ZIP file, and you can use it by uploading it on your site and describing CSS. Alternatively, "Google FontsYou can also display it using.