12 ms·

Material UI

386 points by eskimobloood 12y ago

NewsReader42 12y ago
Can't even click the links down the RHS in the demo. (FF 33.0.2)
- amatera 12y ago
  Me too on FF 33.0.3 (MAC OS).
  - kissickas 12y ago
    Nor on FF 33.0.3 Windows.
vanderZwan 12y ago
http://material-ui.com/#/components/buttons http://material-ui.com/#/components/buttons Aaaand the first three buttons are hidden until you hover over them. How visual designers keep making mistakes like this in the age of mobile browsing is beyond me. EDIT: As has been pointed out to me below, they have their use-cases. I still wouldn't put them as the first shown option though - they're not exactly the sensible default fall-back. Also, the menu doesn't work on my Firefox Aurora browser.
- mateuszf 12y ago
  Also doesn't work for me in regular Firefox 33.0.3 (OSX).
  - deskamess 12y ago
    Same issue here, but on Win8.
- treerock 12y ago
  Google's design guidelines advise using flat buttons "for contexts such as toolbars and dialogs to avoid gratuitous layering". Seems to me there may be cases where they are useful. http://www.google.co.uk/design/spec/components/buttons.html#buttons-flat-raised-buttons http://www.google.co.uk/design/spec/components/buttons.html#...
  - vanderZwan 12y ago
    Fair enough. I still think putting them first is sending the wrong signal though: using a flat UI should be a deliberate, carefully evaluated choice (like the example you gave). Not the default.
- smrtinsert 12y ago
  You would understand them once they are correctly placed visually. Isolated they do look incorrect.
- Aardwolf 12y ago
  Confirmed: menu doesn't work in firefox, so I can only see the first demo (buttons). Clicking "Dialog" or other demos on the left does nothing.
joshkpeterson 12y ago
Layout is broken on my android phone.
- AlexMuir 12y ago
  And completely unusable on iPhone.
rpwverheij 12y ago
this is a nice start of a cool and handy tool. As someone who recently got into React, browserify and uses less by default, I really apreciate people making libraries like this and will probably try using this at some point. Yes, as others seem to note aswell, it needs some work finetuning and improving (are buttons in the dialog supposed to have no borders?). But I think it's a very nice initiative, thank you.
colinramsay 12y ago
The comments thus far are disappointing. People go to the trouble of making a pithy comment on hackernews, but surely since many of us here are developers we understand the frustration of bad bug reports. Is it so hard to bottle up your negative comments and spend another two minutes doing something constructive - like heading over to github and adding an issue with your system specs?
- eps 12y ago
  These comments are as constructive as it gets - test your shit before submitting it for a public review or clearly state that it wasn't tested outside that one Mac it was written on. I would rather not see HN turn into a sloppy developers support group, though it is already part way there.
- tjelen 12y ago
  Well, I think it should be at least marked as a work-in-progress. Because right now it looks like it's a production-ready framework, and yet people are reporting that it doesn't work on major platforms.
- rattray 12y ago
  Heading over to github would help the project, it is true. But HN isn't only a place where people come for help. It's also a place where people come to share. And when low-quality (or not-yet-production-ready) work is shared, it's important that we let each other know that. Especially when the site seems to imply it's "ready", as this one does.
- ohyesyodo 12y ago
  I visited the site on my Windows Phone 8.1, and the page is rendered incorrectly. There's white text on white background, different text sections overlapping eachother, columns being one word wide and lot of more things. According to other comments here, it is unusable on iphone and broken on android as well. According to issues in their tracker, it does not work on Windows 8/Firefox and Ubuntu/Firefox. It also renders incorrectly on Chrone om Windows 8 (on my laptop, at least). If you're creating a new CSS framework, publish it and fail to mention that it's work in progress and it only works on a limited set of platforms (like what), you have wasted my time. I really hope developers doesn't expect to only get constructive feedback when doing something like that.
CmonDev 12y ago
Nice play on Microsoft's Metro/Modern UI! I couldn't find the tiles however and they seem to be abandoned in the original documentation (called "cards" for some reason :S): http://www.google.com/design/spec/components/cards.html# http://www.google.com/design/spec/components/cards.html#
- seanmcdirmid 12y ago
  > couldn't find the tiles however So you mean, not Metro at all right?
  - CmonDev 12y ago
    There used to be in the original copy, here is a saved image at the top: http://www.eyeonwindows.com/2014/06/25/googles-material-design-language-is-strangely-similar-to-metro http://www.eyeonwindows.com/2014/06/25/googles-material-desi... Maybe they couldn't reconcile them with other alterations or are simply trying to respond to criticism.
    - seanmcdirmid 12y ago
      Interesting, I've never seen tiles in material design before, like I've never seen depth (shadows) used in metro.
    - Geee 12y ago
      That image has nothing to do with material design and cards have nothing to do with tiles. It's very far-fetched to even suggest that Material design and Metro UI are even remotely similar.
      - guardian5x 12y ago
        There are not similar, but there are similarities. The way the controls are designed, the flat style, the whole content-first approach, and giving the content space to breath.
