Bootstrap vs Materialize

Bootstrap vs Materialize

Another day in the tech world and the behemoth that is Google has entered another arena with Materialize. Previously the only option for a powerful front end framework was Bootstrap, an open source technology that has helped developers worldwide. Started by two people at Twitter, it has been unchallenged in this space as the best of breed. A few competitors exist, such as Skeleton, but none have come close to Bootstrap’s undeniable success. We use Bootstrap on a daily basis and have found it an invaluable resource in achieving the great quality sites and applications we produce.

Enter Google.

Google first entered the scene with Materialize on 9th March. Another open source framework, this package looks at the bigger picture and provides users with more complete elements. The system has been designed intelligently to allow users of Bootstrap to easily pick up this new tool thanks to the likes of similar classes and great documentation. Conversely, whilst everyone expects the Google enterprise to dominate in uptake, but at present Bootstrap has more than double the number of contributors.

To set the scene, how similar are they? They both:

  • Operate using a 12 column grid system;
  • Have similar structures and class names;
  • Use a set of components and an icon set; and
  • Provide responsive templates, a critical component.

What does Bootstrap do best?

  • The library focuses on a mobile first approach;
  • It provides a specific framework for constructing responsive user experience using a set of HTML classes, CSS styles and behaviours;
  • 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;
  • Version 4 is compiled with Sass;
  • Bootstrap has 4 intervals in its grid system (< 768px, >=768px, >=992px and > =1200px) which is much more comprehensive than Materialize’s offering;
  • Basic capability to use classes to hide or show elements when printed is natively provided; and
  • Helper classes are available to assist with accessibility compliance, e.g. for screen readers and keyboard navigation.

What are the good out of the box features that come with Materialize?

  • Writing columns are shorter e.g. col s12 m6;
  • The framework comes with features built in shadows for objects, hoverable items, flow text, cards and forms;
  • Avatar Content; and
  • It is built in parallax.

There are plenty of differences between the platforms, although the one that everyone talks about as an example is that in Bootstrap, this is the code required to do a button:

<button class="btn btn-primary btn-lg">My Button</button>

In Materialize, there is no need to duplicate the btn text and so it looks like this:

<button class="btn waves-effect waves-light green">My Button </button>

Users have tried Materialize after being loyal customers for Bootstrap and have both hated it and loved it. Some say they like the direction in which it is heading and can see themselves switching after it matures a little further. My recommendation is to get out there and try it. Think of it like a marmite test, you’ll love it or hate it – but at least you’ll know if you are using the right framework for you.

Stephen Collins