Diving Into Material Design Lite

Google recently released Material Design Lite (MDL), a front-end framework that incorporates Google's popular Material design, making it easy to add a Material design look and feel to your websites. Material Design is basically Google's web styleguide created by Google for use on in-house projects based off of the classic principles of good design. I started experimenting in my free time with MDL to see if and how we might be able to implement the framework in future projects.

Their site explains it as:

“MDL is built on the core technologies of the web you already know and use every day — CSS, HTML and JS. By adopting MDL into your projects, you gain access to an authoritative and highly curated implementation of material design for the web.”

“MDL makes it easy to add a material design look and feel to your websites. The “Lite” part of MDL comes from several key design goals: MDL has few dependencies, making it easy to install and use. It is framework-agnostic, meaning MDL can be used with any of the rapidly changing landscape of front-end tool chains."

My Findings

While experimenting with the framework, here are a few things I feel deserve some pointing out.

Pros:

• It’s super lightweight, as to be expected given its name, unlike Foundation or Bootstrap which are great but very robust and most of the time need a good stripping down of unnecessary components. MDL does a great job at providing a slimmed down option. It's basically two files.
• MDL uses flexbox and cutting edge front-end techniques that are becoming standard practices in front-end development.
• No worries about contributing to bore-ifying the web or all your projects looking the same, this framework is very easy to make your own. Get as creative as you want!
• Why recreate the wheel for every project? MDL is a great start for projects or prototypes.
• MDL offers a decent library of components to get you started or complete templates to build from if you really want to trim down development time. What’s really cool is Codepen supports the framework so the components can be tested or built there first.

Cons:

• MDL was written in SASS using the Block, Element, Modifier technique (BEM) so it’s components contain a lot of classes, not bad if you ask me, but some developers are not a fan of BEM.
• The use of flexbox requires you to use empty elements to align columns which can be a bit strange at first.
• Also, some complain the grid is not as advanced as other frameworks but it uses flexbox so the extra grid styles are not needed due to flexbox’s flexibility - no pun intended ;)

Can we find a place for MDL in our toolbox at Quadsimia?

Long story short - Yes!

Google’s recommended development practices are a good thing to install in your projects and MDL gives that to you with no hassles. Even if you didn't use the framework completely, it would be beneficial to understand how Google builds websites, just a word to the wise. Overall, using MDL would depend on the project but I would definitely make room for Google's Material Design Lite in your toolbox. For those that are interested, I have created an MDL starter kit that you can find on my GitHub account. Or I will be posting snippets soon on my Codepen. 

What are your thoughts on Material Design Lite and Google’s introduction into the world of front-end frameworks? Are you interested in a Material Design Look and feel for your digital product? Contact me at Quadsimia to find out more!