Design & UX

Top 5 Material Design Frameworks to Use in 2015

By Tanay Pant

Google's Material Design has taken the internet UI world by storm. Since it's arrival on Google's Inbox and then progressive across Google’s network sites, many web applications like Telegram have begun deploying the framework. Material Design has introduced us to a simple yet meaningful philosophy of modern UI design.

Google's Material Design

Material Design is one of the most comprehensive and polished design philosophies that we have seen in recent years and I suspect many of us will want to implement it in the coming year. So, let’s look at what I think are five of the best material design-based frameworks to use in your project.

Angular Material

Angular Material seems to be the big brother of all the material design frameworks that are available today because of Angular’s popularity and the fact that it’s supported internally at Google.


The documentation, demos and the API reference is well written and comprehensive and portrays all the features that were specified by Google in it’s material design philosophy.


Materialize is a responsive front-end design framework based on Material Design that you can use in your application just like Bootstrap. This is undoubtedly one of the most impressive Material Design frameworks. It provides both CSS and SCSS files along with JavaScript, material design icons and Roboto font.

You can use this framework just like Bootstrap by importing the CSS and you are good to go.


The project is open-source and the source code of the project is available on Github.

Material UI

Material UI is a CSS Framework that makes use of React components to implement the material design philosophy. Although this framework is quite robust, you might want to skip it if you are not 100% comfortable working with Facebook’s React. Some newbies to React find it’s JSX (Javascript and XML) syntax quite unconventional.

The repository of this framework has good documentation on how to set up this framework and install React using npm (Node Package Manager). You can access the repository of Material UI here.

Material UI

MUI CSS Framework

MUI CSS Framework is a lightweight framework for sites and provides an easy ‘bootstrap-like’ solution for your front-end requirements. Since it is designed from ground-up, it is slightly faster than some of it’s competitors and it’s recommended to use in small projects, where the main focus is not the precise implementation of material design.

MUI CSS Framework

Interested in contributing code to the project? You can find it's repository here.


Google’s Polymer Project which advocates the use of web-components for web development, has also released their own take on Material Design.


The Polymer core elements set includes several elements for application layout, including creating toolbars, app bars, tabs, and side nav consistent with the material design guidelines.

The Verdict

So, perhaps you are considering implementing a Material Design UI in your next project? If so, I would advise that you start with the Materialize as this framework works just like Bootstrap with the elements accessible through CSS classes.

Maybe you've used Angular and have enjoyed working with Angular's Animation function? If so, then your best bet may be Angular Material, since it is very full-featured and backed by Google’s very considerable resources.

Material Design appears to have a very promising future in the UI design world. It is very well-researched and polished and we’re seeing more and more websites have begun integrating Material Design based frameworks each month.

So, are we looking at a long term design direction or is this a more fickle fashion trend? Personally I think there's every chance we may face a Material-Design-saturated future, just as we have a Bootstrap-saturated Internet right now.

What are your thoughts on the above mentioned frameworks? What material design frameworks have you used?


So, I did a talk on Material Design at the Nashville UX meetup group last month. I cover some of these frameworks.
You guys should check it out!


Here's another one that I started using a few days ago: "Material" from Daemonite -

The problem with this framework is that it has no documentation :/, so you're left with DevTooling (did I just make a verb out DevTools? lol) with F12 all the time.

So I might be switching to Materialize since it's documentation is so good.


Nice post. Thanks for bringing up all these frameworks together. I wrote an article sometimes ago concerning Google Material Design. For those who are descovering the Material Design, you can check it out


Thanks. Will watch the video.

Have you reviewed the Foundation Zurb material design framework?

I have been using the Foundation Zurb responsive design framework for about 2 years and I have to decide whether i will use their material design framework with their responsive design framework or use a different third party material design framework with their responsive design framework.

Does anyone see an issue with using Foundation Zurb with Materialize ?

Thanks in advance,



Also an avid foundation user. Trying to not get overwhelmed with frameworks! Somebody reply to this thread if you know anything about comparing the two.


Thanks for featuring the list of 2015 web design trends.. I bookmarked it!!


When you say "comparing the two" I think you're missing out a bit.

Framework shouldn't dictate Style. It should just facilitate rolling out your app quickly.

As its name implies, Foundation is a base to get you started.

It's (arguably) less opinionated than Bootstrap.

You should be able to apply the Material principles to Foundation (or just about any framework) with the right homework.


I will use Materialize with Foundation on next project and update the group on this post.


Sorry I was a bit unclear. I'm mainly referring to comparing Angular Material Framework vs Foundation CSS Framework. Both are flexbox frameworks. And both have CSS elements you can use (or not, as you suggested).

I just get confused when I think about the different options for making a site. I wish there was just a one catch-all framework


What? CSS flexbox...?


Nice share man. Havent heard of it until now smile


All of them beside Materialize have missing components, and they can't be used in application with a lot of futures. Ex. Only Materialize have avatar list. But Materialize is ONLY good looking, and will pass only in static sites. I tried it with React to make app, but select/dropdown options are inaccessible, and you can't use their plugin to retrieve data from them. That is a really shame.


what about fixes in IE , does not work well there ?


You should include Bootstrap. Bootswatch has a Paper theme that implements many Material Design elements. Bootstrap doesn't use flexbox though.


I like Material Design for Bootstrap because it is a theme for Bootstrap 3 that lets you use Material Design concepts on the front-end.


I'm not keen with the latest design frameworks so this was a really refreshing post to read. Thanks!


I'm currently using materialize, but i'm looking for css framework more default animated controls. where i could just use only HTML without angular or React.
Does anyone has anything better?



Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in Design, once a week, for free.