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.
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.
Any idea when we can expect these to make it to polymer 1.0.
Basic components like dropdowns/cards are missing atm .
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 want web components to be a thing but Polymer is not the path forward in its current state.
The blog post mentions speedups in Chrome and Safari. It does not mention Firefox.
You don't have to do anything special.
1. import polymer html file
2. use it
thats all there is to it.
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 , you must do all DOM manipulation via polymer's local DOM api, in order to properly distribute dom elements.
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.
"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)
- 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
Also, useful documentation along with codepen and easy clipboard buttons.
 To name a few material design examples: http://superdevresources.com/material-design-web-ui-framewor...
I tried to use colleague's android and I found it unintuitive to use too (it wasn't obvious what elements you can interact with, and animations were annoying).
(I'm a WP user and it's THE UI I like best.)
I prefer the material design in Android 5+. And I like the iOS 7+ design and Win7 Aero design. But I cannot live with the ModernUI of Win8/XboxOne - who choose those ugly colors?
"-webkit-overflow-scroll: touch" seems to be missing on the main content if I had to guess.
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 :)
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)
Here's the two articles:
https://css-tricks.com/myth-busting-css-animations-vs-javasc... - this article was written by the author of GSAP
The basic point of the article:
more info here: https://medium.com/google-developers/introducing-material-de...
I have to point out some flaws, though; for example the side menu here has very low text contrast once you hove over them.
Alternatively, we can file a bug for you if you share details about the browser/os/device you were testing on.
Keep up the great work! :D
cc: @Zikes @asurma
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.
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.
Depth is such an important part of the nice look of Material Design that not having it seems like a big mistake
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.