E6gpe44r40fg3pvzrgcb

Battle of the Best Front-End Frameworks: Bootstrap vs Materialize

Share

Published

12 Jan 2016

Duration

11 minute read

There are a huge number of frontend frameworks available for web developers to choose from. By far the most popular choice today is Bootstrap; however, if you are looking for an alternative that creates slick user experience then you may want to check out Materialize.

Here is what you need to know to compare both frameworks:

Shared Features of Materialize & Bootstrap

Let's start with what the two frameworks have in common:

  • They are both are licensed under MIT.
  • They both utilise a grid system which works on 12 columns (with similar structure and class names), however Bootstrap has additional capabilities.
  • They both have a set of components and an icon set.
  • The structure in web applications is identical with CSS, JavaScript and fonts being stored in css, js and font folders respectively (by default).
  • They both provide responsive layouts, which is to be expected.
  • They both are actively maintained and being supported. At the time of writing, Materialize had 404 open issues and 1286 closed issues, while Bootstrap had 249 open issues and 11893 closed issues.  Over the past month, 25 authors have made 72 commits on Materialize compared to Bootstrap, which had 61 authors and 178 commits.

Everything to Know about Materialize

Materialize employs the design philosophies of Google's Material Design. For those of you who are not familiar with this, the specification centres on simple yet meaningful philosophy of modern UI design. It focuses on how user experience elements behave and interact visually. It came into existence in order to bring uniformity to Google’s UI on all platforms including web, and not just Android. The specification outlines the general principles relating to visual elements and discusses how physics, light, space, momentum are to be used. It then provides concrete examples and requirements for specific elements, e.g. buttons, lists, tabs, cards, etc.

Given that Materialize is an implementation of Google's Material Design, elements are designed around a 3-dimensional space and utilise motion heavily. This means that along with having a width and height, elements have a depth and move in specific ways.  This is key in assisting the user understand the context of function using familiar visual cues.  While simple, these visual guests are effective – for instance the ripple effect when interacting with elements is pretty neat, if you haven’t had a chance to see this in action I suggest you do. I also prefer the way form components behave as they provide better use of screen real estate. This again comes down to Materialize being built against the Material Design framework where this stuff really matters.

Materialize is shipped as a CSS + JavaScript framework, though the CSS portions are written in Sass.

Materialize implements a familiar 12 column grid system for element layout. The grid system for Materialize has 3 intervals (<=600px, <=992px and > 992px).

Looking at the UI components available, Materialize doesn’t have as many as Bootstrap. However, there are a few components Materialize has that Bootstrap doesn’t. These include:

  • Toasts
  • Modals that are fixed to the bottom of the window
  • Parallax

Documentation and plugins are limited for Materialize; however, given that this is a fairly new framework, which was built by four guys from Carnegie Mellon University, it is to be expected. The framework is also fairly solid and I haven’t found any issues yet using most modern mainstream browsers.

In relation to browser compatibility, Materialize works with modern browsers, however in relation to Internet Explorer, it is limited to IE10+, which may be a serious consideration depending on your specific application requirements.

For other examples of frameworks that implement Material Design, have a look here.

Everything to Know about Bootstrap

Twitter Bootstrap is the most popular CSS framework to build mobile friendly websites with a responsive design. It was created in 2010, however it wasn’t officially released until August 2011. Since then there have been a number of releases and it is currently in version 3, with version 4 soon to be made available (it is currently in alpha, click here for more information).  

The library focuses on a mobile first approach, i.e. websites are designed and built targeting mobile platforms and then made to work on desktops and larger devices. The same can be said about Materialize, however, as outlined above, majority of the framework focuses on how things look and respond when interacted with and as a result there is not a lot in regards to prescribing a responsive user experience (although the flow-text class in Materialize is nice – text and line height adjusts depending on the screen size).

Bootstrap provides a specific framework for constructing responsive user experience using a set of HTML classes, CSS styles and behaviours, i.e. rather than focusing on how things look, it aims to provide a consistent and customisable underlying structure to the HTML.

Whilst Bootstrap provides a default theme, visual presentation and style is not the focus of the framework. As it has been designed heavily using CSS classes, the visual presentation can be easily customised using stylesheets. As a result there are a wide variety of themes available for Bootstrap to change the visual presentation and style of your website.

Currently, bootstrap CSS is compiled from Less, though an officially supported Sass port is available.  Future versions of bootstrap (from v4) are compiled from Sass.

Bootstrap also utilises a 12 column grid system. The grid system for Bootstrap 3 has 4 intervals (< 768px, >=768px, >=992px and > =1200px). The functionality available via the inbuilt classes is much more comprehensive in Bootstrap compared to Materialize allowing more freedom and flexibility in how the site adapts to changes in screen sizes and devices.

Bootstrap is a mature framework that is much more fully fleshed out than Materialize. For example:

  • Basic capability to use classes to hide or show elements when printed is natively provided.
  • The documentation is far more comprehensive (and has more fleshed out usage examples).
  • Helper classes are available to assist with accessibility compliance, e.g. for screen readers and keyboard navigation
  • Browser compatibility is extensive, working with IE9+ and in some ways IE8

To say that Materialize is a direct competitor of Bootstrap would be unfair to Bootstrap; Materialize just isn’t there yet. Hopefully it will be one day because the look and feel of Materialize is very slick. It’s difficult to deny good design when you see it, especially in regards to the design principles relating to 3 dimensions and movement, however this largely comes down to it implements a consistent set of guidelines from Google’s Material Design.  That said, the Materialize frame is still quite new - as a result its capabilities, documentation and community cannot rival those of Bootstrap.

If you are looking for a framework that styles your application to look first class with minimal effort, or you want to unify your application with Google’s design, then definitely check out Materialize. It does, however, come with the drawback of having to write additional frontend code for functionality that we have become used to being available out of the box when using Bootstrap.

On the other hand if you are looking for a solid frontend framework that is tried and tested, with a large community, plugin choices and themes, you can’t go past Bootstrap. It is the most appropriate framework between the two for any decent application or project today.


Zarthost Boman has over 15 years’ experience in the IT industry and is the Director of Operations at F1 Solutions. Zarthost has overseen major web development projects for high profile clients such as Elections ACT, Cancer Institute of NSW, Department of Social Service and the Department of Defence.


LEARN MORE ABOUT FAST TRACK

 

 



Want to become a junior developer? At Coder Academy we have Australia's first and only accredited fast-track coding bootcamp that will set you up for a new career in tech. Our immersive course helps students acquire in-demand skills through hands on, project-based training by industry experts over six months.

Now enrolling domestic & international students in Sydney, Melbourne & Brisbane! Study now, pay later with FEE-HELP! 

Are you a woman interested in coding? Check out our Women in Tech Scholarship!


BECOME A FULL STACK DEVELOPER IN 25 WEEKS OF STUDY

Seriously considering a coding bootcamp? Learn more about Australia's first accredited coding bootcamp.

Join our newsletter to find out about upcoming courses and events!