Introducing Material Design Lite (MDL)

Introducing Material Design Lite (MDL)

FFW Blog - illustration
default avatar
Thought byAlex Khlopkov
September 01, 2015

getmdl.io -a library of components & templates in vanilla CSS, HTML and JS.

Google’s guidelines for how an app or website using Material Design reflows content at different screen sizes and as a screen resizes in real-time make for visual consistency across a range of devices of all shapes and sizes. The company says MDL is tailored towards websites heavy on text, like blogs and marketing pages.

Anyone who has used the Bootstrap web framework will understand MDL right away.

Google already has a set of Material Design components available for developers to add to their websites in its Polymer web library, but what’s different is that MDL is a whole package focused on bringing the company’s beautiful new design and UI language to the web. Those who don’t need all the extra functionality of Polymer and merely want to create a Material Design website will feel very comfortable with MDL.

MDL meets three requirements that qualify it as “lite”:

  • it has few dependencies, which makes it easy to install and use
  • it is framework-agnostic, allowing developers to integrate it within any of the available front-end tool chains
  • it is relatively small in code size
  • it has a narrow focus, implementing the material design guidelines, and is not a comprehensive frameworks.

Out of the box templates

MDL optimises for websites heavy on content, such as marketing pages, text articles and blogs. We’ve built responsive templates to show the range of sites that can be created using MDL that can be downloaded from our Templates page.

Technical details and browser support

MDL includes a rich set of components, including material design buttons, text-fields, tooltips, spinners and many more. It also include a responsive grid and breakpoints that adhere to the new material design adaptive UI guidelines.

The MDL sources are written in Sass using BEM. You can use theme customizer or download the MDL sources from GitHub and build your own version. The easiest way to use MDL is by referencing our CDN.

The complete MDL experience works in all modern evergreen browsers (Chrome, Firefox, Opera, Microsoft Edge, Safari and IE9+. Browser compatibility matrix has the most up to date information on the browsers MDL officially supports.

Applications Done Well

Google Inbox. Google’s native e-mail app utilizes elements of Material Design very well, using bold colors, easy and intuitive navigation, animations that are grounded in reality, making it a very fun and user-centric experience.

Cabinet. Cabinet is a file browser app that is optimized for Material Design. With easy-to-understand navigation and organization, Cabinet allows users to organize, upload, and view files.

Weather Timeline. One of the premier Material Design weather apps, Weather Timeline, provides great functionality and customization that features a simple interface with Android Wear compatibility.

Numix Calculator. Simply put, a calculator with Material Design offers advanced functions and the capability to re-skin your calculator colors and you can swipe through various functions.

The bottom line

Material Design Lite is for sure a big thing, Google did a great job and will certainly push it further. The time will show if it’s a game changer and if it will be adopted on a large scale. Currently, we can see different reactions, but it’s a normal thing as MDL is in its initial phase. However, at this time can be considered a Bootstrap killer, why? It seems like it was initiated to consolidate the position of Google in its current domains (Android, web services, search, etc.) and to provide a unique platform for all devices.  On the other hand Bootstrap was born out of real needs, to solve a lot of issues and to enhance the process of web design. This might be a strong reason for developers and designers to use MDL instead of Bootstrap. Tell us what you think, are you ready to switch to MDL or not? Leave a comment and below.

Topics:
Best Practices
Technology Tools

Read next:

Blog
Teaser of "Learn to Make Your Site Accessible" blog

Learn to Make Your Site Accessible in a New Training from FFW

Blog
Teaser of Drupal for Customized eCommerce Solutions blog

Using Drupal for Customized eCommerce Solutions

Blog
Teaser image of Acquia Engage Awards blog

FFW Clients Named as Finalists in Acquia Engage Awards

Blog
FFW Blog - illustration

The 'Real' jQuery Autocomplete for Korean Language.