Live data from Hacker News

Material Design Lite Components in HTML/CSS/JS

github.com

41–50 of 77 posts

Re: Material Design Lite Components in HTML/CSS/JS

#41
post #40

Earlier quoted context omitted.

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.

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

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.

Re: Material Design Lite Components in HTML/CSS/JS

#42
post #24

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…

Thanks for the feedback. We used BEM as we find it helps with the long-term maintainability of CSS/SASS codebases (there's also copy/paste support on all of our snippets). That said, if you find the use of BEM a turn-off, we welcome folks just taking our styles and adapting them to the naming scheme that makes most sense for them. Anything that helps.

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 .

Re: Material Design Lite Components in HTML/CSS/JS

#45
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...

Re: Material Design Lite Components in HTML/CSS/JS

#46
post #40

Earlier quoted context omitted.

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

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.

So, how do I pass a model into a component? Bubble an action out of it? It's the integration with Ember that I want.

Re: Material Design Lite Components in HTML/CSS/JS

#47
post #40

Earlier quoted context omitted.

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

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.

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

2:https://www.polymer-project.org/1.0/docs/devguide/local-dom....

Re: Material Design Lite Components in HTML/CSS/JS

#48
post #24

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…

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.

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.
Post reply on HN