Live data from Hacker News

Material Design Lite Components in HTML/CSS/JS

github.com

61–70 of 77 posts

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

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

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

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

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.

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

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

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.

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

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

You might be interested in ember-paper and ember-cli-materialize if you are looking at Material + Ember.js

- https://github.com/miguelcobain/ember-paper

- https://github.com/truenorth/ember-cli-materialize

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

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

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?

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

#66
The Material Design Lite website (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.

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

#67
post #66

The Material Design Lite website ( 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.

Haven't you heard, Safari is the new IE.

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

#68
post #49

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.

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.

28K minified is bloat?

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

#69
post #66

The Material Design Lite website ( 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.

We just rolled out a fix for that :)
Post reply on HN