ProgrammingJavascriptCareerProductivityGadgetsASP.NETWeb Design

Trying Out: Google's Material Design Lite

Written by
Published on
Modified on
Filed under
Trying Out: Google's Material Design Lite

Google just unveiled Material Design Lite out into the wild for all to use, and so I'm going to be trying it out on a few of my websites this week. Google's material design principles are the design rules that bring simplicity, cleanliness, and overall ease on some of Google's sites. They make for responsive and future proof layouts that degrade gracefully. MDL doesn't rely on any third party JavaScript frameworks, but the components are created with vanilla CSS, JavaScript and HTML. It definitely offers enough features to build entire websites from scratch. It includes templates, basic components, more complex components, icon sets and more. And for someone like me, who spends more time programming and not enough time designing, this is definitely a big help.

This library is definitely meant to be used on its own. Including it in a website with Bootstrap for example can cause unexpected results, as both frameworks will treat elements differently. Once you download and reference the necessary files though, you are free to add the MDL CSS classes to their corresponding HTML elements and create your own clean and Material Design looks. I'm going to try and recreate my home page using MDL and see how that goes, stay tuned for that.

Getting started with MDL

The first thing you'll want to do is to include the MDL CSS and JavaScript files into your project. Google recommends using the files hosted on their CDN, which can be found here:


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

If using the CDN isn't your cup of tea though, you can also customize and download the files yourself or you can use npn or Bower to install the package. Whichever method you prefer you'll end up referencing a style sheet and a JavaScript file.

You'll also want to download the full set of MDL icons, which again you can download in full from here. The full icon set runs about 68MB and contains thousands of files, made up of different icons in different sizes.

Pick your color scheme

With MDL you have the option of selecting your own color scheme, which is based on the Material Design's use of primary and accent colors. By default there is an indigo and pink combination set, but the color wheel above can help you choose your own combination. This color combination actually just gives you the URL of the matching CSS file, because the MDL CSS file name is based on these two color combinations.


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

Components

The MDL offers tons of redesigned components ranging from your standard buttons and checkboxes to sliders, tables and menus. It also offers more complex components such as Cards and Badges that you can work with. You can view all available components here, but first I'll run through a few.

Here are a few standard components with an orange red color scheme that I have chosen.

To create the components, you just include the necessary MDL CSS class names.


<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect">
  Button
</button>

Cards

You can think of Cards as self-contained pieces of paper with data in them.

You see Cards all over Google's many properties such as on Android Wear and Google Now. They are great ways of showcasing related data in one location. Once you learn the class names of each of the corresponding elements in the Card, making changes and customizing them is as simple as can be. Here's the source for the sample card above.


<div class="mdl-card mdl-shadow--2dp demo-card-wide">
  <div class="mdl-card__title">
    <h2 class="mdl-card__title-text">Welcome</h2>
  </div>
  <div class="mdl-card__supporting-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Mauris sagittis pellentesque lacus eleifend lacinia...
  </div>
  <div class="mdl-card__actions mdl-card--border">
    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
      Get Started
    </a>
  </div>
  <div class="mdl-card__menu">
    <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
      <i class="material-icons">share</i>
    </button>
  </div>
</div>

Templates

Google was kind enough to provide a few basic templates that incorporate MDL so that you can get started using it right away.

This template is designed for blogs. It's a clean layout with a focus on images and photography. It uses Cards as each posts foundation and is fully responsive.

This is an MDL version of the Android.com website. It includes a carousel and long form scrolling. Definitely looks very nice and I will be using it on an upcoming project really soon.

There are a few more templates that you can check out right here that each offer their own features and they're perfect for starting a brand new project since they come fully loaded right out of the package.

Dynamic controls

Just a quick note. In general, Material Design Lite will render all elements with MDL specific classes on page load. But if you're loading controls dynamically in JavaScript, you will have to take one extra step and that is to register the element using the upgradeElement function.


<div id="container"/>
<script>
  var button = document.createElement('button');
  var textNode = document.createTextNode('Click Me!');
  button.appendChild(textNode);
  button.className = 'mdl-button mdl-js-button mdl-js-ripple-effect';
  componentHandler.upgradeElement(button, 'MaterialButton');
  document.getElementById('container').appendChild(button);
</script>

Material Design Icons

Material Design Icons are the official icons in the Google MD specification. And best of all, they're free to use for whatever projects you have. You just can't re-sell the icons. Fair enough. You can download the full set from right here and it runs about 68MB once unzipped. There are lots and lots of files in this one. I counted about 19,000, so unzipping the directory took a while on my machine. The icons come in a variety of resolutions, each in their own respective directory.

There's alot more to cover in terms of Material Design and hopefully this just gives an idea of how MDL gives many of those benefits with a few well placed classes. So download the library and start getting familiar with the many components that it has to offer.

Walter Guevara is a software engineer, startup founder and currently teaches programming for a coding bootcamp. He is currently building things that don't yet exist.

Comments

No messages posted yet

Developer Poll

Q:

Stay up to date

Sign up for my FREE newsletter. Get informed of the latest happenings in the programming world.

Add a comment

Keep me up to date on the latest programming news
Add Comment

Stay up to date

Get informed of the latest happenings in the programming world.

No thanks