Front End Frameworks Based on Google’s Material Design

Front End Frameworks Based on Google’s Material Design

In recent years we’ve seen Google has taken design very seriously. I personally think their competition with Apple in the tablet/smartphone war (Android vs iOS) forced them to take their design/visual up a few levels.

Google is not only polishing the interface on their mobile OS platform, but streamlining most of their wonderful and indispensable web applications with a unified look and style. Material Design is the latest design/visual language developed by Google and announced at the Google I/O conference in June 2014. As with latest UI design philosophy, Google went with flat look and focused on the details. While the direction is open for personal’s opinions, in overall I think Google has done a remarkable job.

If you love Material Design, there is no reason why you should not try to use it as the DNA of your next project. Luckily a bunch of talented people took very little time to make things easier for their fellow designers and developers to be able to take make use the framework to their site’s design.

Materialize

Materialize

This one goes on the top of my list because it feels like most polished and actively developed. The framework homepage shows a clear example how you can create nice look on your websites using their components.

Bootstrap Material

Material Design for Bootstrap

If you are already in love with Bootstrap and do not want to fool around with another framework, there is a solution for that too through this project by applying Material Design as a Bootstrap theme. Note that as the time of writing, this theme is not ready for production.

Material UI

Material UI

Last but not least, if you use React for your JavaScript library, this framework is definitely for you.


There you go. Hopefully the list is useful for you. If you know other front-end frameworks that are based on Material Design, please share them by replying to this post. I would love to check and possibly add them here.

Leave a Reply