Material Design Lite offers Bootstrap alternative… or does it?

Material Design Lite (MDL) allows a user to bring Google’s Material Design look & feel to their own websites. The aim is to optimize for cross-device use and offer an experience that is immediately accessible. The full Material Design library (Polymer and/or Paper) is massive and was initially pushed out for highly interactive, data-driven websites and apps. Its an awesome framework for developing those exact things, as the newest version of Google Hangouts reflects. However, the problem with having a garage full of shiny new tools is sometimes you only need a socket set and a pipewrench. The full library is a bit heavy for using on the basic company website or landing page. That’s where MDL is useful.

MDL has very few dependencies, but still offers a host of features including ripple animations, badges, buttons, cards, menus, toggles, and a well-formatted responsive CSS grid, amongst other features. Things in MDL work nicely all the way back to even IE9, though some animations may not be supported.

How does all this compare and contrast to Bootstrap?

Bootstrap as a platform is well documented, has a massive community that adopted it, and has had a couple of years to mature. Things in Bootstrap work nicely right out of the box. With MDL, there’s a lot more assembly required, but in a mostly positive way. MDL requires combining classes to achieve various looks, creating a consistent product. With Bootstrap, sometimes undoing all the presets in the default stylesheet can lead towards 30-40 lines of extra CSS and overwrites.

There are far more components in Bootstrap than MDL at the moment. MDL lacks native support for both responsive media embeds and carousels. Bootstrap has a few other items that right now just fit together better than MDL’s, such as the way tables get resized in responsive environments and the tooltip popovers have more options. The grid system in Bootstrap shows its maturity as well, offering pre-built offsets and orderability for responsive columns. MDL doesn’t offer such support in its grid structure yet.

In the grid system with Bootstrap we’ve become accustomed to having 4 screen sizes to work with - XS (0 - 768px), Small (768 - 992px), Medium (992 -1200px), and Large (1200px+), but those sizes are somewhat arbitrary. Why does XS apply all the way up to 768px, thus forcing the same view on a Nexus 4 and a much larger Galaxy Tab S? MDL logically eliminates one of those breakpoints, utilizing views for Phone (0 - 480px), Tablet (480 - 840px) and Desktop (840px+). After building so many agency websites through the years, MDL is more in tune with 99% of a client’s needs on this front.

Overall, Material Design Lite is finding its way, much like Bootstrap went through growing pains and nearly-complete class rewrites jumping from version 2 to 3. MDL offers a fresh, web-application feel without the full complexity of Polymer, while maintaining consistency across an entire project. Bootstrap, of course, has a very large community with thousands of themes, plugins, and folks who can help troubleshoot any problem.

And if you like the newness of the Material look, and want to combine that with the world of Bootstrap experience you already have, Fez Vrasta already has you covered with a Material Theme for Bootstrap.