Material Design Lite vs Bootstrap

Google recently announced Material Design Lite which lets your website easily adapt Material Design with minimum effort. It’s a bunch of CSS and Vanilla Javascript code which doesn’t have any other dependencies and that makes it awesome!

Twitter’s Bootstrap has dominated the front-end design pattern in the past couple of years. The real question is, “Will Bootstrap continue it’s dominance?”. With more than 6,000 stars on MDL Github repo in less than 72 hours of it’s announcement, Material Design Lite definitely challenges Bootstrap head-on.

Since both of them serve as the base layer for the front-end world of HTML and CSS, they are different in some ways while very similar in some fashion. Let’s have a look!

Material Design Lite

• Follows stricter pattern of Material Design Concept. The concept includes plenty of information about metrics, breakpoints, animation, typography and other code-able values.
• MDL can be customized but one may easily lose the concept of Material Design.
• MDL is built using SCSS preprocessor
• No external dependencies, just plain vanilla JavaScript
• Components include cards, mega footer, slider inputs and toggle switches which isn’t supported by Bootstrap
• Package managers: Available on npm and bower
• Build process using Gulp
• Less number of extensions available because of its newness. But the community is growing rapidly, so expect a lot more plugins in the coming days.
• Base font: Roboto
• Color variations: Usually shades of two colors
• Support in JS frameworks: Angular Material and React Material UI
• Browser Support: Fully supported on all the major browsers across devices which includes IE 10+, Chrome, Firefox, Opera, Safari, Chrome for Android and Safari Mobile. It degrades gracefully on IE9
• File size: Latest MDL (v1.0.0) has a gzip size of ~27KB which is pretty neat.

Bootstrap

• Works more like a base which can be customized to your creativity
• Built using LESS (also has a SASS version)
• jQuery dependency
• Components include panel, popover, breadcrumb, thumbnails, inline alerts and wells which aren’t present in Material Design Lite.
• Package managers: Other than npm and bower. Bootstrap is also available on composer
• Build process using Grunt
• A lot of extensions and third-party widgets are available for Bootstrap because of it’s dominance and duration in the field.
• Base font: Helvetica Neue
• Color variations: Bootstrap uses context based colors like primary, info, danger and warning.
• Support in JS frameworks: Angular UI Bootstrap and React Bootstrap
• Browser Support: Bootstrap supports all the major browsers and has a backward compatibility upto Internet Explorer 8, though it needs Respond.js polyfill for CSS3 Media-queries support. Official documentation also says that “Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 7, though they are not officially supported”
• File size: Bootstrap depends on jQuery and the latest build (v3.3.5) has a gzip file size of ~64KB including jQuery and ~31KB excluding jQuery.

This is an ongoing article and it will be improved as we receive more in-depth knowledge about Material Design Lite.

My opinion and choice

If you’re looking for heavy customization and you don’t want to remain in the constraints, Bootstrap is a clear winner. If you love bright colors and modern Material concept, you must go with Material Design Lite.

I’m Sanket and I am a co-founder of Sahusoft. As a result of my weekend experiments, I have also founded StrapUI.com and StartAngular.com along with my team.

I’d love it if you recommended this post and chat with me on Twitter! You can also subscribe to my updates.