28 Sep

A Comparison of Material Design Frameworks

Responsive design and material design are hot topics in front-end development and User Interface design. In 2011 Blueprint, the first CSS framework came out and revolutionized the way websites were built. Less than five years since the redesign framework - blueprint logolease of Blueprint there has been an explosion in the number of front end frameworks for developers to choose from. Frameworks now need to be innovative and keep up with the latest design standards. They also have to utilize different stacks of technologies in order to differentiate from their competitors. In this modern world that is full of choices we now need to look closer at our options, sift through the clutter and decide what the right framework is for our situation.

When deciding what framework is best for a particular project we need to first take into account why we are using a framework to start with. In our case we are using a framework to save time, unify our design elements and optimize our project scope by cutting out the task of repeatedly writing large amounts of custom code. In order to find the best framework to effectively achieve these goals we have come up with the following list of criteria to analyze.

 

  • Maturity of the library
  • Other technologies used by the framework
  • Ease of implementation
  • Design features
  • Size of the framework after minimizing 

 

We mentioned earlier that there are quite a few frameworks in circulation for us to choose from, talking about all of them in one blog post would be confusing and less effective. As a team of developers that often works with Angular.js we decided that the framework would need to either already implement Angular in its stack of technologies used, or play well with it. Secondly, we considered strength of design, so using Google’s new Material design is a requirement as well. Lastly we looked to see what the most popular frameworks being used by our fellow developers are and took into account their reviews. Our conclusion was to look into Angular Material, LumX,  and Materialize. The following is a breakdown of what our research found.

 

Maturity of the Library

The maturity of the library refers to the size of the community supporting the framework and how long it has been around. The Internet is a quickly evolving place and over time things become outdated if they aren’t constantly updated. We need to be sure that our framework will have people maintaining it in the future.

 

Angular Material
Angulardesign framework - angular material logo Material was first released on Github in 2014 under the MIT license . Since then the framework has had 66 updated releases coming from its 176 Github contributors. The documentation includes a website with Demos, API references and version release notes. Although in alpha, there is a version of this UI framework for the newest version of Angular, Angular2. There is still the need to port some more components, but you can keep up on progress here. Angular Material is also supported internally at Google rounding off support making it a mature and well supported.

 

LumX
design framework - lumx logoLumX was first released on Github in 2014 under the MIT license . Since then it has had 162 updated releases coming from its 13 Github contributors. The framework also has additional resources provided by a website that includes help with setting up, code demos and information on how to contribute.

 

Materialize
design framework - materialize logoMaterialize was first released on Github in January of 2015 making it the newest of the frameworks that we are reviewing. It was originally developed by four graduates from Carnegie Mellon University. Materialize like LumX and Angular Material is also under the MIT license. Over the last year since release it has had 24 updated releases coming from its 126 Github contributors.  There is also a website for the framework providing additional resources very similar to Angular Material’s. The website features code demos, documentation on getting started and a live chat where you can interact with other developers who are currently using Materialize.

 

Other technologies used by the framework

This is where we take a look at any CSS preprocessors, fonts, icon libraries, or other frameworks that are used. Using other technologies can strengthen a frameworks effectiveness and design. Additional frameworks can also weigh down a project that does not need them. When choosing a framework this is where you need to spend some time comparing the project needs to what you are getting from the framework. To give you an example you do not want to implement a framework that comes with Angular.js for a static one page HTML site that does not require any sort of JavaScript. Let’s look at what each framework is offering us.

 

Angular Material
Angular Material is the biggest of the three libraries that we are comparing. It uses two main JavaScript frameworks jQuery and Angular. Unlike LumX and Materialize, it also includes some of the subsets of the main Angular library such as Angular-animate and Angular-message by default. The framework’s website also suggests that if they are useful to your project ngMessages , ngSanitize  and ngRoute can easily be applied to your stack. Using all of these frameworks can be a plus when working on a larger multidimensional project, but they can also bog down a small project where they are unnecessary. Angular Material also includes the basic icon and font sets used with Material design, Roboto and the Material Design icon set. With this framework there is a large list of dependencies to go along with the few we mentioned. Click here to see the full list.

LumX
LumX is not as robust of a framework as Angular Material, but it still includes both jQuery and Angular. Instead of using Angular-animate for transitions the framework utilizes Velocity. For a date picking element it requires you install Moment.js. This framework uses Sass and Bourbon for CSS preprocessing along with variable mixins for every color in the Material UI Color palette. To view an up to date list of the dependencies required by LumX  Click here.

 

Materialize
Materialize in the smallest of the frameworks we are comparing in this post. It is the only one of the three that does not come with Angular as a dependency, although it is easily implemented. This framework uses jQuery, CSS with Sass and HTML. Google Material’s recommended Roboto Font and Material Icon sets are also included. Click here to get the complete up to date set of dependencies from the Materialize Github page.

 

Ease of implementation

bower-npm-logosIn the beginning of this post we mentioned that saving time is one of the main reasons that we are using a framework in our project. If a framework is time consuming to install or is lacking detailed instructions we could end up spending unnecessary amounts of time figuring out how to get started. To avoid spending that extra time lets take a look at each framework and see what they have to offer for helping us get started.

 

Angular Material

Angular Material can easily be installed through either npm, JSPM, or Bower. There are also a few tutorials and Codepen examples you can play with if you are new to the framework and need additional resources. If you are using Angular2 then you can install Angular Material2 with npm and the Angular2 cli. There are a few extra steps for Material2 that can be found here on the Material2 website.

 

LumX

LumX can be installed through npm and Bower. If you do not want to use npm and Bower to install the framework the website gives you a step by step guide on how to install it manually.

 

