First try: Material Design Lite

So, the other day I was googling about Bootstrap 4 news and I stumbled upon Material Design Lite. It is basically the simplified version of Material Design built for the web. And somehow, I totally missed out the release of the framework last year. Then, I continued my research on it and found out that MDL (abbreviation for Material Design Lite) is a pretty robust front-end framwork that takes advantage of most of those cool physics elements found in Material Design. You can read more about Material Design in an article I wrote a while back here

There wasn’t much news about the final release of Bootstrap 4 and I was curious about MDL, so I decided to play around with the framework. I have been huge fan of Google’s Material Design since it was announced back in Google I/O 2014 and previously it only existed on mobile applications and also Google’s high end Project Polymer. Never actually made anything with Material Design before but I am well aware of the guidelines that Google set with each element.

After a couple of trial an errors, my first MDL design is now live! Check it out at testorange0106.dickwyn.xyz. It’s not the most content heavy design but I did manage to include most of the elements that showcase MDL.

I learned Bootstrap back in 2014 through Microsoft Virtual Academy (Christopher Harrison is like the best that MVA has to offer) and since then, I have used it quite a number of times. The latest being my attempt at building Sunway’s ADTP microsite which you can check out here. It’s easy to see why a lot of people love Bootstrap, the syntax is simple and there are a lots of templates and guides on how you can get started with the framework. MDL in the other hand is fairly new and Google definitely took some inspiration from bootstrap and MDL is actually very similar to Bootstrap in a lot of ways.

Well, just so happens, Google Developers just recently (yesterday) released a video regarding MDL which perfectly aligns with the release of this article regarding.

Within MDL, there is a grid system that works exactly like how it does on Bootstrap but the syntax is a little long winded in my opinion. The concept of 12 virtual boxes still exist but the syntax used is slightly different.

It actually took me a while to fully understand the syntax despite looking through the documentation extensively. But after a while, I did come to understand how the grid on MDL actually works. Unlike Bootstrap, MDL is designed to reflow from edge to edge. MDL is built to be responsive but it is a different kind of responsive compared to the responsive approach of bootstrap which centers the content with white space on both sides.

If I wanted to replicate Bootstrap’s layout through MDL, I would need to add a css script to apply padding on both sides of the outer <div> tag. And that is how I ended up with my first MDL design (pictured below). I was completely unaware about how the grid system worked and I actually made that table centred by wrapping the <center> tag around it

Screenshot (635)

Initially, I thought of typing out the class names to learn the syntax quicker but that turned out to be a complete disaster because MDL’s syntax is very confusing for a newcomer like me. The syntax itself compromises of simple words that clearly describes the class name but Google just had to use double dashes and double underscores (notice these in the first two <div> tags at the code snipped below) to make it hard to remember.

Since this is a fairly new framework, there isn’t a code snippet extension on Brackets, my HTML editor of choice. After making multiple typos (kept on mistyping mdl as mld) that made the layout go crazy, I decided to scrap my idea of starting the entire design from scratch. I decided to import one of Google’s sample templates and modify the hell out of it.

2016-06-04

Things became a little bit easier when I began modifying an existing template and it took me a couple of hours to over two days to come up with the final design. Most of the time spent was mostly used on thinking what could I possibly put to showcase the Material Design elements.

I would have liked to put videos into the layout but I don’t think the MDL grid will be able to resize the video based on the screen size so I left that one out.

Screenshot (633)

Conclusion

My initial idea for trying out MDL was to combine the Bootstrap layout with MDL elements but I didn’t end up doing that because I found out that MDL itself is a standalone framework rather than being a complementing library. I’ll probably try that out in the future if I have time but MDL is somewhat of a letdown for me.

Unlike Bootstrap, Google built MDL with strict guidelines that need to be followed in order for things to look good. If I were to change the look of one element, everything else must also be changed in order for the design to look the part. Maybe I need to do a coupe of case studies regarding Material Design before trying MDL once again.

But as is, I am not too impressed with what I am seeing. Beyond the fancy animations that work nicely on the web, MDL is just too restricted for me. I can see it being useful for prototyping app UIs since it does include things like tabs and sidebars but for web designs, I would still prefer to stick with Bootstrap. Now it’s time to continue waiting for Boostrap 4 to come out.

Check out my final design here

final

Advertisements

Drop some words

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s