Material Design_44

Here Are Some Material Design-Like Web UI Frameworks

February 28, 2015 - Written By Kristijan Lucic

Along with Android 5.0 Lollipop, Google has announced a new design language, called Material Design. This new way of doing design brings a lot of animations to the table, skeuomorphic animations if you will, which is completely different than what Google has been aiming at thus far. Google wants to make all their services somewhat similar by pushing Material Design scheme, web included. Google calls bringing Material Design to their web services the “Polymer Project”. The Polymer Project is still in early developer preview though and it’s still not ready for a release. Anyhow, a lot of non-Google third party web UI frameworks have already kind of made Material Design a reality. You’ll find some of these themes listed down below, and some of them are based on Bootstrap, a rather popular web UI framework. You can access additional information about each of these frameworks by clicking on links listed in the description for every one of them. Anyhow, let’s get started.

1. Polymer Project

Polymer ProjectPolymer Project is web framework which is still in a developer preview status, so keep that in mind. It has tons of components though, despite its status. Polymer Project wants to support all major browsers around, including Chrome, Safari, Firefox and Internet Explorer (10+). You’ll find a lot of information about the framework here, including a get started guide, here. Speaking of the Polymer Project, here are some example demo web links for you to check out: Topeka, Paper Elements and Calculator.

2. Material UI

Material UI framework

Material UI is another material design framework, this is basically a CSS framework plus a Set of React Components  which implement Google’s design in form of a theme. This UI has support for Buttons, Icon Buttons, Inputs, Switches, Dropdown Menu, Dialog, Switches, Toolbar, etc. If you’d like to know more about this UI, click here, you’ll find all the info you need there, plus a link to GitHub, where this UI is also available.

3. Materialize

Materialize framework

This is a modern-looking front-end framework which is based on Material Design, which is kind of easy to see once you take a look. This framework gives you both CSS and the source SCSS files. JavaScript, material design icons and Roboto font are also included here. Grids, forms, buttons, navbar and cards are included here. If you’re interested in this framework visit this link where you’ll find more information about the UI itself, along with a chat room if you have any questions.

4. Paper Bootswatch for Bootstrap

Paper bootstrap frameworkPaper is a bit different, this is a bootswatch theme for the Bootstrap framework. This basically comes with all the components that Bootstrap lets you use, but it also has something added to it, the Material design skin. Click here to visit the bootswatch paper webpage and get all the necessary details there. The theme is nice and clean.

5. Bootstrap Material

Bootstrap material framework

Much like Paper, This is yet another Bootstrap framework which offers everything Bootstrap has to offer. This theme has support for 740 original Material design icons that you’ll find in Google Material Design Icons repository, which can come in great if you’re looking to use some specific icons, of course. If you’d like more details regarding Bootstrap Material, follow this link.

6. Leaf BETA

Leaf beta framework

Leaf BETA is a CSS framework based on Google’s material design language, keep in mind that this framework is still in beta though. Despite its beta status, it offers a ton of component to choose from, from cards and slider to buttons and tabs. Icons by Icomoon are also included here, and they replace the original Material Design icons. Visit this link in order to get more details, or go straight to GitHub.