nicgutierrez 12y ago
Very good job indeed. I think it's a good implementation of Material Design. (PS: works just fine on Chrome.. I like all the smooth animations!)
kellros 12y ago
Looks pretty good, I'm a big fan of the placeholder without input -> label + description when active -> label with input style.
dickvdbrink 12y ago
Nice, really like the `input` demo, looks really slick!
matthewmacleod 12y ago
Needs a huge amount of work before it's usable, but it's nice to see this being implemented.
supercoder 12y ago
Sorry but this looks like a huge mess on iOS
- twelvechairs 12y ago
  It looks like a huge mess on Firefox/android too
maga 12y ago
Is anyone working on pure CSS theme/framework with Material UI?
espadrine 12y ago
This is my first introduction to Material Design. I am confused about an aspect of it. Here[0], we see two separate cards next to each other, with the same dimension, but at a different elevation. As a result, one casts a larger shadow. Here[1], they specify that "Shadows are never approximated using material". Wouldn't that require that one of those two cards with the same dimension appear to be larger, since it is closer to the eye? What do they mean by that rule? [0]: https://www.google.com/design/spec/what-is-material/objects-in-3d-space.html# https://www.google.com/design/spec/what-is-material/objects-... [1]: https://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-physical-properties https://www.google.com/design/spec/what-is-material/material...
franze 12y ago
http://material-ui.com/#/components/dropdown-menu http://material-ui.com/#/components/dropdown-menu really? how can this be good usability. it's text and an arrow far, far away. this could be anything and does not in any way imply any kind of select action. if this is really implemented after the material design spec of google, than oh man, google really has an issue.
- dingaling 12y ago
  > it's text and an arrow far, far away. That's an arrow? I just see a Unicode failure-box :( That's one of the problems with the trend of icons-as-fonts, when they fail there's no reversion mode for users to understand what the glyph is supposed to be. planefinder.net is a canonical example, without the correct font none of their on-screen controls make any sense.
  - coldpie 12y ago
    Well, the font is usually provided by the website. Your client is being prevented from using the provided font for some reason.
- notastartup 12y ago
  The dropdown also caught my attention it seems like it's a bit of a distance from the traditional dropdown in a sense that I think some users will have some trouble with actually realizing that it's a dropdown. Another complaint is the checkbox, there's no way to tell once something is checked off whether it's a picture or a form.
  - clay_to_n 12y ago
    Agreed with this. In Android's Material spec (as well as the Android 5.0 implementation) you can always tell it's a checkbox. However, in Google's Polymer project, the box totally transforms, as in material-ui. :/ Ex) http://material-design.storage.googleapis.com/publish/v_1/quantumexternal/0Bx4BSt6jniD7YUQ5TEFVT3ZJQjg/components_listcontrols_checkbox2.png http://material-design.storage.googleapis.com/publish/v_1/qu...
rattray 12y ago
I was recently looking into libraries to use Material Design with React.js. I found the material-ui project to be implemented less well than this one: http://sanderspies.github.io/react-material/ http://sanderspies.github.io/react-material/ (though I have my reservations about the approach taken here, too -- and it's less complete).
- ssp_ 12y ago
  react-material is mostly an experiment to use react-style (CSS written in JS). Unfortunately I do not have enough free time to give react-material the right attention, so I wouldn't recommend using it for now.
igl 12y ago
I like these small frameworks. Bootstrap is almost a little too big for my taste. You end up having custom builds which are hard to maintain and update. New frameworks like semantic-ui make the mistake and are even bigger and more interwoven with js code. Fluff that! I really don't need 5 variations of every component! And drop your icon library into a seperate project! So i can choose between font-awesome, boostrap-gylphs or this MUI-Icon set. FA-like is the way to do it.
swah 12y ago
Looks good, but the transition delays are long.
notastartup 12y ago
I really like it. It's very different from what we have. I guess it makes sense (it is google after all). One complain I have is that it's so cosmetic, feminine almost, but I guess that's the color scheme.
TeeWEE 12y ago
While I like the project and effort put into this, I think, if you considering using this project, you should also look at google's own polymer project. Its based on the industry standard web-components. https://www.polymer-project.org/ https://www.polymer-project.org/ React is using "virtual dom" which is kind of a hack to support web-components kind-of technology. Since the technology is currently here, i would recommend using it, and not using React. However a consideration is also browser support. I'm not sure if polymer is production ready.
- dimsuz 12y ago
  Can't vote this comment down (not enough karma?), but I would. React is great library, it is not very constructive to call it a hack just because webcomponents are there.
  - TeeWEE 12y ago
    I'm not saying React is a hack. I'm saying that all libraries that try to provide true "web components" that hide their implementation details for the user, are only achievable trough a "shadow dom" implementation in the browser. Thats just a fact, based on how browser work. With the shadow-dom, customer elements, and templating you can achieve true componenets, like in uix toolkits such as Android, iOS and Java Swing.
- colinramsay 12y ago
  Is this correct? React doesn't use the virtual DOM to create HTML-like elements, it uses JSX for that, and JSX is optional. As far as I know the virtual DOM is used to avoid updating the "real" DOM in the browser when you don't have to.
  - marknutter 12y ago
    React does use a virtual DOM, namely so that it can efficiently track changes to the DOM. That's different than the shadow DOM that web components use, though, where they have their own sandboxed DOM that's completely isolated from the parent DOM.
prawn 12y ago
A few things looked slick but not particularly usable, but I found the flare animation on-click got old (and a bit slow) after a while. Might be worth toning that down a bit?
akrymski 12y ago
I've never been a fan of material design and surely hope it doesn't become a standard. Design guidelines from a company that is widely known not to care about design? No thanks. Even Google Inbox shows how engineering-driven everything is at Google - the navigation is completely unorthodox (going back = drag down), like someone above decided "this is the way we do everything from now on" and nobody had the balls to question 'em. I'd never accept Microsoft's design guidelines or Google's. If you truly care about design, you'd stick to Apple's or develop your own, which frankly isn't too hard in CSS anyway, and it means you aren't tied to a particular OS feel or a big-corp policy.
tomelders 12y ago
I had a talk with myself at the weekend about making a concerted effort to cut out the snark when I comment on the web.... And I'm about to fall at the first hurdle. Being "on trend" isn't good UI design. But I can see how we got here. Through OS X and iOS, Apple's UI ethos became the gold standard in UI design. It was so well designed that it was easy to imitate and by simply adopting the core elements of Apples UI language, stuff became intuitive and usable without the designer needing to understand "why" something looked the way it looked. And then came a new trend, the current trend, that appears to me to be rooted in nothing more substantial than a desire to replace the old with something new at all costs. And when the likes of Apple and Google fall for the same trap, it's nigh on impossible for fundamental UI design knowledge to make itself heard above the noise of a million designers advocating the new and pointing to Apple for credibility. You can see that I don't like Material. I also don't like iOs's new UI language. It doesn't work. Ive seen no evidence that it's any more useable and I struggle everyday to make sense of software and tools that have adopted these new trends so anecdotally, I have to say to myself that we're going the wrong way.
- davedx 12y ago
  I don't find this post snarky, but from a usability point of view I'd love to hear specifics about where you think these designs fail?
  - sucramb 12y ago
    I feel like the same as OP. Change for the sake of change without any real benefits. But with plenty of draw-backs. For example the new Gmail App on Android now uses an almost unreadable font in the overview. It is "designy" but not good for usability - and I still have 100% eye sight. In general I feel like surrounded by the Microsoft paper clip. There is constantly something animating, popping up or popping with strong colors into your eyes. Try to find in all the talk about material design the underlying reasons for usability. There aren't any. To me it feels like the emperor's new cloths. I was about to buy a Nexus 6 but the new Gmail app is a no go for me and I will avoid it as long as possible.
    - 12y ago
corford 12y ago
Bug report: If I follow the "Demo" link from the homepage, the first demo ("Buttons") works but clicking on any of the others (via the left hand menu) e.g. "Dialog" doesn't do anything. No obvious errors in the console. I'm using FF 33.0.3 on Win7. Edit: looks promising though - just get them bugs ironed out! :)
- regularfry 12y ago
  Same here, iceweasel 33.0 on Debian Wheezy.
  - hutattedonmyarm 12y ago
    Works for me, Safari 8.0 ons OS X 10.10
