Hacker News new | ask | show | jobs
Google Material design framework (leaf.kortes.se)
38 points by kortes 4365 days ago
7 comments

This isn't really material, but more of a "I've copied the colors and misused them."

A huge part of material is animations and behaviors and this doesn't have it. Simplest example is buttons. Go to http://www.google.com/design/ and over over the more button (or anything else that's clickable). You'll see it elevate a bit as if to come up and meet your cursor. Compare that to the buttons from the toolkit.

Conceivably a company could spend a million dollars on implementation and upkeep without using a pre written framework. The amount of detailed rules and yes/no's really is excessive. Besides telling designers animation acceleration behaviors it includes specifications on what kind of photographs are acceptable or not.

Just like a religion telling people how, what, and when to eat the whole thing almost comes across as a compliance test. It is more absurd because user interface design is art. It is also a fundamental piece of branding: how magazines, web sites, and software communicate their differentiations to their user base.

As someone who pays a hell of a lot of attention to user interface design, and has run continuous A/B tests for years to millions of people, some of the elements are questionable. If you implement them you will confuse a sizable number of users. It looks good, but does not come across as one of those things like where Google tests multiple shades of a single color to see which works the best.

I agree. But you gotta start somewhere. The first step is to just recreate the components.

Feel free to contribute with your ideas and add some neat CSS3 animations to the framework.

Have you looked into the polymer elements http://www.polymer-project.org/docs/elements/? I'm not sure if it would be against the license, but in principle they have a complete implementation of the material design that could be extracted as a separate css-only framework.
Polymer is licensed under BSD so it shouldn't be hard at all to do that and comply.
There's already a full implementation here: http://www.polymer-project.org/docs/elements/paper-elements....
Yes, but AFAIK it's polymer-specific
Yes, they're implemented with Polymer, but that does not mean they're "Polymer specific". You can use them in any HTML page - just import the element, and use it. This is the promise of web components.
Not really, all the css stylesheets are there and could easily be extracted.
Material design is more than just the colors, shadows and spacing, its also the animations and interactions.

This CSS framework fails to replicate things like "ink" that fills an element with a tap color based on where in that element you tapped.

Or the way that a block of color slides across the input when you focus it and the placeholder slides up and scales down to turn into a label.

Material design is not a CSS theme, it requires many other interaction and animation aspects that the Polymer project is building out with their paper-* components.

I'm aware of that, all I was saying is that hypothetically it would be possible to dismember the polymer components in separate pieces of javascript / css / html and replicate the behaviour in this way. I'm not sure why someone would want to do that, but just studying the implementation might be interesting to someone new. The paper-components seem very well designed.

In any case it does make way more sense than trying to replicate the design on your own and reinvent the wheel. Especially since there is nothing particularly creative in copying the design of someone else.

Their implementation does not only consist of CSS - there is canvas, shadow DOM, and other areas that are all heavily intertwined with Polymer, which would make extracting it difficult and complex.
Would be cool to have all Metro/ios/Google design styles merged to one Bootstrap theme and then just on some LESS or JS I could switch view to different device.
Came here to say that. In fact I was searching right when Material was announced.
i really really wish this is on bootstrap. why reinvent the wheel? why not enhance it?
Why would it use bootstrap ? It doesn't make sense to use it when you know exactly how things are supposed to look and looks are quite different (inputs for example).

Having more choices is nicer.

Couldn't somebody just as easily just build a Bootstrap theme built off of Google's Material Design principles? Hell, you actually just gave me an idea, haha.
Good try but really not material design at all?...
I'm so meh about this.