Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Material Design Lite Components in HTML/CSS/JS

github.com

Post reply on HN
Print view View original

31–40 of 77 posts

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

#31

Post by TranquilMarmot »

matthijs_ wrote: post #28

Great implementation of Material Design, the best I've seen so far. With other material design implementations [1] I ran into problems with checkboxes, sliders and other design choices, as well as problems on mobile. I appreciate the design choices made for MDL. It also runs smooth on mobile and the form elements like checkboxes and sliders work really nice. Also, useful documentation along with codepen and easy clip…

Well, it was made by Google, who originally defined Material Design in the first place, so I'd hope it would be the best one...

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

#32

Post by at-fates-hands »

andybak wrote: post #11
Aldo_MX wrote: post #5

I loved that in contrast with the other Material Design Toolkits, this one uses only CSS for its animations.

Are you saying that's a good thing mainly for performance reasons? 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)

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)

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

#33

Post by ArthurClemens »

Great news that Google has started this library. This will help MD implementors like me.

"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)
On the website:

  - 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
Author of Polythene for Mithril, https://github.com/ArthurClemens/Polythene

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

#34

Post by LoSboccacc »

Outstanding library. I like this version of material more than the other with polimer that's completeley flat.

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.

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

#37

Post by addy_osmani »

dstaley wrote: 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.

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

#38

Post by addy_osmani »

ArthurClemens wrote: post #33

Great news that Google has started this library. This will help MD implementors like me. "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…

I'm almost certain our implementation isn't perfect :) We'll file bugs for the items you called out above and try to get them fixed up shortly.

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

#39

Post by spankalee »

dstaley wrote: 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.

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

#40

Post by dstaley »

spankalee wrote: post #39
dstaley wrote: 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.

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