- dimsuz 12y ago
  Me too. FF 33.0.3 Linux
- subir 12y ago
  Same here. Try these: http://material-ui.com/#/components/left-nav http://material-ui.com/#/components/left-nav http://material-ui.com/#/components/inputs http://material-ui.com/#/components/inputs http://material-ui.com/#/components/dropdown-menu http://material-ui.com/#/components/dropdown-menu http://material-ui.com/#/components/icons http://material-ui.com/#/components/icons You get the idea.
- kunstmord 12y ago
  Same, FF 35.0a2 on OS X 10.9.
- KobaQ 12y ago
  Same here, FF 33.0.3, Win 8.1 ... After having seen the buttons, I've seen enough. I'm not bought so far.
- Sir_Cmpwn 12y ago
  This is a big issue. Cross-browser compatibility is extremely important for anything like this that wants to be taken seriously.
deleted 12y ago
[deleted]
uxwtf 12y ago
I like the animations, inputs are really what I need today for my UI designs. Checkboxes have different styles in Chrome and Safari. Safari checkboxes look a bit weird as in unchecked mode a rotated green tick is displayed inside a checkbox, and in checked mode one of the tick's lines extends horisontally. In Chrome the checkbox looks really nice though.
- 0942v8653 12y ago
  OK, I'm glad they didn't actually intend to have the checkboxes look like that :)
alexweberk 12y ago
I hope they do away with the flare effect on button clicks. Just weird...
- zorbo 12y ago
  It's not just weird. Every click on any item now takes approximately 1 second longer.
igravious 12y ago
Is there a way that I can use this as a drop-in replacement to Bootstrap or on top of Bootstrap? If not, what would be the easiest way to re-skin a project that currently Bootstrap to use this? Then I could have Facebook/Google/Twitter design and coding chops baked in :)
spain 12y ago
Doesn't seem to embody the principles of Material Design other than the flat design and use of colors. For example for the dialog[0] when you click it it just appears out of nowhere instead of sliding in or expanding out from the button. Material Design isn't only about everything being flat but there being good animations to make transitions clear. I wonder what Google's design team thinks of all these creations masquerading as "Material Design." [0] http://material-ui.com/#/components/dialog http://material-ui.com/#/components/dialog
- calinet6 12y ago
  It highlights the fact that it actually takes a lot of work to do all of these details and get the UI right, and if you miss one or two, it really doesn't hold up. Something we should all take to heart. Not many design frameworks have such complete and irreducible properties. The Material design guidelines and (good) implementations so far are really very impressive.
