Welcome to WebmasterWorld Guest from 54.198.2.110

Forum Moderators: open

Message Too Old, No Replies

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

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

     
11:01 am on Jul 7, 2015 (gmt 0)

Administrator from GB 

WebmasterWorld Administrator engine is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month Best Post Of The Month

joined:May 9, 2000
posts:24716
votes: 612


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.
2:35 pm on July 7, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2004
posts:1899
votes: 56


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...
4:37 pm on July 7, 2015 (gmt 0)

Administrator from US 

WebmasterWorld Administrator incredibill is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Jan 25, 2005
posts:14664
votes: 99


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
5:29 pm on July 7, 2015 (gmt 0)

Preferred Member

5+ Year Member Top Contributors Of The Month

joined:May 24, 2012
posts:648
votes: 2


The tooltips look exactly like buttons, which isn't terrific. I suspect end users would keep clicking on tooltips, expecting something to happen.
8:47 pm on July 7, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Mar 30, 2006
posts:1472
votes: 87


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.
9:10 pm on July 7, 2015 (gmt 0)

Senior Member from FR 

WebmasterWorld Senior Member leosghost is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Feb 15, 2004
posts:6717
votes: 230


Reminds me of G+..another rushed, cobbled together, botched "me too" product, released after everyone else already "got there"..
10:39 pm on July 7, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:June 4, 2002
posts: 1830
votes: 3


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>
10:43 pm on July 7, 2015 (gmt 0)

Moderator from US 

WebmasterWorld Administrator keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:10112
votes: 550


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?
7:56 am on July 8, 2015 (gmt 0)

Preferred Member from BG 

Top Contributors Of The Month

joined:Aug 11, 2014
posts:526
votes: 164


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.
10:38 pm on July 15, 2015 (gmt 0)

Full Member

5+ Year Member

joined:Apr 26, 2012
posts:328
votes: 8


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.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members