Animation should be kept to an absolute minimum unless you're making a game.
Could you expand on that point? I'm struggling to think of a user group whose experience would be fundamentally broken by the use of motion in Material. Could you give an example? I use Material extensively and would like to think that I have a good understanding of accessible design, but I'm always looking to improve.
If I think about complaint I would have, take the dialog spec, both "ACCEPT" and "CANCEL" "button" have same color and size, this is terrible design. I am going to do a destructive action, I need more distinction on what I am going to do. It should read "cancel" in a normal button and "reset settings" in a red button.
Looking at that page, I realize another MAJOR annoyance, what is "123 main street..." description? special "location" event attribute? Removing label from filled field is so bad for usability, for ALL users.
I could go on forever with what is wrong on every material design page.
This is easily done by setting an md-warn attribute on the cancel button, e.g., https://material.angularjs.org/latest/demo/button
It is up to the designer to scope out the magnitude of destruction the action will cause and select the right color/hue, and even set md-raised on the default action in a workflow.
And again, I am not saying that material design is bad "by design", I am saying it is not always well used, and that I personally don't like it.
This is incorrect. If you use Material color templates and pick red as the theme, md-warn will pick an alternate accent color.
> And again, I am not saying that material design is bad "by design", I am saying it is not always well used, and that I personally don't like it.
No disagreement there. Some of Google's own apps butcher Material Design. YouTube Music on Android is a usability mess.
Besides population familiarity with material UI because of Google, am I missing something ?
Things I like about React semantic :
- very clean documentation : i can search, find , and tweek components
- Semantic is less opinionated visually than Material (IMO), and do appreciate lightweight.
Material design looks great by default but it infects the rest of your app really quickly since any custom components you build have to match it in visual style or it'll look really out of place. This was pretty hard for a small project without a designer.
Semantic basically looks like bootstrap without being bootstrap and is much easier to work with.
With bootstrap the basic buttons are fairly simple, so distinctive theming was easy, but with all the shadow and shimmer effects of the Material Design components its a lot of work if you want to change their structure to give it some of your own app's personality.
Also noting that the semantic UI docs still give a horrible mobile experience (iOS 11).
I'm curious about the choice for styling components, there seems to be a lot of different approaches and no clear winner.
The thread that this comment is in is where it all starts, but the repo and presentation linked from that comment should give the answers. At least as a snapshot at that point in time).
The only thing I keep getting frustrated with is styling with Typescript. I don't like the withStyles HoC but the alternatives still feel difficult to use.
I would love to just use a decorator but I believe there's a TypeScript feature still missing in order to support it correctly. I'm curious if the recently announced TS 2.9 changes will help.
And this TS issue: https://github.com/Microsoft/TypeScript/issues/4881
The guide just comes off as a bunch of subpar workarounds.
I look forward to seeing its future flourish!
Thanks to all who contributed.
Thank you for staying the course and believing! What an EPIC effort!!!
In addition to the overall polish, one of my favorite aspects of this library is the authors' focus on controlling bundle size.
Because of this library I learned that ES6 default imports may not be cheap.
VSCode users: consider checking out Import Cost extension  to keep an eye on this.
"Example projects" link is broken. But the master branch seems to contain them: https://github.com/mui-org/material-ui/tree/master/examples
Granting the validity of many aesthetic criticisms of over the top skeuomorphism, it will be a good day for users when the fashion-chasing flat ui era is over.
All the more outrageous in an industry that likes to wear the mantle of empiricism.
Just wanted to request for more react templates ... say an ecommerce site, etc. There's a burning need for this that is unserviced elsewhere.
Material-UI has been designed with customisability in mind, so you can get the functionality of the components without necessarily having to look like Material Design.
> so you can get the functionality of the components without necessarily having to look like Material Design.
Its simple, easy to use, and not having to deal with global stylesheets is a pleasure.
And they are just getting started.
I look forward to the future with this React toolkit.
An incredible effort has been made by the team members.
Just in time for my needs as I have been looking for other option besides Bootstrap, Fabric and Blueprint.
i can't be alone in mocking something up, then switching to browser to fine tune the css, then taking that back in to codebase.
Somebody in work also had the idea of storing every components styling in JSON, then getting the browser to render that as styling...so now you need to understand a JSON->CSS engine just to troubleshoot most styling issues?
When will it end. Do we need to rip out the DOM, HTML, JS & CSS and start over because we're creating more elaborate Rude Goldberg machines every couple of months.