flavj 12y ago
I have been using the angular team's material design project[0] with great success. "This project is still in early preview."[1] Worth keeping an eye on if you are working on any angular projects. Not to take away anything from OP's, I feel their implementation of material is a little closer to the mark. [0]https://material.angularjs.org https://material.angularjs.org [1]https://github.com/angular/material https://github.com/angular/material
- Bahamut 12y ago
  From what I understand, the Angular version is being developed by someone who works for Drifty, the company behind Ionic.
jtollerene 12y ago
Thanks to everyone for checking out our little project. It is very much a work in progress. We released it because we are excited about it and knew that the open source community will only help to make it better. Let's make something awesome together!
Touche 12y ago
Does React have something like web component's <content/> ? It's really unfortunately that the LeftNav component takes an array of objects to turn into links instead of allowing you to define arbitrary html as <content/>
- kfinley 12y ago
  Yes, React components have a special `this.props.children` property [0]. Which works similarly to web components's <content/>. The current implementation of `LeftNav` doesn't allow for this, but it would be easy to add. 0: http://facebook.github.io/react/docs/multiple-components.html#children http://facebook.github.io/react/docs/multiple-components.htm...
vlucas 12y ago
Can anyone explain to me why having the dropdowns and other items in JavaScript is better than the DOM? Seems like we fixed this approach on the web 10 years ago.
alvare 12y ago
I love how it works all wrong. It's like a recursive "This is Bad Idea".
emehrkay 12y ago
This is the best implementation of Material in html/css i've seen. It's a little buggy, but nothing a few tickets won't fix. I'm constantly impressed with how fast you guys work.
z5h 12y ago
Great work. Thanks so much. I'll definitely consider using this.
UUMMUU 12y ago
I have to say I REALLY like what you did with the inputs. That action is really cool. I thought the spec said that buttons with just text and no background or borders were discouraged as they looked too unactionable?
carlob 12y ago
Why can't I use esc to dismiss the dialog? Why do arrows in menus also scroll the page? Is this because this is not pure CSS? Would this be a problem for accessibility?
peterchon 12y ago
animation is bit choppy and jumpy. This goes completely against the animation principal that google's Material UI talks about.
nogridbag 12y ago
Nicely done. Material design looks great on Android. I'm not sure if I'm sold on material design for desktop use. I started building a material design look and feel for a new web app we're building and besides the fact that it lacked all the subtle animations no one really was digging the vibrant colors, flat buttons, and drop shadows. We ditched it for a more conservative theme and so far we've had no complaints. Any Inbox users here? What do you think of the full desktop web app for Inbox? Personally while I love the mobile material design version, there's just something off about the desktop version.
- FlailFast 12y ago
  Inbox user chiming in: I actually like the desktop interface, and it's nice to not have to change mental context when using Inbox on mobile vs the desktop (probably the best, if more subtle, benefit to the Material overhaul of Google's services). My biggest gripe is the more restrictive keyboard shortcuts compared to Gmail, which basically necessitates using a mouse for some operations. But I imagine that will be remedied over time.
  - visarga 12y ago
    I tried Inbox in Chrome on OS X Yosemite on rMBP 13'' last year's model and it stutters and freezes when scrolling, and takes a minute to load all dependencies. I tried in Safari too, but it does not work with Safari yet, and in Chrome it's a disaster.
