[...] 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’ [...]
Materialize CSS is relatively heavy: requires jQuery (however that you probably already have in your project, right?) and includes jQuery Easing, VelocityJS and fian.my.id/Waves 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.
| CSS | materialize.min.js without jQuery | Fonts and icons without Roboto | Total | 145 KB | 122 KB | Material-Design-Icons.woff2 is 33 KB | 300 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?
| CSS | material.min.js | Fonts and icons without Roboto | Total | 119 KB | 57 KB | Material Icons woff2 is 37 KB | 213 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.
Chrome 35+, Firefox 31+, Safari 7+, IE 10+
| IE9 | IE10 | IE11 | Chrome | Opera | Firefox | Safari | Chrome (Android) | Mobile Safari |
|---|---|---|---|---|---|---|---|---|
| B | A | A | A | A | A | A | A | A |
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) {
document.documentElement.classList.add('mdl-js');
componentHandler.upgradeAllRegistered();
} 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".
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