
Material Design Lite Components in HTML/CSS/JS - vladikoff
https://github.com/google/material-design-lite
======
dstaley
So, I just wanna say I am absolutely, incredibly excited for this. I've loved
the design of paper-elements, but I don't want to attempt integrating Polymer
into my projects.

That being said, the use of BEM is a huge turn off. The markup for a simple
card uses seventeen different classes, which is absolutely a nightmare to
memorize. For comparison, a card from Materialize uses only five to seven
classes (depending on the type of card).

However, since this is built in SASS, I assume you could use the extend
keyword to combine a lot of the frequently used together classes into
something more manageable. I haven't really used SASS in this way, so I'm not
sure how that'd work.

~~~
spankalee
I'm curious, what's keeping you from trying Polymer? Its paper-elements are a
very good implementation of Material Design, and the library is very light
weight.

~~~
dstaley
Most of my apps are built with Ember, and I just haven't quite figured out how
to marry them both.

~~~
dominotw
its just html tags?

You don't have to do anything special.

1\. import polymer html file 2\. use it

thats all there is to it.

~~~
pfooti
This is actually not true. If you're using polymer with the full
webcomponents.js polyfill, there's a known bug which breaks contenteditable
execCommand calls (which means a lot of rich text editors break when you
include the polyfill) [1]. The big heavy polyfill is also pretty slow on some
browsers.

If you use the newer, lighter-weight shady-dom version of the polyfill, which
is a lot more responsive on non-Chrome browsers and doesn't introduce the bug
indicated in [1], you _must_ do all DOM manipulation via polymer's local DOM
api, in order to properly distribute dom elements.[2]

That means, if you want to use polymer, you cannot use angular or ember (for
example). Specifically, DOM manipulation via those libraries ends up just
using regular calls against element.appendChild, but those appended elements,
if they are polymer elements, end up not properly working (event listeners
don't attach and styling modifiers don't apply), because you didn't use
polymer.dom to go via polymer's local dom API.

I found out about all of this the hard way, and now I have a webapp that works
great on chrome, but users cannot use the rich text editor on anything except
chrome. Which eliminates all iOS browsers entirely.

1:
[https://github.com/webcomponents/webcomponentsjs#execcommand...](https://github.com/webcomponents/webcomponentsjs#execcommand-
and-contenteditable-isnt-supported-under-shadow-dom-)