imaginenore 12y ago
No keyboard support. Fail.
some1else 12y ago
Similar efforts: 1) Angular Material Design https://material.angularjs.org https://material.angularjs.org - Good, light framework, but intended for Angular apps 2) Materialize http://dogfalo.github.io/materialize http://dogfalo.github.io/materialize - Beta stage, follows Material guidelines closely, incomplete though 3) Leaf Framework http://getleaf.com http://getleaf.com - Not as good, front-end framework, strays from Google direction Use this for maximum Material design feel: 4) Polymer Paper Elements https://www.polymer-project.org/docs/elements/paper-elements.html https://www.polymer-project.org/docs/elements/paper-elements... - Super awesome, disjoint components, not a framework 5) Google Material Web Starter Kit http://google.github.io/web-starter-kit/material http://google.github.io/web-starter-kit/material - Good enough, light framework 6) Google Web Starter Kit https://developers.google.com/web/starter-kit https://developers.google.com/web/starter-kit - Full fledged framework, doesn't fully capture Material though
pc86 12y ago
Left nav menu and dropdowns don't work in FF Dev version.
adrianlmm 12y ago
Nice, but is useless to me, it doesn't work on IE11.
esschul 12y ago
I think it's just lazy when a page like this that doesn't have media queries. Seriously.
untilHellbanned 12y ago
Tangential, but not really: https://medium.com/@timrpeterson/cynicism-21258dc48246 https://medium.com/@timrpeterson/cynicism-21258dc48246
jwr 12y ago
I worked through the demo and actually kind-of liked it, until I got to the checkbox page. How is that checkbox design better than the commonly used empty square for unchecked, and square containing an X or a V for checked? I can't even tell if the boxes are checked or not! I would seriously advise taking a look at the usability of these checkboxes.
- jwr 12y ago
  [can't edit the comment anymore and this merits a correction] It turns out that it was a bug and checkboxes were rendered on my screen in a way that was not intended by designers. So the comment above is invalid.
grandalf 12y ago
Those radio buttons and checkboxes are painful to use.

Material UI

386 points by eskimobloood 12y ago

NewsReader42 12y ago

Can't even click the links down the RHS in the demo. (FF 33.0.2)

amatera 12y ago
Me too on FF 33.0.3 (MAC OS).
- kissickas 12y ago
  Nor on FF 33.0.3 Windows.

vanderZwan 12y ago

http://material-ui.com/#/components/buttons http://material-ui.com/#/components/buttons Aaaand the first three buttons are hidden until you hover over them. How visual designers keep making mistakes like this in the age of mobile browsing is beyond me. EDIT: As has been pointed out to me below, they have their use-cases. I still wouldn't put them as the first shown option though - they're not exactly the sensible default fall-back. Also, the menu doesn't work on my Firefox Aurora browser.

mateuszf 12y ago
Also doesn't work for me in regular Firefox 33.0.3 (OSX).
- deskamess 12y ago
  Same issue here, but on Win8.
treerock 12y ago
Google's design guidelines advise using flat buttons "for contexts such as toolbars and dialogs to avoid gratuitous layering". Seems to me there may be cases where they are useful. http://www.google.co.uk/design/spec/components/buttons.html#buttons-flat-raised-buttons http://www.google.co.uk/design/spec/components/buttons.html#...
- vanderZwan 12y ago
  Fair enough. I still think putting them first is sending the wrong signal though: using a flat UI should be a deliberate, carefully evaluated choice (like the example you gave). Not the default.
smrtinsert 12y ago
You would understand them once they are correctly placed visually. Isolated they do look incorrect.
Aardwolf 12y ago
Confirmed: menu doesn't work in firefox, so I can only see the first demo (buttons). Clicking "Dialog" or other demos on the left does nothing.

joshkpeterson 12y ago

Layout is broken on my android phone.

AlexMuir 12y ago
And completely unusable on iPhone.

rpwverheij 12y ago

this is a nice start of a cool and handy tool. As someone who recently got into React, browserify and uses less by default, I really apreciate people making libraries like this and will probably try using this at some point. Yes, as others seem to note aswell, it needs some work finetuning and improving (are buttons in the dialog supposed to have no borders?). But I think it's a very nice initiative, thank you.

colinramsay 12y ago

The comments thus far are disappointing. People go to the trouble of making a pithy comment on hackernews, but surely since many of us here are developers we understand the frustration of bad bug reports. Is it so hard to bottle up your negative comments and spend another two minutes doing something constructive - like heading over to github and adding an issue with your system specs?

eps 12y ago
These comments are as constructive as it gets - test your shit before submitting it for a public review or clearly state that it wasn't tested outside that one Mac it was written on. I would rather not see HN turn into a sloppy developers support group, though it is already part way there.
tjelen 12y ago
Well, I think it should be at least marked as a work-in-progress. Because right now it looks like it's a production-ready framework, and yet people are reporting that it doesn't work on major platforms.
rattray 12y ago
Heading over to github would help the project, it is true. But HN isn't only a place where people come for help. It's also a place where people come to share. And when low-quality (or not-yet-production-ready) work is shared, it's important that we let each other know that. Especially when the site seems to imply it's "ready", as this one does.
ohyesyodo 12y ago
I visited the site on my Windows Phone 8.1, and the page is rendered incorrectly. There's white text on white background, different text sections overlapping eachother, columns being one word wide and lot of more things. According to other comments here, it is unusable on iphone and broken on android as well. According to issues in their tracker, it does not work on Windows 8/Firefox and Ubuntu/Firefox. It also renders incorrectly on Chrone om Windows 8 (on my laptop, at least). If you're creating a new CSS framework, publish it and fail to mention that it's work in progress and it only works on a limited set of platforms (like what), you have wasted my time. I really hope developers doesn't expect to only get constructive feedback when doing something like that.

CmonDev 12y ago

Nice play on Microsoft's Metro/Modern UI! I couldn't find the tiles however and they seem to be abandoned in the original documentation (called "cards" for some reason :S): http://www.google.com/design/spec/components/cards.html# http://www.google.com/design/spec/components/cards.html#

seanmcdirmid 12y ago
> couldn't find the tiles however So you mean, not Metro at all right?
- CmonDev 12y ago
  There used to be in the original copy, here is a saved image at the top: http://www.eyeonwindows.com/2014/06/25/googles-material-design-language-is-strangely-similar-to-metro http://www.eyeonwindows.com/2014/06/25/googles-material-desi... Maybe they couldn't reconcile them with other alterations or are simply trying to respond to criticism.
  - seanmcdirmid 12y ago
    Interesting, I've never seen tiles in material design before, like I've never seen depth (shadows) used in metro.
  - Geee 12y ago
    That image has nothing to do with material design and cards have nothing to do with tiles. It's very far-fetched to even suggest that Material design and Metro UI are even remotely similar.
    - guardian5x 12y ago
      There are not similar, but there are similarities. The way the controls are designed, the flat style, the whole content-first approach, and giving the content space to breath.

nicgutierrez 12y ago

Very good job indeed. I think it's a good implementation of Material Design. (PS: works just fine on Chrome.. I like all the smooth animations!)

kellros 12y ago

Looks pretty good, I'm a big fan of the placeholder without input -> label + description when active -> label with input style.

dickvdbrink 12y ago

Nice, really like the `input` demo, looks really slick!

matthewmacleod 12y ago

Needs a huge amount of work before it's usable, but it's nice to see this being implemented.

supercoder 12y ago

Sorry but this looks like a huge mess on iOS

twelvechairs 12y ago
It looks like a huge mess on Firefox/android too

maga 12y ago

Is anyone working on pure CSS theme/framework with Material UI?

espadrine 12y ago

This is my first introduction to Material Design. I am confused about an aspect of it. Here[0], we see two separate cards next to each other, with the same dimension, but at a different elevation. As a result, one casts a larger shadow. Here[1], they specify that "Shadows are never approximated using material". Wouldn't that require that one of those two cards with the same dimension appear to be larger, since it is closer to the eye? What do they mean by that rule? [0]: https://www.google.com/design/spec/what-is-material/objects-in-3d-space.html# https://www.google.com/design/spec/what-is-material/objects-... [1]: https://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-physical-properties https://www.google.com/design/spec/what-is-material/material...

franze 12y ago

http://material-ui.com/#/components/dropdown-menu http://material-ui.com/#/components/dropdown-menu really? how can this be good usability. it's text and an arrow far, far away. this could be anything and does not in any way imply any kind of select action. if this is really implemented after the material design spec of google, than oh man, google really has an issue.

dingaling 12y ago
> it's text and an arrow far, far away. That's an arrow? I just see a Unicode failure-box :( That's one of the problems with the trend of icons-as-fonts, when they fail there's no reversion mode for users to understand what the glyph is supposed to be. planefinder.net is a canonical example, without the correct font none of their on-screen controls make any sense.
- coldpie 12y ago
  Well, the font is usually provided by the website. Your client is being prevented from using the provided font for some reason.
notastartup 12y ago
The dropdown also caught my attention it seems like it's a bit of a distance from the traditional dropdown in a sense that I think some users will have some trouble with actually realizing that it's a dropdown. Another complaint is the checkbox, there's no way to tell once something is checked off whether it's a picture or a form.
- clay_to_n 12y ago
  Agreed with this. In Android's Material spec (as well as the Android 5.0 implementation) you can always tell it's a checkbox. However, in Google's Polymer project, the box totally transforms, as in material-ui. :/ Ex) http://material-design.storage.googleapis.com/publish/v_1/quantumexternal/0Bx4BSt6jniD7YUQ5TEFVT3ZJQjg/components_listcontrols_checkbox2.png http://material-design.storage.googleapis.com/publish/v_1/qu...

rattray 12y ago

I was recently looking into libraries to use Material Design with React.js. I found the material-ui project to be implemented less well than this one: http://sanderspies.github.io/react-material/ http://sanderspies.github.io/react-material/ (though I have my reservations about the approach taken here, too -- and it's less complete).

ssp_ 12y ago
react-material is mostly an experiment to use react-style (CSS written in JS). Unfortunately I do not have enough free time to give react-material the right attention, so I wouldn't recommend using it for now.

igl 12y ago

I like these small frameworks. Bootstrap is almost a little too big for my taste. You end up having custom builds which are hard to maintain and update. New frameworks like semantic-ui make the mistake and are even bigger and more interwoven with js code. Fluff that! I really don't need 5 variations of every component! And drop your icon library into a seperate project! So i can choose between font-awesome, boostrap-gylphs or this MUI-Icon set. FA-like is the way to do it.

swah 12y ago

Looks good, but the transition delays are long.

notastartup 12y ago

I really like it. It's very different from what we have. I guess it makes sense (it is google after all). One complain I have is that it's so cosmetic, feminine almost, but I guess that's the color scheme.

TeeWEE 12y ago

While I like the project and effort put into this, I think, if you considering using this project, you should also look at google's own polymer project. Its based on the industry standard web-components. https://www.polymer-project.org/ https://www.polymer-project.org/ React is using "virtual dom" which is kind of a hack to support web-components kind-of technology. Since the technology is currently here, i would recommend using it, and not using React. However a consideration is also browser support. I'm not sure if polymer is production ready.

dimsuz 12y ago
Can't vote this comment down (not enough karma?), but I would. React is great library, it is not very constructive to call it a hack just because webcomponents are there.
- TeeWEE 12y ago
  I'm not saying React is a hack. I'm saying that all libraries that try to provide true "web components" that hide their implementation details for the user, are only achievable trough a "shadow dom" implementation in the browser. Thats just a fact, based on how browser work. With the shadow-dom, customer elements, and templating you can achieve true componenets, like in uix toolkits such as Android, iOS and Java Swing.
colinramsay 12y ago
Is this correct? React doesn't use the virtual DOM to create HTML-like elements, it uses JSX for that, and JSX is optional. As far as I know the virtual DOM is used to avoid updating the "real" DOM in the browser when you don't have to.
- marknutter 12y ago
  React does use a virtual DOM, namely so that it can efficiently track changes to the DOM. That's different than the shadow DOM that web components use, though, where they have their own sandboxed DOM that's completely isolated from the parent DOM.

prawn 12y ago

A few things looked slick but not particularly usable, but I found the flare animation on-click got old (and a bit slow) after a while. Might be worth toning that down a bit?

akrymski 12y ago

I've never been a fan of material design and surely hope it doesn't become a standard. Design guidelines from a company that is widely known not to care about design? No thanks. Even Google Inbox shows how engineering-driven everything is at Google - the navigation is completely unorthodox (going back = drag down), like someone above decided "this is the way we do everything from now on" and nobody had the balls to question 'em. I'd never accept Microsoft's design guidelines or Google's. If you truly care about design, you'd stick to Apple's or develop your own, which frankly isn't too hard in CSS anyway, and it means you aren't tied to a particular OS feel or a big-corp policy.

tomelders 12y ago

I had a talk with myself at the weekend about making a concerted effort to cut out the snark when I comment on the web.... And I'm about to fall at the first hurdle. Being "on trend" isn't good UI design. But I can see how we got here. Through OS X and iOS, Apple's UI ethos became the gold standard in UI design. It was so well designed that it was easy to imitate and by simply adopting the core elements of Apples UI language, stuff became intuitive and usable without the designer needing to understand "why" something looked the way it looked. And then came a new trend, the current trend, that appears to me to be rooted in nothing more substantial than a desire to replace the old with something new at all costs. And when the likes of Apple and Google fall for the same trap, it's nigh on impossible for fundamental UI design knowledge to make itself heard above the noise of a million designers advocating the new and pointing to Apple for credibility. You can see that I don't like Material. I also don't like iOs's new UI language. It doesn't work. Ive seen no evidence that it's any more useable and I struggle everyday to make sense of software and tools that have adopted these new trends so anecdotally, I have to say to myself that we're going the wrong way.

davedx 12y ago
I don't find this post snarky, but from a usability point of view I'd love to hear specifics about where you think these designs fail?
- sucramb 12y ago
  I feel like the same as OP. Change for the sake of change without any real benefits. But with plenty of draw-backs. For example the new Gmail App on Android now uses an almost unreadable font in the overview. It is "designy" but not good for usability - and I still have 100% eye sight. In general I feel like surrounded by the Microsoft paper clip. There is constantly something animating, popping up or popping with strong colors into your eyes. Try to find in all the talk about material design the underlying reasons for usability. There aren't any. To me it feels like the emperor's new cloths. I was about to buy a Nexus 6 but the new Gmail app is a no go for me and I will avoid it as long as possible.
  - 12y ago

corford 12y ago

Bug report: If I follow the "Demo" link from the homepage, the first demo ("Buttons") works but clicking on any of the others (via the left hand menu) e.g. "Dialog" doesn't do anything. No obvious errors in the console. I'm using FF 33.0.3 on Win7. Edit: looks promising though - just get them bugs ironed out! :)

regularfry 12y ago
Same here, iceweasel 33.0 on Debian Wheezy.
- hutattedonmyarm 12y ago
  Works for me, Safari 8.0 ons OS X 10.10
dimsuz 12y ago
Me too. FF 33.0.3 Linux
subir 12y ago
Same here. Try these: http://material-ui.com/#/components/left-nav http://material-ui.com/#/components/left-nav http://material-ui.com/#/components/inputs http://material-ui.com/#/components/inputs http://material-ui.com/#/components/dropdown-menu http://material-ui.com/#/components/dropdown-menu http://material-ui.com/#/components/icons http://material-ui.com/#/components/icons You get the idea.
kunstmord 12y ago
Same, FF 35.0a2 on OS X 10.9.
KobaQ 12y ago
Same here, FF 33.0.3, Win 8.1 ... After having seen the buttons, I've seen enough. I'm not bought so far.
Sir_Cmpwn 12y ago
This is a big issue. Cross-browser compatibility is extremely important for anything like this that wants to be taken seriously.

deleted 12y ago

[deleted]

uxwtf 12y ago

I like the animations, inputs are really what I need today for my UI designs. Checkboxes have different styles in Chrome and Safari. Safari checkboxes look a bit weird as in unchecked mode a rotated green tick is displayed inside a checkbox, and in checked mode one of the tick's lines extends horisontally. In Chrome the checkbox looks really nice though.

0942v8653 12y ago
OK, I'm glad they didn't actually intend to have the checkboxes look like that :)

