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.<p>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.<p>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.<p>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.
<a href="http://material-ui.com/#/components/dropdown-menu" rel="nofollow">http://material-ui.com/#/components/dropdown-menu</a> 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.
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?
Similar efforts:<p>1) Angular Material Design<p><a href="https://material.angularjs.org" rel="nofollow">https://material.angularjs.org</a> - <i>Good, light framework, but intended for Angular apps</i><p>2) Materialize<p><a href="http://dogfalo.github.io/materialize" rel="nofollow">http://dogfalo.github.io/materialize</a> - <i>Beta stage, follows Material guidelines closely, incomplete though</i><p>3) Leaf Framework<p><a href="http://getleaf.com" rel="nofollow">http://getleaf.com</a> - <i>Not as good, front-end framework, strays from Google direction</i><p>Use this for maximum Material design feel:<p>4) Polymer Paper Elements<p><a href="https://www.polymer-project.org/docs/elements/paper-elements.html" rel="nofollow">https://www.polymer-project.org/docs/elements/paper-elements...</a> - <i>Super awesome, disjoint components, not a framework</i><p>5) Google Material Web Starter Kit<p><a href="http://google.github.io/web-starter-kit/material" rel="nofollow">http://google.github.io/web-starter-kit/material</a> - <i>Good enough, light framework</i><p>6) Google Web Starter Kit<p><a href="https://developers.google.com/web/starter-kit" rel="nofollow">https://developers.google.com/web/starter-kit</a> - <i>Full fledged framework, doesn't fully capture Material though</i>
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.<p>I'm using FF 33.0.3 on Win7.<p>Edit: looks promising though - just get them bugs ironed out! :)
<a href="http://material-ui.com/#/components/buttons" rel="nofollow">http://material-ui.com/#/components/buttons</a><p>Aaaand the first three buttons are hidden until you hover over them. How visual designers keep making mistakes like this <i>in the age of mobile browsing</i> is beyond me.<p>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.<p>Also, the menu doesn't work on my Firefox Aurora browser.
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.<p>I wonder what Google's design team thinks of all these creations masquerading as "Material Design."<p>[0] <a href="http://material-ui.com/#/components/dialog" rel="nofollow">http://material-ui.com/#/components/dialog</a>
I have been using the angular team's material design project[0] with great success.<p>"This project is still in early preview."[1] Worth keeping an eye on if you are working on any angular projects.<p>Not to take away anything from OP's, I feel their implementation of material is a little closer to the mark.<p>[0]<a href="https://material.angularjs.org" rel="nofollow">https://material.angularjs.org</a>
[1]<a href="https://github.com/angular/material" rel="nofollow">https://github.com/angular/material</a>
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.
This is my first introduction to Material Design. I am confused about an aspect of it.<p>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.<p>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?<p>What do they mean by that rule?<p>[0]: <a href="https://www.google.com/design/spec/what-is-material/objects-in-3d-space.html#" rel="nofollow">https://www.google.com/design/spec/what-is-material/objects-...</a><p>[1]: <a href="https://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-physical-properties" rel="nofollow">https://www.google.com/design/spec/what-is-material/material...</a>
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.<p>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.
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.
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.
I was recently looking into libraries to use Material Design with React.js.<p>I found the material-ui project to be implemented less well than this one: <a href="http://sanderspies.github.io/react-material/" rel="nofollow">http://sanderspies.github.io/react-material/</a> (though I have my reservations about the approach taken here, too -- and it's less complete).
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?<p>Then I could have Facebook/Google/Twitter design and coding chops baked in :)
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!
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/>
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. <a href="https://www.polymer-project.org/" rel="nofollow">https://www.polymer-project.org/</a><p>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.<p>However a consideration is also browser support. I'm not sure if polymer is production ready.
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?
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!<p>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.
I worked through the demo and actually kind-of liked it, until I got to the checkbox page.<p>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!<p>I would seriously advise taking a look at the usability of these checkboxes.
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?
Tangential, but not really: <a href="https://medium.com/@timrpeterson/cynicism-21258dc48246" rel="nofollow">https://medium.com/@timrpeterson/cynicism-21258dc48246</a>
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?
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.
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.
Nice play on Microsoft's Metro/Modern UI!<p>I couldn't find the tiles however and they seem to be abandoned in the original documentation (called "cards" for some reason :S):<p><a href="http://www.google.com/design/spec/components/cards.html#" rel="nofollow">http://www.google.com/design/spec/components/cards.html#</a>
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 <i>down</i>), 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.