nt1m / material-framework

[Unmaintained] An easy to use material design based framework.
http://nt1m.github.io/material-framework
MIT License
388 stars 86 forks source link

Add more components #21

Open nt1m opened 10 years ago

nt1m commented 10 years ago

http://www.google.com/design/spec

Remaining items : P1 :

P2 :

PalmerAL commented 9 years ago

The contact chips are really a js component. These are inserted into a text field, so this would need to integrate with some kind of tag field library.

PalmerAL commented 9 years ago

Also, spinners don't really need any js. something like http://codepen.io/kevinfarrugia/pen/EaPQNX/ maybe

nt1m commented 9 years ago

@PalmerAL You're right, fixed. For the spinner, I found this interesting article : https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html

PalmerAL commented 9 years ago

That would probably work. Also, google drive uses a material design spinner that (appears to be) entirely css and might have better browser support (though I haven't really looked into how it works there very much)

PalmerAL commented 9 years ago

If I understand correctly, the sliding placeholder on inputs don't need js either - see http://css-tricks.com/float-labels-css/

nt1m commented 9 years ago

@PalmerAL, for the spinner, I'd like to have the minimum of elements required, not too much children would be nice. I bet Google drive uses lots of children elements.

For the sliding placeholder, I know the technique already, but I'd like to avoid using the :valid hack, since it won't work perfectly in various form validation cases (number inputs, pattern attribute, ...), in those use cases, the label will appear behind the entered text if the input isn't valid. The JS is going to be tiny, but it's needed to get a perfect experience.

PalmerAL commented 9 years ago

I've started working on the sidemenu component, so far, I have this: screen shot 2015-02-20 at 6 12 18 pm

However, I can't find anything in the spec about this component. Do you know where the documentation for this is located?

nt1m commented 9 years ago

@PalmerAL Nice work ! Here's the spec from Google : http://www.google.com/design/spec/patterns/navigation-drawer.html Strangely, it's located in Patterns instead of Components.