They took the time to make a marketing landing page but couldn't take a few mins to put up the material-components-web demo online? That's one of the web's killer features! It's a bit disappointing to find that missing.
I'm ambivalent about material design. I'd love it if the spec were being developed in the open, instead of just throwing an update over the wall every few months. In the past I've noticed contradictions or bugs in the spec, but I don't have anywhere to report it. Can we report those to material-components [0]? In other cases I find the text confusing. Not that I blame the authors, since writing good documentation is very challenging. But people would be empowered to help improve it if were open.
Here's an example of a seeming contradiction in the buttons spec [1]: go to the "Size and padding" section. It shows "64dp min width" and it has "8dp external padding" on each side: 64dp + 8dp + 8dp = 80dp. But then below that it says "Minimum width: 88dp". Where does the remaining 8dp come from? Which one is correct? The "Minimum width: 88dp" point appears a few time, but it's contradicted by multiple buttons on the same page. For example, the dialog's "agree" button or the "share" button in the Top 10 Australian beaches card.
A complete new implementation has been underway since roughly the beginning of this year. They called it v2.0 of mdl and has been under heavy development. Some of their designs is pretty nice:
I just cloned their new repo and started the compiled demos. I see no difference in behavior/design of the new components
compared to the old mdl but the architecture is much more modular and can easily be used in any JS framework.
I'm excited about this development. I'm really looking forward to a web implementation of Material Design that is not bound to Angular 1 and is production ready. I did a few projects using React + Material Design that was enabled by Material-UI component set. [0] And although Material-UI seems like a really great implementation for React, it's certainly not production ready yet. I did spend a significant amount of time fixing / messing with its code to make things work relatively smoothly.
Regarding the Google's MDC-Web [1] the demos look promising, although the components seem to lack polish and animations sometimes get stuck. I hope they will push them to the point where these components will be as good as Angular Material ones. [2]
Take a look at https://react-md.mlaursen.com it's the most complete and best looking Material implementation I've seen so far!
I also had my fair share of experience with all the material-ui, react-mdl, materialize and what not. None of them is production ready. Even if you used plain mdl (which is by Google) there's so much missing like select, calendar, etc
I'm really excited about the web version of this. I think Google is doing fantastic work, making material design available to and usable by the community. I'm sure their motives aren't entirely altruistic, but I appreciate them nonetheless.
As a nit, I'm not very fond of their CSS naming conventions, using a lot of double underscores and double dashes. For example:
For better or worse, there is reason behind the naming convention. It is known as BEM[1] -- block-element-modifier -- and I've seen quite a few design shops adopt it as standard.
> A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.
I like the idea of standard design components, but sentences like these don't communicate anything.
It does communicate a bit, even if it's confusingly worded and targeted to a specific audience.
Material Design has two parts: A physical structure based on how objects lie in the real world (particularly inspired by the physical appearance paper and ink), and animations that seem magical, playful, or imaginative.
This lays out the inspiration behind material design, and differentiates it from skeumorphism: which copies real world elements unimaginatively, and simple "flat" design, which is not necessarily tactile or imbued with a system of animations or motion.
I also hate empty speak, but I think the issue here is not that it doesn't communicate anything, but it does so with overly flowery language. What I'm reading is the "material" concept unifies 1) location in space and 2) motion, and it's based in objects in the real world (e.g. paper and ink) but is a framework that can be creatively extended and built upon.
It's standard design agency rhetoric to impress customers, applied for example when a company has spent a million dollars on a new logo and a font choice, and needs some reassurance that the entire world will view them in a completely different light as soon as the newly rounded/squared/deconstructed logo graces their letterhead.
Its occurrence here indicates that Google hires expensive design professionals with impressive ad industry résumés, I guess.
It's a design brief that explains how the new Pepsi logo is the physical manifestation of the grand unified 'theory of everything'.... or something like that. I still can't figure out whether it's meant as a parody.
Is it just me, doesn't the Material seem kind of ..boring? Why is it coming out of a company with mediocre track record of UI design? Name one website from Google that actual looks nice and pretty.
Looks like there are four frameworks[0]. Use the Android one for Android, the Polymer one for Polymer, the Angular one for Angular, and the "Material Design Lite" would have to be adapted for everything else - it is plain css, html. Don't know if the Material Design Lite has any JavaScript library.
If you look at the individual components, though [1], most of them (like cards) actually have no associated JS at all.
Most of the other components, like the TextField (which includes JS to have things like the placeholder text swoop to a mini version above the field once you start typing) have gracefully-degrading versions. Not all of them do, however.
it's been 10 years since i worked on a web front end. i was just researched building a web based material design app this past 7 days. here is what i found...
https://getmdl.io/ (mentioned earlier)
http://posva.net/vue-mdl/
http://appcomponents.org/material-components/#!/
https://josephuspaye.github.io/Keen-UI/ (great UI, but uses vue 1.0)
https://vuematerial.github.io/ (picked this in the end, works with vuejs 2)
i recommend using
https://getmdl.io/
OR
https://vuematerial.github.io/
<rant>
Now for some unsolicited venting...
i wish most web component/js/css/library/helpers in the wild - stuck to html or javascript markup explanation and loosely coupled the templating, bundling & tooling. Instead we have script injection with 3-4 levels of tooling, overhead & magic that is so convoluted & so prone to being out-dated every month - it's depressing.
i'm building the backend in Go - and just wanted to be able to have markup. But i've been stumbling on js libraries intended to run on webpags but requiring tools across nodejs, coffescript, ruby and a dangerous new trend - a web library tighly coupled with their server-side counterpart that basically spits out html/js. so the server sends out js/html to your user - that then makes another request to the server to replace itself with the final html. They call it server-side rendering. WTF!
Was finally able to get components working with just 1 js file(vuejs), bootstrap css customized to only have minimal grid css, and a google font file.
If you like me - have been away from front end frameworks and want to build material UI like web components - check out this article that finally explained what these 101 frameworks on github and in the wild are actually doing to your html
https://coligo.io/vuejs-components/
After reading ^ i was able to create my own abstractions using getmdl.io or vuematerial's components like - <searchbox />, <login />, <searchbar />.
Also i'm loving http://vuejs.org (my pick against react/backbone/angular/ember - all of whom have a steeper learning curve)
</rant>
~B
a functional programmer working on an internal admin webapp with material design
While I see you are being punished for the way in which you said it, I do agree with the sentiment of your comment. This site in particular looks like it was designed by an elementary school student playing with powerpoint.
[+] [-] TheAceOfHearts|9 years ago|reply
I'm ambivalent about material design. I'd love it if the spec were being developed in the open, instead of just throwing an update over the wall every few months. In the past I've noticed contradictions or bugs in the spec, but I don't have anywhere to report it. Can we report those to material-components [0]? In other cases I find the text confusing. Not that I blame the authors, since writing good documentation is very challenging. But people would be empowered to help improve it if were open.
Here's an example of a seeming contradiction in the buttons spec [1]: go to the "Size and padding" section. It shows "64dp min width" and it has "8dp external padding" on each side: 64dp + 8dp + 8dp = 80dp. But then below that it says "Minimum width: 88dp". Where does the remaining 8dp come from? Which one is correct? The "Minimum width: 88dp" point appears a few time, but it's contradicted by multiple buttons on the same page. For example, the dialog's "agree" button or the "share" button in the Top 10 Australian beaches card.
[0] https://github.com/material-components/material-components
[1] https://material.io/guidelines/components/buttons.html
[+] [-] susi22|9 years ago|reply
https://getmdl.io/
A complete new implementation has been underway since roughly the beginning of this year. They called it v2.0 of mdl and has been under heavy development. Some of their designs is pretty nice:
https://github.com/material-components/material-components-w...
With the linked announcement they just renamed the mdl project to "material-components-web", nothing more:
https://github.com/google/material-design-lite/issues/4984
https://github.com/material-components/material-components-w...
I just cloned their new repo and started the compiled demos. I see no difference in behavior/design of the new components compared to the old mdl but the architecture is much more modular and can easily be used in any JS framework.
[+] [-] kukx|9 years ago|reply
Regarding the Google's MDC-Web [1] the demos look promising, although the components seem to lack polish and animations sometimes get stuck. I hope they will push them to the point where these components will be as good as Angular Material ones. [2]
[0] - http://www.material-ui.com
[1] - https://github.com/material-components/material-components-w...
[2] - https://material.angularjs.org/latest/demo/button
[+] [-] pferdone|9 years ago|reply
I also had my fair share of experience with all the material-ui, react-mdl, materialize and what not. None of them is production ready. Even if you used plain mdl (which is by Google) there's so much missing like select, calendar, etc
[+] [-] elliotlarson|9 years ago|reply
As a nit, I'm not very fond of their CSS naming conventions, using a lot of double underscores and double dashes. For example:
> <section class="mdc-card__actions mdc-card__actions--vertical">
Seems like this could be cleaned up a bit with something like:
> <section class="mdc-card-actions mdc-card-actions-vertical">
But... this is just a matter of personal taste. I'm sure they have their reasons for the approach they took.
[+] [-] sratner|9 years ago|reply
[1]: http://getbem.com/naming/
[+] [-] segphault|9 years ago|reply
[+] [-] mgummelt|9 years ago|reply
I like the idea of standard design components, but sentences like these don't communicate anything.
[+] [-] jljljl|9 years ago|reply
Material Design has two parts: A physical structure based on how objects lie in the real world (particularly inspired by the physical appearance paper and ink), and animations that seem magical, playful, or imaginative.
This lays out the inspiration behind material design, and differentiates it from skeumorphism: which copies real world elements unimaginatively, and simple "flat" design, which is not necessarily tactile or imbued with a system of animations or motion.
[+] [-] dieterrams|9 years ago|reply
It's a bit puffed up in the obtuse humanities style, but I do get its meaning.
[+] [-] markbao|9 years ago|reply
[+] [-] pavlov|9 years ago|reply
Its occurrence here indicates that Google hires expensive design professionals with impressive ad industry résumés, I guess.
[+] [-] spangry|9 years ago|reply
It's a design brief that explains how the new Pepsi logo is the physical manifestation of the grand unified 'theory of everything'.... or something like that. I still can't figure out whether it's meant as a parody.
[+] [-] idlewords|9 years ago|reply
It's an odd kind of minimalism that contains so much cruft.
EDIT: I'm refering to the parent link, the material.io site.
[+] [-] SquareWheel|9 years ago|reply
[+] [-] SamBam|9 years ago|reply
Here's my chrome network panel: http://i.imgur.com/kUqttf3.png
[+] [-] unknown|9 years ago|reply
[deleted]
[+] [-] ChrisClark|9 years ago|reply
[+] [-] tedunangst|9 years ago|reply
[+] [-] chenster|9 years ago|reply
[+] [-] anilgulecha|9 years ago|reply
[+] [-] RandomInteger4|9 years ago|reply
[+] [-] twiss|9 years ago|reply
Took me a while to find. It would be nice if this worked: https://rawgit.com/material-components/material-components-w...
[+] [-] zitterbewegung|9 years ago|reply
[+] [-] kevinstubbs|9 years ago|reply
[0]https://design.google.com/resources/
[+] [-] unknown|9 years ago|reply
[deleted]
[+] [-] r1ch|9 years ago|reply
Why on earth do we need JS involved in what should be some simple HTML / CSS?
[+] [-] SamBam|9 years ago|reply
If you look at the individual components, though [1], most of them (like cards) actually have no associated JS at all.
Most of the other components, like the TextField (which includes JS to have things like the placeholder text swoop to a mini version above the field once you start typing) have gracefully-degrading versions. Not all of them do, however.
1. https://github.com/material-components/material-components-w...
[+] [-] rickycook|9 years ago|reply
[+] [-] unknown|9 years ago|reply
[deleted]
[+] [-] FordPrefectAO|9 years ago|reply
[+] [-] bosky101|9 years ago|reply
it's been 10 years since i worked on a web front end. i was just researched building a web based material design app this past 7 days. here is what i found...
i recommend using <rant> Now for some unsolicited venting...i wish most web component/js/css/library/helpers in the wild - stuck to html or javascript markup explanation and loosely coupled the templating, bundling & tooling. Instead we have script injection with 3-4 levels of tooling, overhead & magic that is so convoluted & so prone to being out-dated every month - it's depressing.
i'm building the backend in Go - and just wanted to be able to have markup. But i've been stumbling on js libraries intended to run on webpags but requiring tools across nodejs, coffescript, ruby and a dangerous new trend - a web library tighly coupled with their server-side counterpart that basically spits out html/js. so the server sends out js/html to your user - that then makes another request to the server to replace itself with the final html. They call it server-side rendering. WTF!
Was finally able to get components working with just 1 js file(vuejs), bootstrap css customized to only have minimal grid css, and a google font file.
If you like me - have been away from front end frameworks and want to build material UI like web components - check out this article that finally explained what these 101 frameworks on github and in the wild are actually doing to your html
After reading ^ i was able to create my own abstractions using getmdl.io or vuematerial's components like - <searchbox />, <login />, <searchbar />.Also i'm loving http://vuejs.org (my pick against react/backbone/angular/ember - all of whom have a steeper learning curve)
</rant>
~B
a functional programmer working on an internal admin webapp with material design
[+] [-] samdoidge|9 years ago|reply
[+] [-] Numberwang|9 years ago|reply
[deleted]
[+] [-] sctb|9 years ago|reply
[+] [-] kevinstubbs|9 years ago|reply
[+] [-] heywire|9 years ago|reply