alexweberk 12y ago

I hope they do away with the flare effect on button clicks. Just weird...

zorbo 12y ago
It's not just weird. Every click on any item now takes approximately 1 second longer.

igravious 12y ago

Is there a way that I can use this as a drop-in replacement to Bootstrap or on top of Bootstrap? If not, what would be the easiest way to re-skin a project that currently Bootstrap to use this? Then I could have Facebook/Google/Twitter design and coding chops baked in :)

spain 12y ago

Doesn't seem to embody the principles of Material Design other than the flat design and use of colors. For example for the dialog[0] when you click it it just appears out of nowhere instead of sliding in or expanding out from the button. Material Design isn't only about everything being flat but there being good animations to make transitions clear. I wonder what Google's design team thinks of all these creations masquerading as "Material Design." [0] http://material-ui.com/#/components/dialog http://material-ui.com/#/components/dialog

calinet6 12y ago
It highlights the fact that it actually takes a lot of work to do all of these details and get the UI right, and if you miss one or two, it really doesn't hold up. Something we should all take to heart. Not many design frameworks have such complete and irreducible properties. The Material design guidelines and (good) implementations so far are really very impressive.

flavj 12y ago

I have been using the angular team's material design project[0] with great success. "This project is still in early preview."[1] Worth keeping an eye on if you are working on any angular projects. Not to take away anything from OP's, I feel their implementation of material is a little closer to the mark. [0]https://material.angularjs.org https://material.angularjs.org [1]https://github.com/angular/material https://github.com/angular/material

