6 ms·

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

by dstaley 11y ago

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.

addy_osmani 11y ago
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.
- dominotw 11y ago
  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 .
- Akkuma 11y ago
  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.
spankalee 11y ago
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 11y ago
  Most of my apps are built with Ember, and I just haven't quite figured out how to marry them both.
  - dominotw 11y ago
    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.
    - dstaley 11y ago
      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.
    - pfooti 11y ago
      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-and-contenteditable-isnt-supported-under-shadow-dom- https://github.com/webcomponents/webcomponentsjs#execcommand... 2:https://www.polymer-project.org/1.0/docs/devguide/local-dom.html https://www.polymer-project.org/1.0/docs/devguide/local-dom....

by dstaley 11y ago

addy_osmani 11y ago

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.

dominotw 11y ago
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 .
Akkuma 11y ago
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.

spankalee 11y ago

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 11y ago
Most of my apps are built with Ember, and I just haven't quite figured out how to marry them both.
- dominotw 11y ago
  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.
  - dstaley 11y ago
    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.
  - pfooti 11y ago
    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-and-contenteditable-isnt-supported-under-shadow-dom- https://github.com/webcomponents/webcomponentsjs#execcommand... 2:https://www.polymer-project.org/1.0/docs/devguide/local-dom.html https://www.polymer-project.org/1.0/docs/devguide/local-dom....