Materialize

Materialize offers two different versions that can be downloaded and installed. The first version is the simple version with no CSS preprocessor or the second option that includes Sass. The framework can be downloaded from the Materialize website and easily installed with npm.  Detailed installation instructions are included on the site under the download buttons. If you want to get a quick start there is also two prebuilt templates that can be downloaded that are already set up and ready to customize.

 

Design features

design framework - materialdesign_introductionWe are looking at three frameworks that all apply Material Design theory,  this gives all of them a similar aesthetic. All three of these frameworks use Google’s Roboto font, the Material icon set, the Material Color palette and Material’s guide to motion. In this section we will look closer at how these design elements are implemented and how easily they can be customized. Responsiveness  is no longer an optional feature in a framework and is one of the most important design features we work with. To dive deeper into responsive design support we will be examining how each framework handles its grid on different size screens.

 

Angular Material
Angular Material comes with a large selection of prebuilt services and directives that take care of many of the basic components we find ourselves rebuilding in projects. Some examples are lists, dropdown menus, and formatted lists. Click here for a complete list of prebuilt services and directives. This framework makes using the Material color palette easy with custom theming. The developer picks ‘primary’, ‘accent’ and ‘warning’ colors; once configured Material injects the color theme through the project. One of the unique design options in Angular Material is the option to configure multiple sets of color schemes in one project.

Responsive design is handled in Angular Material through the use of layout containers and transition classes. The layout containers hold the grid of the project as device screen sizes adjust. The container classes are used in order to hide and show content depending on the size of the screen it is viewed on.

 

LumX
LumX uses SASS and Bourbon preprocessors this allows developers to easily work with and change CSS styling. To make following Material style guidelines a more fluid process the framework offers variables for the entire Material UI Color Palette library to be mixed in with designs. Like Angular Material this framework uses a color scheme that has a primary, accent and warning color. To customize the default theme you need to go in and override the default settings in the main SCSS file, although a much less desirable way to handle custom theming than what’s offered by Angular Material.

LumX handles responsive design through the use of Flexboxes and Mixins. Flexboxes work similarly to layout containers in Angular Material to hold the grid of a project as the screen scales. Mixing are used for different media query sizes to show and hide different elements in a project on different screen sizes.

 

Materialize
Materialize like Angular and LumX also offers a large list of prebuilt design elements that can be found on their website. One of the key features of Material design is the use of a 3d space, where the pieces of an application or website are no longer flat, but are now layered on one another. The framework includes a unique class that lets designers decide where in that 3d space an element exists. This feature is the shadow, and it is controlled by the z-depth class.

The z-depth class gives the element a new z-index and a more or less defined shadow based on where it exists in relation to the user.  When looking at customizing colors in Materialize you have a few options. If you are using the stripped down version of the framework you can can access the Material color palette variables and apply them to your design. If you are using the version that includes SASS you will also have access to mixins to reuse customized versions of a color from the palette.

design framework - shadow
The framework has a number of tools to help developers with responsive design including columns, rows, offsets, push and pull classes, and a detailed guide on setting up responsive layouts. The columns and rows work similarly to the way Flexbox and layout containers do in the previous frameworks. The offsets are special areas used to hold space in a grid column as the screen adjusts. The push and pull classes are  used to hide and show elements on different screen sizes. Materialize offers an additional resource for mobile devices, a plugin can be used to implement drag and swipe gestures on a user’s phone.

 

Size of the framework after minimizing

The last thing we are going to take a look at is the size of the framework after minimizing. We got the following information by downloading the frameworks installing their dependencies and then compressing the file.

 

Angular Material

  • 81.4MB

 

LumX

  • 19.9MB

 

Materialize

  • Without Sass 1.2MB
  • With Sass 1.3MB

 

Conclusion

We now have the information we need to make an informed decision on what framework will work best for our project:

  • Reviewed the maturity of the framework to see which has been around the longest and the level of community support provided.
  • Analyzed the technologies each framework has taken advantage of to offer us additional support if we need it.
  • Tested how easy each framework is to implement so we do not spend too much time trying to get our project started.
  • Assessed the design features each framework was offering us for customizing their prebuilt elements and for assisting with responsiveness as we transition through different screen sizes.
  • Downloaded each library, installed its dependencies and minimized it to see how it stacked up against the others in regards to size.

Based on the above, what we have concluded that if you are working on a project that needs a few interactive web elements and a solid design structure based on Google Material then Materialize is a great choice. It is a lightweight framework that can be installed easily, it even has template pages if you need to create a well designed website quickly.

On the other hand, if you need some extra Angular support, but want to keep your design framework on the lighter side Lumx is a great choice. It has extra features that Materialize does not include, but it is lacking in the strong support system and easy customization options that Angular Material provides.

Finally, there are many benefits to using Angular material if you can incur the size of the framework. When you create a larger project that needs a framework that works alongside your Angular code it is tuned to work with Angular. It is also the only framework of the three that offers a version of the framework for Angular2, the latest version of Angular. There are Codepen demos of all of the elements this framework provides that makes getting familiar with it without installation easy. The option to create multiple configurable themes in one project allows it to be the most easily customized framework of the three as well.

There are a lot of frameworks to choose from. Figure out the specifications and requirements for your project and match it with the framework that fits best!

Share this

Comments (4)

Anu
March 7, 2017 Reply

the comparison between both of them explained very well with consider every point

pooja
March 7, 2017 Reply

Thanks for the great comparison s

shivani
March 7, 2017 Reply

Thanks for the post , Really very helping

Leave a reply