Top 5 Material Design Frameworks to Use in 2015

Originally published at: http://www.sitepoint.com/top-5-material-design-frameworks-use-2015/

Google's Material Design has taken the internet UI world by storm. Since it's implementation on Google's Inbox and then slowly on other websites of Google, a great deal of web applications like Telegram have started using Material Design. Material Design has introduced us to a simple yet meaningful philosophy of modern UI design.

Material Design is one of the most impressive design philosophies that we have seen and most of us want to implement this into our websites easily, so let us present before you five of the best material design frameworks to use in your project.

Angular Material

Angular Material is the implementation of material design in AngularJS.

The websites states:

Similar to the Polymer project's Paper elements collection, Angular Material is supported internally at Google by the Angular.js, Material Design UX and other product teams.

Materialize

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.

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

Material UI

Material UI is a CSS Framework and a Set of React Components that Implement Google's Material Design. Although this framework is quite robust, you might want to skip this one if you are not interested in working with Facebook's React.

You can access the repository of Material UI here.

MUI CSS Framework

MUI CSS Framework is a lightweight HTML, CSS and JS framework for sites that follow Google's Material Design guidelines. It also provides an easy bootstrap like solution for your front-end requirements.

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

Continue reading this article on SitePoint

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!

1 Like

Here’s another one that I started using a few days ago: “Material” from Daemonite - http://daemonite.github.io/material/

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 http://phpocean.com/blog/article/why-google-s-design-material/5.

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,

Braulio

1 Like

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.

1 Like

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.

3 Likes

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?