Google release Material Design Lite, time to switch?

Material Design Lite is "the right implementation" of the Google Material Design spec

This is official

[...] the large, diverse number of implementations available are often quite liberal with their interpretation of the spec (not their fault!) and their opinions don’t always reflect what the Material Design team would consider ‘correct’ [...]

Comparison with Materialize CSS

Materialize CSS is relatively heavy: requires jQuery (however that you probably already have in your project, right?) and includes jQuery Easing, VelocityJS and for animations and special effects.
It can be define as a javascript-not-much-bloated library?

The default font is Roboto, the same.

Materialize includes 740 Material Design Icons courtesy of Google.

Weight in production (minified and without gzip) Materialize v0.97.0:

CSSmaterialize.min.js without jQueryFonts and icons without RobotoTotal
145 KB122 KBMaterial-Design-Icons.woff2 is 33 KB300 KB

Wow it's quite heavy for my standards! jquery-2.1.4.min.js is 84 KB or if you have to support IE 8 jquery-1.11.3.min.js is 96 KB... so with some custom code roughly a total of 400 KB?

Material Design Lite is a CSS and vanilla javascript light library. But how much light?

Weight in production (minified and without gzip) Material Design Lite v1:

CSSmaterial.min.jsFonts and icons without RobotoTotal
119 KB57 KBMaterial Icons woff2 is 37 KB213 KB

Not bad. In a nearby future the amount of javascript code I hope will be cut in half, because this should be a most-CSS/presentational library, right? And now you've to deal with old and crappy browsers.

Supported browsers

Materialize CSS:

Chrome 35+, Firefox 31+, Safari 7+, IE 10+

Material Design Lite:

IE9 IE10 IE11 Chrome Opera Firefox Safari Chrome (Android) Mobile Safari

A-grade browsers are fully supported. B-grade browsers will gracefully degrade to our CSS-only experience.

Templates are not officially supported in IE9 and legacy browsers that do not pass the minimum-requirements defined in our cutting-the-mustard test.

   * Performs a "Cutting the mustard" test. If the browser supports the features
   * tested, adds a mdl-js class to the  element. It then upgrades all MDL
   * components requiring JavaScript.
  if ('classList' in document.createElement('div') &&
      'querySelector' in document &&
      'addEventListener' in window && Array.prototype.forEach) {
  } else {
    componentHandler.upgradeElement =
        componentHandler.register = function() {};

Material Design Lite promise explicity a nice degradation and with Google support and fans I expect tons of tests and bugs fixing for free. But I have to test in person IE 8-9 and Safari for the templates. For me is a sign "USE WITH CAUTION".

Templates and components

The components are not exactly the same, but they can change with time and if there's the demand, someone will create new components...

The templates is CSS classes based, very similar. But Google Material has a boat load of long classes =)

Materialize has a standard 12 column fluid responsive grid system and a very basic container system.

The Google solution is based on density-independent pixels and with this complex and beautiful system of breakpoints. This is technological superiority.

For optimal user experience, Material user interfaces should adapt layouts for the following breakpoint widths: 480, 600, 840, 960, 1280, 1440, and 1600dp.


I will be brief: Google wins.


Switch when you are ready to switch to vanilla javascript. In the meantime test in the spare time. For example: Windows Phone is a mistery :O