Pretty much the moment Google released their Material design guidelines, people started working on frameworks for it. However, the earliest examples were all dedicated to apps and app development. It took a while for someone to develop a Material-based framework for websites.
Enter Material Design Lite (or MDL), a simple Material-based CSS framework for the whole family. Now anyone can easily bring most common (and recognizable) aspects of Material Design to any website.
And now we have a question: is this a good thing?
I’m not going to get into a discussion about originality, or all websites looking the same. That ship has sailed. cough WordPress themes cough Bootstrap cough full-page headers cough.
Ahem.
What I mean is this: is Material Design Lite good at its job as a framework? Does it actually make building sites easier? How does it compare to other, bigger frameworks? Also, just how is its performance affected by the fact that you’re not supposed to customize it too much?
‘Cause that’s the thing. It was created to bring a very particular aesthetic and set of UX principles to any design. It’s not intended to help you build any kind of site that you want to build, just Material Design sites.
So let’s see how it works…
Features
On the whole, MDL is a bit less feature-filled than many of the more well-known frameworks out there. Mind you, those frameworks also tend to offer components that you’re more likely to find in an app than a content-driven site. MDL is all about the content-driven site.
The included styles reflect that. You’ve got your regular text styles, forms and inputs, lists, tables, and the like.
Other components include:
- Badges
- Buttons
- Cards
- Layout components (Header, footer, navigation, the grid)
- Loading
- Menus (Dropdown and flyout)
- Sliders
- Toggles
- Tooltips
Observations
JavaScript
One thing that you’ll notice is that a number of these components depend on JavaScript. Thankfully, none of them include the ‘essential’ components like the grid, cards, and so on, but it’s something to keep in mind.
Users with weird setups, or even just extremely privacy-conscious users, are never going to see that fancy menu that flies out of the ‘plus button’. If they have it on, though? Those tables are gonna get fancy.
Long classes
The good thing about long classes is that even if they aren’t particularly semantic, they are at least clear. On the other hand, prepare to make a snippet library, because typing out things like *mdl-layout__header–seamedmdl-layout__header–seamed* or *mdl-layout__header–scroll* is going to get tiring very quickly.
The grid
Speaking of long classes, this is what the code for a grid with three unequal columns looks like:
<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>
Yeah, that won’t get annoying. Also, the columns are called ‘cells’. I don’t get why they did that, but okay.
Conclusion
Yeah, this is exactly the framework that many designers (and art directors, probably) fear. It’s all about making sites in a very specific way, with very specific layout patterns. You want your own branding? You can add your logo, change the colors and fonts… or rewrite the whole thing.
It’s Google’s way, or the highway. If you like Google’s way, you’re in luck. If you don’t, this framework is just not going to work for you. Steal a couple of the better ideas, and move on.
And for the love of Berners-Lee, don’t call them “cells”.
