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

21–30 of 77 posts

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

#21

Post by asurma »

thirdsun wrote: post #18
paulirish wrote: post #2

Full site here: http://getmdl.io

Smooth scrolling seems to be broken on iOS. "-webkit-overflow-scroll: touch" seems to be missing on the main content if I had to guess.

Yes, your solution is correct! I discovered this issue too late for launch, but I have a PR open with this.

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 :)

edit: https://github.com/google/material-design-lite/pull/730

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

#24

Post by dstaley »

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.

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

#26

Post by asurma »

ranyefet wrote: post #23

It's looks great. Nice job! One problem I had with site is that the scrolling is unusable on mobile safari. Would be great if you could fix that.

Sorry it’s making the site unusable. Fix is incoming. See @thirdsun’s comment and my answer for details.

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

#27

Post by mattmanser »

qwreasdfkjhiouy wrote: post #14

I have to say, I really dislike the appearance of material design.

The ripples drive me crazy. Everytime I click a button my mind gets yanked into "what just went wrong?" because of the inconsistent nature of the ripples. Even though I know it's going to happen.

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

#28

Post by matthijs_ »

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

Following.

[1] To name a few material design examples: http://superdevresources.com/material-design-web-ui-framewor...

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

#30

Post by fiveseven_ »

vijayr wrote: post #20

What are the differences between this one and http://materializecss.com/ ?

Material Design Lite is released and maintained officially by Google, whereas Materialize is by a third party

more info here: https://medium.com/google-developers/introducing-material-de...

Post reply on HN