Learning Material Design Lite: The Grid

Recently we had a look at Google’s new front-end development framework, Material Design Lite (MDL). We discovered that MDL comes with a handful of UI components to build websites using the Material Design guidelines and principles.

In this series, we are going to examine individual MDL components in slightly more detail, starting with the Grid system which forms the basis of any front-end framework. Let’s begin!

Getting Started

Before we are able to use the Grid, or any other components in MDL, we first need to deploy the MDL libraries—the stylesheets and the JavaScript. There are a number of ways we can do this, but arguably the most straightforward is by linking to the hosted files in Google CDN. And these files include:

Material Design font icon stylesheet
Roboto, which is the Material Design standard font
The main stylesheet
The JavaScript file

<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,500,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//storage.googleapis.com/code.getmdl.io/1.0.1/material.teal-red.min.css" />
<script src="//storage.googleapis.com/code.getmdl.io/1.0.1/material.min.js"></script>

Color Schemes

Once we’ve added them, we can start building the UI with colors as per defined in the main stylesheet name. The main stylesheet is named according to the following convention: material.{primary}-{accent}.min.css. Our primary color here is teal while red is the accent color. These colors are applied to components like the navigation and the buttons, but they won’t influence the Grid unless we add special classes like .mdl-color--primary and .mdl-color--accent.

You can change the color combination to whatever you prefer by referring to the Material Design color specification, for example: material.purple-pink.min.css,material.blue_grey-pink.min.css, and material.blue-orange.min.css.

However, if you find specifying the color combination within the css file unintuitive, you can always use the Customize tool instead. Select whichever colors you need, then, replace the main stylesheet link with one generated through the tool.

Material Design color wheel — Copy the stylesheet

Building the Grid

The Grid, along with the Navigation and the Footer in MDL, is part of the Layout component. The Grid in MDL is built using Flexbox which makes it more versatile than traditional frameworks which still rely on floats. The Grid comprises columns; twelve columns for “desktop size”, eight columns for “tablet” sized (800px and below), and four columns for “phone” size viewports (below 500px).

We start a grid with an empty div. Then add an mdl-grid class, and optionally a custom class to override or define customized styles for the grid later on:

<div class="content-grid mdl-grid">
<!-- grid here -->
</div>

Think of mdl-grid as an equivalent of the row or container class if you are coming from Bootstrap. But, instead of being predefined, MDL leaves the width entirely up to us. Thus, in your stylesheet, you may need to specify the max-width of the grid to your requirement:

.content-grid {
  max-width: 960px;
}

The Columns

To build the columns, add one or more div elements (or whichever elements suit your needs) with a class of mdl-cell within the mdl-grid.

<div class="content-grid mdl-grid">
  <div class="mdl-cell">
    <!-- add content here -->
  </div>
  <div class="mdl-cell">
    <!-- also here -->
  </div>
  <div class="mdl-cell">
    <!-- and probably also here -->
  </div>
</div>

At this point, we have effectively made a grid. We have added three columns. Each column is aligned properly and set to an equal width for 33.3333333333%. MDL assumes that we would, in general, add three columns within a row.

To override the default column size, we need to add an mdl-cell--{number}-col class with the number range from 1 to 12. Add the class for each div:

Tip: This class is a BEM namespace for a Modifier. For more details refer to our previous post An Introduction to the BEM Methodology where Josh Medeski has covered BEM ins and outs.

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--6-col">
    <!-- add content here -->
  </div>
  <div class="mdl-cell mdl-cell--3-col">
    <!-- also here -->
  </div>
  <div class="mdl-cell mdl-cell--3-col">
    <!-- and probably also here -->
  </div>
</div>

The first column should now be larger.

MDL tries to fit in the columns within the available viewport by resizing the columns in a logical manner. As you shrink down to tablet and mobile (go ahead, click the icons), you will find that the first column remains bigger. The last two columns are now stacked at the bottom, still they are smaller by half of the first column.

“Tablet” and “Mobile” Viewports

Often, we might need to have control over the column sizes for when they are viewed in a specific viewport size. As mentioned earlier, MDL takes 8 columns at the tablet size, and 4 columns at the mobile size viewport. The columns should add up to a maximum of 8 and 4 respectively when targeting tablet and mobile.

<div class="content-grid mdl-grid">
  <div class="mdl-cell mdl-cell--6-col mdl-cell--2-col-tablet mdl-cell--2-col-phone">
    <!-- add content here -->
  </div>
  <div class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet mdl-cell--2-col-phone">
    <!-- also here -->
  </div>
  <div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-tablet mdl-cell--4-col-phone">
    <!-- and probably also here -->
  </div>
</div>

Given the above example: the first column should now be larger than the first in desktop. The second column will be larger when viewed in tablet. On a mobile phone, the first two columns will be displayed side-by-side equally while the last column will span the parent’s width.

Utility Classes

MDL also equips the Grid with a number of utility classes or modifier classes. These include a set of classes to hide columns at certain viewport sizes:

mdl-cell--hide-desktop; hides the column in desktop-size viewport size (> 840px)
mdl-cell--hide-tablet; hides the column in tablet-size viewport size (> 480px)
mdl-cell--hide-phone; hides the column in the mobile-size viewport size (< 480px)

Another set to align the column:

mdl-cell--stretch; stretches the column to fill the parent element, in this case, mdl-grid.
mdl-cell--top; aligns the column to the top of the parent.
mdl-cell--bottom; aligns the column to the bottom or the parent.

These classes are all optional, but are there in case you need them. Add either one or two of them to the div column, for example:

<div class="content-grid mdl-grid">
  <div class="content-column mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-cell--top">
    <!-- add content here -->
  </div>
  <div class="content-column mdl-cell mdl-cell--4-col mdl-cell--4-col-phone mdl-cell--hide-tablet">
    <!-- also here -->
  </div>
  <div class="content-column mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-cell--bottom mdl-cell--hide-phone">
    <!-- and probably also here -->
  </div>
</div>

This example aligns the third column to the bottom of the row for desktops, hides the second column on tablets, while on mobile the third column is hidden. Give it a go:

Wrapping Up

The MDL Grid is thoughtfully built. Given that it uses Flexbox instead of floats, it is easier to align, order and resize the columns without worrying about breaking the layout or affecting the neighboring elements.

Though not required, I encourage you to get used to the CSS calc() function as well as the BEM methodology—the structure that MDL uses to name the classes. This will help you get your grid customization inline with the MDL pre-built structures.

In the next tutorial, we’ll take a look at another MDL component. Stay tuned!