2:[https://www.polymer-project.org/1.0/docs/devguide/local-
dom....](https://www.polymer-project.org/1.0/docs/devguide/local-dom.html)

------
ArthurClemens
Great news that Google has started this library. This will help MD
implementors like me.

"That said, the large, diverse number of implementations available are often
quite liberal with their interpretation of the spec (not their fault!) and
their opinions don’t always reflect what the Material Design team would
consider ‘correct’."

Nevertheless I found a number of deviations from the design specs:

    
    
      - Disabled buttons should not have a z level
      - FAB ripples should originate from the center
      - Icon buttons should have a touch area of at least 40px
      - The same goes for slider knobs (at least 30px, already small)
    

On the website:

    
    
      - The scrollable tabs on the site are scrolled just a couple of pixels per arrow click, instead of scrolled per tab
      - Scroll areas should have -webkit-overflow-scrolling: touch, the current site is not scrollable on Mobile Safari
    

Author of Polythene for Mithril,
[https://github.com/ArthurClemens/Polythene](https://github.com/ArthurClemens/Polythene)

~~~
addy_osmani
I'm almost certain our implementation isn't perfect :) We'll file bugs for the
items you called out above and try to get them fixed up shortly.

------
matthijs_
Great implementation of Material Design, the best I've seen so far. With other
material design implementations [1] I ran into problems with checkboxes,
sliders and other design choices, as well as problems on mobile. I appreciate
the design choices made for MDL. It also runs smooth on mobile and the form
elements like checkboxes and sliders work really nice.

Also, useful documentation along with codepen and easy clipboard buttons.

Following.

[1] To name a few material design examples:
[http://superdevresources.com/material-design-web-ui-
framewor...](http://superdevresources.com/material-design-web-ui-frameworks/)

~~~
TranquilMarmot
Well, it was made by Google, who originally defined Material Design in the
first place, so I'd hope it would be the best one...

------
qwreasdfkjhiouy
I have to say, I really dislike the appearance of material design.

~~~
mattmanser
The ripples drive me crazy. Everytime I click a button my mind gets yanked
into "what just went wrong?" because of the inconsistent nature of the
ripples. Even though I know it's going to happen.

------
philtar
I'm genuinely curious: This looks very lame. Why are the commenters excited?
Not trying to offend I'm mean lame as pragmatically as possible.

~~~
philliphaydon
I was thinking the same. I initially thought based on the name I could pick a
single component to use but its an entire framework, so it still suffers from
bloat.

~~~
adl
28K minified is bloat?

------
paulirish
Full site here: [http://getmdl.io](http://getmdl.io)

~~~
thirdsun
Smooth scrolling seems to be broken on iOS.

"-webkit-overflow-scroll: touch" seems to be missing on the main content if I
had to guess.

~~~
asurma
Yes, your solution is correct! I discovered this issue too late for launch,
but I have a PR open with this.

It needs some extensive testing because there _might_ be weird interactions
with our layout component and all the different header modes it has (scrolling
header, waterfall, etc). Working on it :)

edit: [https://github.com/google/material-design-
lite/pull/730](https://github.com/google/material-design-lite/pull/730)

------
Aldo_MX
I loved that in contrast with the other Material Design Toolkits, this one
uses only CSS for its animations.

~~~
andybak
Are you saying that's a good thing mainly for performance reasons?

I ask mainly because I vaguely remember someone running the numbers and
finding out that js animations surprisingly beat CSS animations in a number of
not-unrealistic scenarios.

(I know there's other reasons for favouring CSS animations)

~~~
at-fates-hands
Well, there's a slight distinction there. CSS animations are faster than
_jQuery_ which is important to remember. You can get the same boost from CSS
Animations and even better performance if you're using GSAP (Green Sock
Animation Platform) which uses Javascript to give the same benefits you see in
CSS animations.

Here's the two articles:

[https://css-tricks.com/myth-busting-css-animations-vs-javasc...](https://css-
tricks.com/myth-busting-css-animations-vs-javascript/) \- this article was
written by the author of GSAP

[http://davidwalsh.name/css-js-animation](http://davidwalsh.name/css-js-
animation)

The basic point of the article:

 _The results confirm what is widely reported on the web - CSS animations are
significantly faster than jQuery. However, on most devices and browsers I
tested, the JavaScript-based GSAP performed even better than CSS animations
(by a wide margin in some cases, like on the Microsoft Surface RT GSAP was
probably at least 5 times faster than the CSS transitions created by Zepto,
and on the iPad 3 iOS7 transforms were significantly faster when animated with
GSAP instead of CSS transitions)_

------
TheSisb2
I love the design, but I'm finding a lot of the animations aren't smooth. I'm
on Chrome 43.

~~~
addy_osmani
If there are any animations at all you find are janky, could you file and
we'll look at it soon? We've been performance testing on a wide range of
devices/browsers but I'm certain there are plenty of areas we can improve on.

~~~
TheSisb2
No problem.

------
vijayr
What are the differences between this one and
[http://materializecss.com/](http://materializecss.com/) ?

~~~
fiveseven_
Material Design Lite is released and maintained officially by Google, whereas
Materialize is by a third party

more info here: [https://medium.com/google-developers/introducing-material-
de...](https://medium.com/google-developers/introducing-material-design-
lite-3ce67098c031)

------
spoiler
I love this! I've been meaning to make something like this myself for a
project; now I won't have to.

I have to point out some flaws, though; for example the side menu here[1] has
very low text contrast once you hove over them.

[1]:
[http://www.getmdl.io/templates/dashboard/index.html](http://www.getmdl.io/templates/dashboard/index.html)

~~~
addy_osmani
Lead for MDL here. Glad you like the idea, spoiler :) Thanks for catching the
low contrast issue with the dashboard navigation - is it the same as
[https://github.com/google/material-design-
lite/issues/739?](https://github.com/google/material-design-lite/issues/739?).
If not, would you mind filing an issue on the repo and we'll try to get that
fixed up soon?

[https://github.com/google/material-design-
lite/blob/master/C...](https://github.com/google/material-design-
lite/blob/master/CONTRIBUTING.md#issue)

Alternatively, we can file a bug for you if you share details about the
browser/os/device you were testing on.

~~~
spoiler
I was just leaving work when I wrote that; I was on my way to do it now, but
then I saw someone already opened an issue.

Keep up the great work! :D

cc: @Zikes @asurma

------
freyr
The Material Design Lite website
([http://www.getmdl.io](http://www.getmdl.io)) breaks scroll behavior on
mobile Safari.

If you're promoting a UI/UX product, you really shouldn't be bungling
scrolling. Because if you can't get your own site working well, I'm not
trusting your libraries on my site.

~~~
asurma
We just rolled out a fix for that :)

------
bikas
Ohh the BEM bummer. All those __ and -- makes my eye hurt. Write decent line
of code in HTML file with BEM classes and it looks worse than inline styles
(visually). For the rest of library, I'm still trying and testing, but I don't
think I'll be moving any of my main projects to this library because of BEM.

------
ConAntonakos
Thank you for this. I still feel like the Material Design implementation
within Polymer is rough around the edges. Having issues with Firefox, for
example, in terms of optimization and documentation is still very incomplete.
Looking forward to working with both libraries, though!

------
shenzhuxi
I've moved my project
[https://github.com/shenzhuxi/readiator](https://github.com/shenzhuxi/readiator)
from Onsen UI to Material Design Lite. Looking forward modal component.

------
LoSboccacc
Outstanding library. I like this version of material more than the other with
polimer that's completeley flat.

There are some issues with scrolling in general and with scrolling with
tooltips open on ios, but will follow and see if they eventually get around
those.

------
gbrits
Rigorous implementation of the specs, with well managed css (BEM) to boot.
Render me excited!

------
_ari
If only this had dropdown/selection menus. I probably would have used it in a
project.

~~~
pan69
Agreed. This project is awesome but without usable form elements (there's more
to forms that text fields) this isn't really usable for anything a little more
complex.

------
rtpg
Is it just me or do a lot of these components lack the depth perception aspect
of other material design things?

Depth is such an important part of the nice look of Material Design that not
having it seems like a big mistake

------
ranyefet
It's looks great. Nice job! One problem I had with site is that the scrolling
is unusable on mobile safari. Would be great if you could fix that.

~~~
asurma
Sorry it’s making the site unusable. Fix is incoming. See @thirdsun’s comment
and my answer for details.

------
applecore
It'd be great to see this work with Bootstrap.

~~~
JohnTHaller
Check out Material Design for Bootstrap:
[https://fezvrasta.github.io/bootstrap-material-
design/](https://fezvrasta.github.io/bootstrap-material-design/)

------
Animats
Is there a site using this does something useful and is better than a vanilla
site? One that isn't a portfolio, resume, demo, or Material Design promotion?
There's a site of "15 awesome examples"[1], but they're mostly promotions for
material design, or very basic sites.

[1] [http://materialdesignblog.com/15-awesome-examples-of-
materia...](http://materialdesignblog.com/15-awesome-examples-of-material-
design-done-right/)

------
tyingp
Why do tooltips look exactly like buttons? I see end users haplessly clicking
on tooltips, waiting for something to happen.

------
neya
Wow, this is really nice, considering the fact that it's coming directly from
Google. However, I really urge you to also try the Material Design theme from
Semantic UI framework - I can tell you honestly that I haven't seen a
framework as comprehensive and elegant as it. It's a pleasure to not having to
write a custom class because what you want is already provided by the
framework in some form or the other. Just my humble opinion.

------
moeedm
Material Design is the new Bootstrap.

~~~
ConAntonakos
Perhaps! At the same time, it's great that there are more options for those
who need help with design! ;)

------
mistborn1991
Thanks alot for sharing it.

~~~
urbanvikingr
Material Design Lite is the framework that is most true to MD guidelines and
requires less code to implement. That being said, it is still early in
development.

I tried Polymer for 6 months ago. It looked, but it was every early, and I was
developing with Angular. Later, I switch to React which is a better fit for me
than Angular. But I still wanted MD, so I tried both Material_UI and
Materialize. Material-UI is a React implementation of MD and Materialize uses
jQuery. I quickly discarded them. MDL is as the name says very small and
mostly built with CSS. You can customize the CSS classes easy, if you need to.
I like BEM. It might be difficult for some to use, but long-term in large
production apps, it is great for easy maintenance.

I encourage everyone that like MD to try it out and file issue requests for
bugs or feature requests if you are missing something.

