Playing around with Material Design Lite

They say “Don’t re-invent the wheel.” It’s pretty sound advice but you should probably know the different kinds of wheels you can choose from. And because it had been a while since I’d experimented with third-party libraries, I decided to mess around with Google’s Material Design Lite framework.

The Grid

The Material Design Lite (MDL) grid divides the container into:

• 12 columns for desktops,
• 8 columns for tablets,
• 4 columns for phones

Those familiar with Bootstrap will immediately see a departure: where Bootstrap 3 uses a 12-column grid across devices MDL has opted for different column counts.

But what really struck me was how MDL chooses to flow cells within grids:

Cells are laid out sequentially in a row, in the order they are defined, with some exceptions:

• If a cell doesn’t fit in the row in one of the screen sizes, it flows into the following line.
• If a cell has a specified column size equal to or larger than the number of columns for the current screen size, it takes up the entirety of its row.

It’s easier to understand visually. Here’s an example taken from MDL itself.

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--6-col">CS 6</div>
  <div class="mdl-cell mdl-cell--4-col">CS 4</div>
  <div class="mdl-cell mdl-cell--2-col">CS 2</div>
</div>

mdl-grid denotes the grid, mdl-cell the individual cells and mdl-cell--N-col controls how wide the cell will be (with N representing the number of columns the cell will span). So on a desktop (which MDL divides into 12 columns) the cells will line up nicely in a row.

On tablets where the grid has 8 columns, the second cell will wrap to the next line as described in the MDL document — If a cell doesn’t fit in the row in one of the screen sizes, it flows into the following line. The third cell will fit nicely in the second row.

On phones where the grid is now 4 columns, the third cell now wraps to the next row. You’ll notice that our first cell which we specified to span 6 columns and technically is “longer” than the available grid simply flows to fill the entire horizontal space.

However, that third cell kinda looks weird with that empty space next to it. Similar to Bootstrap, MDL allows you to specify the column span on a per-device basis.

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--6-col">CS 6</div>
  <div class="mdl-cell mdl-cell--4-col">CS 4</div>
  <div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-phone">CS 2</div>
</div>

Here we added the class mdl-cell--4-col-phone to the third cell. And now it spans the entire width in phones.

So far the devices available are “desktop”, “tablet” and “phone”.

The “Footer”

Unlike Bootstrap, MDL has a “footer” component. I use the “ ” quotes because the component doesn’t have to be a footer and even the MDL documentation admits it may be placed at any appropriate location on a device screen.

What I find stranger still is that the MDL documentation suggests using the <footer> element to mark-up the component. I don’t know if the MDL details are going to change but this seems like a good candidate for a review.

There are 2 types of footers, the Mini footer and the Mega footer which is the one I want to focus on. Although the name may sound foreign I’m pretty sure you’ve seen these types of footers before:

Familiar stuff, right? Well MDL turns this into a nice little dropdrown menu in narrower screens.

Yeah I gotta admit, that is pretty nifty. But you can probably see why this functionality does not technically have to be limited to the footer.

More than that, I don’t think there is a way to control the way the elements flow, not even with the MDL grid system. Just by resizing the viewport I was able to get this:

Huh.

Conclusion

 

Obviously I only touched the surface of what MDL offers. I also read through the documentation for Navigation but than the Drawer navigation there doesn’t seem to be anything worth mentioning.