Material Design can replace many parts of Bootstrap. However, it does not intend to feature-match everything Bootstrap offers. Instead MDL intends to implement the components specified by the Material Design specification. This allows it to provide the most comprehensive and accurate solution available. — getmdl.io/faq
How do I use Material Design Lite?
A code implementation of Material Design (MD), Material Design Lite (MDL) is a small (around 27Kb gzipped) library of components for use on web pages and web apps. It’s written in Sass using BEM, and can be downloaded from GitHub then modified for your own purposes. Or you can, as per Google’s stated preference, import the full framework from Google’s CDN. You can cherry-pick elements to integrate with your designs, or if you are looking for a really simple option, Google have provided a theme customizer which allows you to make (very) minor changes to the framework before you use it.
What’s included in Material Design Lite?MDL’s component library features MD versions of common UI elements such as check boxes, text input fields, and buttons. There are also MD UI elements such as cards, sliders, spinners, and tabs. MDL also includes five templates: a blog, the android.com skin, a dashboard, a text-heavy web page, and a standalone article page:
Should you use Material Design Lite?MDL is the way that Google thinks the majority of websites should be built. And whilst there is absolutely no suggestion that Google will enforce this way of building, they certainly could if they chose to; Google wants to ensure that search results it serves to customers are fast, clean, user-friendly pages, what better way than to add the use of a framework it controls, to its algorithm? The use of any framework inevitably introduces some borrowed visual elements. However, most successful frameworks are successful because they are flexible. Where MDL differs, is that it is not just a framework, but a framework that favors a specific design approach. MD, as a design guide, is a well-crafted and intelligent attempt to rationalise Google’s output into a coherent brand. Its failing is that it’s too brand-specific to be applied beyond Google’s product range. We can learn a lot from the design wisdom in MD, but implementing it wholesale — which is MDL’s great strength — makes little sense most of the time.
Ben Moss is Senior Editor at WebdesignerDepot. He’s designed and coded work for award-winning startups, and global names including IBM, UBS, and the FBI. One of these days he’ll run a sub-4hr marathon. Say hi on Twitter.