Award-winning Offshore Software Development & IT Consulting Company Since 2003
According to Google’s blog post “It is framework-agnostic, meaning MDL can be used with any of the rapidly changing landscape of front-end tool chains. MDL has a low overhead in terms of code size (~27KB gzipped), and a narrow focus — enabling material design styling for websites.”
You can use the components to develop web pages and web apps that are attractive, consistent, and functional. Pages developed with MDL adhere to web design principles like browser portability, device independence, and graceful degradation. Google is offering the Material Design Lite source code on GitHub to help you build your own version.
Material Design Lite Components
The MDL component library includes new versions of user interface controls such as buttons, check boxes, and text fields. These controls have been adapted to meet Material Design concepts. The library includes enhanced and specialized features like cards, column layouts, sliders, spinners, tabs, typography, and more.
Templates
MDL can effectively optimize for websites which are relatively heavy on content, such as marketing pages, text articles and blogs. These responsive templates show the diverse range of sites that can be created using MDL and can be downloaded from Templates page.
Currently, there are templates for
BLOG
ANDROID.COM MDL SKIN
DASHBOARD
TEXT-HEAVY WEBPAGE
STAND-ALONE ARTICLE
Customization
MDL styles are structured with Sass and the BEM methodology. It is easy to customize styles in different ways, even before you download framework package. A simple way is with the color wheel on the customize page. The color wheel lets you select color accents depending on the primary color selection. The customizer will generate the stylesheet, which can be downloaded, or linked directly from Google CDN.
Browsers
Components in MDL are built with frontline web techniques, such as calc(), Flexbox, querySelector, and classList. However, MDL will work in modern browsers: Chrome, Firefox, Opera, and Microsoft Edge. MDL will degrade gracefully in older browsers, such as IE9, by serving the CSS version only.
Should You Use Material Design Lite?
MDL is built on the core technologies of the web that you love and use on a daily basis such as CSS, HTML and JS. By using MDL into your projects, you also get access to a dominant and highly curated implementation of material design for the web.
Google’s Material design is not just about making website look nice. There are several advantages of building a site that uses the tech giant’s vision of how websites should look like. Material Design Lite offers a familiar look and lets users navigate the website easily.
While Google is not forcing this method of building websites, Google wants to ensure that its search results shows fast, clean and neat websites. And controlling the use of a framework seems to be the way forward. Where MDL differs, is that it is not merely a framework, rather a framework that tilts heavily towards specific design approach.
Finally
Material Design Lite seems to be a great way forward, and now you can create your own Material Design website with a matter of ease. But this approach may seem out of-context when implemented in a website which has nothing to do with Google.
However, Google provides full control over the source code, allowing us to customize. So now it probably depends on how much we can customize Google’s work, and whether we can design a better option.
