Material Components Preview (opens in new tab)

> 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.

This site needs five megabytes to display about four sentences' worth of text.

It's an odd kind of minimalism that contains so much cruft.

EDIT: I'm refering to the parent link, the material.io site.

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:

> <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.

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.

So which Material Design library is the one to use? Or does it depend on if I use angular / react or even bootstrap?

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]

[0] - http://www.material-ui.com

[1] - https://github.com/material-components/material-components-w...

[2] - https://material.angularjs.org/latest/demo/button

> Then simply include the correct files, write some HTML, and call mdc.autoInit() within a closing <script> tag.

Why on earth do we need JS involved in what should be some simple HTML / CSS?

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.

[0] https://github.com/material-components/material-components

[1] https://material.io/guidelines/components/buttons.html

Instructions to view the demos of material-components-web: https://github.com/material-components/material-components-w...

Took me a while to find. It would be nice if this worked: https://rawgit.com/material-components/material-components-w...

https://material.io/ has completely janky scrolling behavior in Firefox 50 on a 2015 MBP. Unacceptable

i too wish they had a demo page.

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

Trust Google to have such an uninspiring design.