Material Design Lite Components in HTML/CSS/JS (opens in new tab)

I was overall impressed with what I saw, but when I saw the amount of classes required to achieve a simple button my jaw hit the ground at the level of commitment to BEM that bordered on what I'd consider absurd. To be fair, one could create their own snippets in an editor or in the case of React their own components to remove the need for all the boilerplate.

Now, a simple question is why would I want to use this over materializecss.com? I saw this from the FAQ:

>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’.

It doesn't specifically point out what these guys are doing wrong and I personally can't see much that is being done differently. Are there any specific examples you can point me toward?

Why make a completely new project rather than working with the communities out there? If the spec is too liberal it should be updated and issues posted under these projects, so these projects can properly follow the spec, unless they specifically choose to deviate from it.

Great work Addy!!. This made my day.

Any idea when we can expect these to make it to polymer 1.0. Basic components like dropdowns/cards are missing atm .

As someone who used polymer/paper-elements recently in a project, these are some downsides:

1. The whole design guide is not implemented (date picker for example)

2. Web components polyfill while pretty fast still slows things down a bit

3. Extra effort required to debug/style components (shadow DOM)

4. It's still fairly bleeding edge, not for the faint of heart

5. Vulcanizing required for assets to avoid hundreds of imports/requests

These are some of the factors that would make me reconsider using it on another project. It still turned out very nice for the project however.

I've used Polymer in two projects now. It's simply not ready for real production use in my opinion. Too many issues overriding / styling their components (modal is awkward as hell to style the content) and it's simply too slow on start-up. Firefox literally freezes for many seconds to load several components (chrome doesn't but it's still not very fast).

I want web components to be a thing but Polymer is not the path forward in its current state.

Tried Polymer in a recent project for a basic social webapp last month. Within 2 days we found ourselves reading github issues about to-be-released customization options - options that we needed. The basic features are present alright, but the customization options aren't enough. Integrating modals with custom scrolling, wanting more than 5 options for spacing in the header - why give yourself a hard time when materialize and foundation are waiting with their arms open?

What's keeping me from using Polymer is that nobody can tell me if Web Components is going to last. In fact, I don't know what's even in the running anymore.

I was considering using Polymer. It worked great in Chrome. Then I tried using it in Firefox. It took a whole extra 1 second longer for Polymer to bootstrap itself on every page load, even when all assets were cached.

The blog post mentions speedups in Chrome and Safari. It does not mention Firefox.

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

No problem.

See @thirdsun’s comment :)

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

28K minified is bloat?

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

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... - this article was written by the author of GSAP

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)