By know you’ve probably been accustomed to Google’s material design. It is used rigorously in Google’s own products, its visual design impact can be seen in products outside of the Google ecosystem. More and more web designers have adopted the core design principles of material design and front-end developers have started following suit to accommodate this step in web design evolution.

What is Material Design Lite?

Material Design Lite (MDL) refers to a front-end library designed to allow developers to easily implement material design’s look and feel for a websites. It does not rely on any JavaScript frameworks and is optimized to run smoothly across multiple devices. This is done by reducing the full animation support for motion transitions that is commonly seen in standard material design. By doing so, websites can be rolled out quicker with little complications.

Setting Up Material Design Lite

Include the master CSS & JavaScript

The first thing you want to do is to include MDL’s CSS and JavaScript files to your website. Make sure these files load on every HTML page in your project. There are a few methods to doing this but we’re only going to feature the two most common types, Hosted and Download.

1) Hosted

The recommended method. You can do this by adding the following <link> and <script> elements into your HTML pages. These sources are from Google’s very own CDN so it is safe to use.

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.2.0/material.min.js"></script>

2) Download

The second method is to download (27kB gzipped) the minified CSS and Javascript files. Then just insert the <link> and <script> elements as usual. This gives you the option to modify the files as needed.

<link rel="stylesheet" href="./material.min.css">
<script src="./material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Choose color scheme

Just like the full version of Material Design, color schemes can be selected to fit the visual design of your website. These color schemes are based around a primary and accent colors. Using the following pattern, you can adjust these colors in the CSS file name.

material.{primary}-{accent}.min.css (e.g. material.indigo-pink.min.css).

A number of color combinations are hosted on Google’s own CDN. By using the Customize and Preview tool, you can discover and preview available color combinations.

Components

Once completed, you can begin to use pre-built components for your website. It’s really just that simple. Google has constructed a large variety of common components that can be used for just about any type of website, personal or business. All you need to do is add some styling and modifications and you’re pretty much set. To see a list of these components, check them out at Google’s Material Design Lite component page.

Material Design Lite is very simple to setup and can be used to create great websites with visuals that are consistent with other modern day websites. Are you a fan of Material Design? Let us know by dropping a comment down below.