BT

InfoQ Homepage News Google Brings Material Design to CSS, HTML, and JavaScript

Google Brings Material Design to CSS, HTML, and JavaScript

Bookmarks

Google Material Design Lite) (MDL) aims to enable material design look and feel for websites. Material design is a visual language that is standard on Android and that Google is proposing cross-platform.

According to Google, 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.

This is how you declare a basic raised button with ripple:

 

<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect"> Button </button> 

 

MDL is not the first HTML/CSS/JS implementation of material design, and alternatives such as Materialize and Material Bootstrap are also available. The main advantage that MDL brings over those community efforts, says Google, is that it was developed “in close collaboration with the Material Design and Chrome UX teams and undergoes regular reviews for spec compliance”.

Before MDL, Polymer was the canonical implementation of material design for CSS/JS. Compared to MDL, Polymer has, though, a larger scope that goes beyond the visual domain by including data communication components as well as non-material-design components.

At the moment, MDL is not optimized nor supports the use of individual components, e.g. a button. Still, for developers wanting to use just a reduced number of MDL components, it is possible to tailor a custom MDL distribution by commenting out undesidered components from material-design-lite.css and undesired scripts from the Gulpfile an then running gulp.

MDL follows the BEM convention to make class names consistent, isolated, and expressive. Google also details (https://github.com/google/material-design-lite/wiki/Understanding-BEM) what guidelines they have followed in applying BEM for MDL. On the downside, BEM can lead to exploding class names and according to intial feedback, MDL seems to be prone to it by requiring seventeen different class names for a simple card, a basic concept in material design.

Google says that MDL works in all modern browsers (Chrome, Firefox, Opera, Microsoft Edge) and Safari, while it degrades gracefully on browsers like IE9, and suggests to reference their CDN in order to include MDL in a website, but it is also possible to download it or import it via npm or Bower.

Rate this Article

Adoption
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Community comments

  • Yet another framework

    by Makhtar Diouf /

    Your message is awaiting moderation. Thank you for participating in the discussion.

    Good to have, but developers will just be alienated even further with the multiplicity of frameworks in recent years.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

BT

Is your profile up-to-date? Please take a moment to review and update.

Note: If updating/changing your email, a validation request will be sent

Company name:
Company role:
Company size:
Country/Zone:
State/Province/Region:
You will be sent an email to validate the new email address. This pop-up will close itself in a few moments.