Google Announces Material Design Lite (MDL): A Specification For UI

a library of components & templates in vanilla CSS, HTML and JS

[engine]

Google has announced Material Design Lite (MDL) which is a UI specification and templates for all form factors across the web using vanilla CSS, HTML, and JavaScript

MDL makes it easy to add a material design look and feel to your websites. The “Lite” part of MDL comes from several key design goals: MDL has few dependencies, making it easy to install and use. 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. Google Announces Material Design Lite (MDL): A Specification and Templates For UI Across Form Factors [medium.com]

MDL optimises for websites heavy on content, such as marketing pages, text articles and blogs.

[blend27]

I might not me the CSS GURU, but CSS classes used have double underscores and double dashes in class names:

mdl-grid--no-spacing
mdl-tabs__panel

I like this one too: mdl-layout__content mdl-color-text--grey-600

sloppy Joe, sloppy.....

no, thanks...

[incrediBILL]

I ran their demo and it looks like a whole bit fat bunch of nothing to me.

The real problem they don't get is many of us are using things like Bootstrap and unless it easily integrates, we won't be using it any time soon.

Plus, I just tried this template and the circles at the top we 1/2 gray boxes on Firefox on one machine, looked find in Chrome and FF on the other machine, no clue what the difference was between the Firefox's

[getmdl.io...]

Anyone else see it malfunction?

#FAIL

[rish3]

The tooltips look exactly like buttons, which isn't terrific. I suspect end users would keep clicking on tooltips, expecting something to happen.

[explorador]

Made by Google right?

Bootstrap and other frameworks are doing a better job on presenting themselves. I understand the elements but the presentation, the official site... looks almost as unfinished or built by someone without tast... well is google.

[Leosghost]

Reminds me of G+..another rushed, cobbled together, botched "me too" product, released after everyone else already "got there"..

[Lorel]

I'm not impressed. Using this much css on internal links (and elsewhere all over the page) would increase download time on every page. A typical example of a website designed by a machine instead of a real person.

the css for just one link in the menu:
<section class="about-panel about-panel--components mdl-color-text--white mdl-cell mdl-cell--6-col" data-target="components/index.html">
Components
</section>

[keyplyr]

MDL has a low overhead in terms of code size (~27KB gzipped)

Added to what's already there? Used in a responsive design w/ Bootstrap?

[Nutterum]

This is just Polymer on steroids, yet it still lacks basic things in order to integrate properly on anything more than a mom and pop website. Long story short, use with caution.

[Dymero]

Lorel, I agree. Someone I know calls that "classitis". I always try to keep my code as class-free as possible, nesting selectors where possible. It isn't always easy when you want to use some of the new CSS 3 style definitions that are not supported in earlier versions of IE.