

Google Material design framework - kortes
http://leaf.kortes.se/

======
hamidpalo
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
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
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
Polymer is licensed under BSD so it shouldn't be hard at all to do that and
comply.

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

~~~
marcoms
Yes, but AFAIK it's polymer-specific

~~~
orbifold
Not really, all the css stylesheets are there and could easily be extracted.

~~~
ryanwatkins
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
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.

------
jpkeisala
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
Came here to say that. In fact I was searching right when Material was
announced.

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

~~~
Keats
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.

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

------
NathanCH
I'm so meh about this.

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