Bahamut 12y ago
From what I understand, the Angular version is being developed by someone who works for Drifty, the company behind Ionic.

jtollerene 12y ago

Thanks to everyone for checking out our little project. It is very much a work in progress. We released it because we are excited about it and knew that the open source community will only help to make it better. Let's make something awesome together!

Touche 12y ago

Does React have something like web component's <content/> ? It's really unfortunately that the LeftNav component takes an array of objects to turn into links instead of allowing you to define arbitrary html as <content/>

kfinley 12y ago
Yes, React components have a special `this.props.children` property [0]. Which works similarly to web components's <content/>. The current implementation of `LeftNav` doesn't allow for this, but it would be easy to add. 0: http://facebook.github.io/react/docs/multiple-components.html#children http://facebook.github.io/react/docs/multiple-components.htm...

vlucas 12y ago

Can anyone explain to me why having the dropdowns and other items in JavaScript is better than the DOM? Seems like we fixed this approach on the web 10 years ago.

alvare 12y ago

I love how it works all wrong. It's like a recursive "This is Bad Idea".

emehrkay 12y ago

This is the best implementation of Material in html/css i've seen. It's a little buggy, but nothing a few tickets won't fix. I'm constantly impressed with how fast you guys work.

z5h 12y ago

Great work. Thanks so much. I'll definitely consider using this.

