4 ms·

Google Material design framework

38 points by kortes 12y ago

CmonDev 12y ago
The source of Google's inspiration for reference: http://aozora.github.io/bootmetro/docs/docs-index.html http://aozora.github.io/bootmetro/docs/docs-index.html http://metroui.org.ua http://metroui.org.ua
hamidpalo 12y ago
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/ 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.
- kortes 12y ago
  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.
  - orbifold 12y ago
    Have you looked into the polymer elements http://www.polymer-project.org/docs/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.
    - rictic 12y ago
      Polymer is licensed under BSD so it shouldn't be hard at all to do that and comply.
- AJ007 12y ago
  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.
nubela 12y ago
i really really wish this is on bootstrap. why reinvent the wheel? why not enhance it?
- Keats 12y ago
  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.
- viiralvx 12y ago
  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.
spankalee 12y ago
There's already a full implementation here: http://www.polymer-project.org/docs/elements/paper-elements.html http://www.polymer-project.org/docs/elements/paper-elements....
- marcoms 12y ago
  Yes, but AFAIK it's polymer-specific
  - orbifold 12y ago
    Not really, all the css stylesheets are there and could easily be extracted.
    - ryanwatkins 12y ago
      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.
      - orbifold 12y ago
        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.
    - marcoms 12y ago
jpkeisala 12y ago
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.
- visarga 12y ago
  Came here to say that. In fact I was searching right when Material was announced.
NathanCH 12y ago
I'm so meh about this.
the906 12y ago
Good try but really not material design at all?...

38 points by kortes 12y ago

The source of Google's inspiration for reference: http://aozora.github.io/bootmetro/docs/docs-index.html http://aozora.github.io/bootmetro/docs/docs-index.html http://metroui.org.ua http://metroui.org.ua

hamidpalo 12y ago

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/ 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.

kortes 12y ago
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.
- orbifold 12y ago
  Have you looked into the polymer elements http://www.polymer-project.org/docs/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.
  - rictic 12y ago
    Polymer is licensed under BSD so it shouldn't be hard at all to do that and comply.
AJ007 12y ago
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.

nubela 12y ago

i really really wish this is on bootstrap. why reinvent the wheel? why not enhance it?

Keats 12y ago
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.
viiralvx 12y ago
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.

spankalee 12y ago

There's already a full implementation here: http://www.polymer-project.org/docs/elements/paper-elements.html http://www.polymer-project.org/docs/elements/paper-elements....

marcoms 12y ago
Yes, but AFAIK it's polymer-specific
- orbifold 12y ago
  Not really, all the css stylesheets are there and could easily be extracted.
  - ryanwatkins 12y ago
    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.
    - orbifold 12y ago
      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.
  - marcoms 12y ago

jpkeisala 12y ago

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.

visarga 12y ago
Came here to say that. In fact I was searching right when Material was announced.

NathanCH 12y ago

I'm so meh about this.

the906 12y ago

Good try but really not material design at all?...