Material Design, the new design language that Google introduced during the Google I/O 2014, has drawn a lot of attentions recently, especially in the world of Web UI Development.

If you do not know Material Design, you can check this brief video:

Also check the main introduction page of Material Design for its Goals and Principles.

The post from Kanishk Kunal7 Material Design Web UI Frameworks – provides a very detailed list of existing Material Design Frameworks for the Web, such as

In this post, I want to share my personal experiences about using some ones.

Polymer Project

Polymer Project

Polymer is the web framework from Google, aiming to provide the “preview” for doing modern web development by leveraging HTML5 Web Components . Its new element set – Paper elements was announced during Google I/O 2014 as the first live demo to explain Material Design concept.

Polymer Paper Elements

The Paper Elements package only provides the basic web UI elements, which means at the most of time, you will need to create your own custom elements from scratch, such as datepicker, navibar.

And also, doing styling on Polymer elements is a little bit different than the normal ways (see the document – A Guide to Styling Elements for more details).

Although Polymer provides the element core-header-panel to help build the header, it is more designed for mobile view, without much flexibility for normal web view.

Material UI

Material UI CSS Framework

Material UI is a CSS Framework and a Set of React Components that implement Google’s Material Design. It is a perfect framework for people who are also chasing ReactJS for next generation of web development.

The framework provides many elements (components), not only for basic parts, but also for some complicated but useful ones like Toolbar, Date Picker.

Check its Demo for more info about components.

You can find it on Github.

Angular Material Design

AngularJS

Angular Material Design is an implementation of Material Design in Angular.js. Similar to Material UI, this is also a framework that integrate Material Design concept with modern web development framework.

It provids a set of reusable, well-tested, and accessible UI components based on the Material Design system. Basides the basic components (directives), it also has some useful components, such as Card, Grid List, Font Icon, Progress Circular, Tooltip.

It also provides a detailed tutorial about how to customize the elements.

Lumx

Lumx Framework

lumx is another responsive front-end framework based on AngularJS & Google Material Design specifications. It is built with SASS as well as JQuery.

About components (directives), it also provide Date Picker. Besides components, it also provides two useful services: Notifications, Progress.

Materialize

Materialize CSS Framework

Materialize is a modern responsive front-end framework based on Material Design.

Besides basic components, it also provides some very useful components, such as Cards, Pagination, Preloader. It also provides several out-of-box javascript widgets that you can easily utilize (see here for details).

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>