UUMMUU 12y ago

I have to say I REALLY like what you did with the inputs. That action is really cool. I thought the spec said that buttons with just text and no background or borders were discouraged as they looked too unactionable?

carlob 12y ago

Why can't I use esc to dismiss the dialog? Why do arrows in menus also scroll the page? Is this because this is not pure CSS? Would this be a problem for accessibility?

peterchon 12y ago

animation is bit choppy and jumpy. This goes completely against the animation principal that google's Material UI talks about.

nogridbag 12y ago

Nicely done. Material design looks great on Android. I'm not sure if I'm sold on material design for desktop use. I started building a material design look and feel for a new web app we're building and besides the fact that it lacked all the subtle animations no one really was digging the vibrant colors, flat buttons, and drop shadows. We ditched it for a more conservative theme and so far we've had no complaints. Any Inbox users here? What do you think of the full desktop web app for Inbox? Personally while I love the mobile material design version, there's just something off about the desktop version.

FlailFast 12y ago
Inbox user chiming in: I actually like the desktop interface, and it's nice to not have to change mental context when using Inbox on mobile vs the desktop (probably the best, if more subtle, benefit to the Material overhaul of Google's services). My biggest gripe is the more restrictive keyboard shortcuts compared to Gmail, which basically necessitates using a mouse for some operations. But I imagine that will be remedied over time.
- visarga 12y ago
  I tried Inbox in Chrome on OS X Yosemite on rMBP 13'' last year's model and it stutters and freezes when scrolling, and takes a minute to load all dependencies. I tried in Safari too, but it does not work with Safari yet, and in Chrome it's a disaster.

imaginenore 12y ago

No keyboard support. Fail.

some1else 12y ago

Similar efforts: 1) Angular Material Design https://material.angularjs.org https://material.angularjs.org - Good, light framework, but intended for Angular apps 2) Materialize http://dogfalo.github.io/materialize http://dogfalo.github.io/materialize - Beta stage, follows Material guidelines closely, incomplete though 3) Leaf Framework http://getleaf.com http://getleaf.com - Not as good, front-end framework, strays from Google direction Use this for maximum Material design feel: 4) Polymer Paper Elements https://www.polymer-project.org/docs/elements/paper-elements.html https://www.polymer-project.org/docs/elements/paper-elements... - Super awesome, disjoint components, not a framework 5) Google Material Web Starter Kit http://google.github.io/web-starter-kit/material http://google.github.io/web-starter-kit/material - Good enough, light framework 6) Google Web Starter Kit https://developers.google.com/web/starter-kit https://developers.google.com/web/starter-kit - Full fledged framework, doesn't fully capture Material though

pc86 12y ago

Left nav menu and dropdowns don't work in FF Dev version.

adrianlmm 12y ago

Nice, but is useless to me, it doesn't work on IE11.

esschul 12y ago

I think it's just lazy when a page like this that doesn't have media queries. Seriously.

untilHellbanned 12y ago

Tangential, but not really: https://medium.com/@timrpeterson/cynicism-21258dc48246 https://medium.com/@timrpeterson/cynicism-21258dc48246

jwr 12y ago

I worked through the demo and actually kind-of liked it, until I got to the checkbox page. How is that checkbox design better than the commonly used empty square for unchecked, and square containing an X or a V for checked? I can't even tell if the boxes are checked or not! I would seriously advise taking a look at the usability of these checkboxes.

jwr 12y ago
[can't edit the comment anymore and this merits a correction] It turns out that it was a bug and checkboxes were rendered on my screen in a way that was not intended by designers. So the comment above is invalid.

grandalf 12y ago

Those radio buttons and checkboxes are painful to use.