
Material Components Preview - gcoguiec
https://material.io/components/
======
TheAceOfHearts
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](https://github.com/material-components/material-components)

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

~~~
susi22
The demo is mostly here:

[https://getmdl.io/](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...](https://github.com/material-components/material-components-
web/blob/master/docs/architecture.md)

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/google/material-design-lite/issues/4984)

[https://github.com/material-components/material-
components-w...](https://github.com/material-components/material-components-
web/commit/8d46ba05ecbc19af2d887cabbc0e3a88bf59be48)

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
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](http://www.material-ui.com)

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

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

~~~
pferdone
Take a look at [https://react-md.mlaursen.com](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

~~~
orb_yt
While it's not Material, Semantic UI React ([http://react.semantic-
ui.com/introduction](http://react.semantic-ui.com/introduction)) has been
pretty fun to work with.

~~~
danappelxx
Does that page seriously require es6 (in production)!?

[https://puu.sh/sRdzE/f9a952f073.png](https://puu.sh/sRdzE/f9a952f073.png)

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

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

[1]: [http://getbem.com/naming/](http://getbem.com/naming/)

~~~
elliotlarson
Oh, that's interesting. Thanks for the link!

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

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

~~~
aiur3la
I strongly disagree that this is design agency BS!

Please watch the video where they introduced material design (way back at some
I/O) to see what all those words mean.

edit:
[https://www.youtube.com/watch?v=FBD0VlcVS1E](https://www.youtube.com/watch?v=FBD0VlcVS1E)

~~~
lisivka
I hate MD and this video helped me to understand why I hate it: they are
trying to do judge by analogy, which causes «analogy driven design», where you
should understand analogy to understand what you see. I newer saw real objects
to behave like their imaginary «real objects». It looks like they are just
getting money for something that nobody knows how to do properly, so they are
doing something and arguing correctness of their work with self-made
arguments. IMHO, if they will be hired to do an animation film, they will be
fired pretty quickly for their «material design», because it looks false.

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

~~~
SquareWheel
I'm seeing only 156KB for the entire page+assets. The logo is SVG and the CSS
is minified. Where are you seeing the additional data?

~~~
idlewords
Sorry, click on the parent domain (the top corner link).

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

~~~
anilgulecha
I think any UI framework, once it's popular, is boring.

~~~
chenster
Popular, maybe, but it is undoubtedly boring from UI perspective.

------
twiss
Instructions to view the demos of material-components-web:
[https://github.com/material-components/material-
components-w...](https://github.com/material-components/material-components-
web#running-the-demos)

Took me a while to find. It would be nice if this worked:
[https://rawgit.com/material-components/material-
components-w...](https://rawgit.com/material-components/material-components-
web/master/demos/index.html)

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

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

[0][https://design.google.com/resources/](https://design.google.com/resources/)

~~~
tobltobs
MDL includes a JS library and it seems that there is a complete rewrite
underway at the moment.

~~~
joshtynjala
Yes, it appears that the web version of these new Material Components is
considered the successor to MDL.

[https://github.com/material-components/material-
components-w...](https://github.com/material-components/material-components-
web)

~~~
tobltobs
I hate if I start using a lib, which is kind of half finished and then learn a
few month later that work on this project has been stopped and I should use
now the new shiny fade of the day successor which is also half finished. Seems
to be the standard in the JS world where people change frameworks and libs
more often then their underpants.

------
r1ch
> 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?

~~~
SamBam
MD often involves a fair bit of animation.

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...](https://github.com/material-components/material-components-
web/tree/master/packages)

------
FordPrefectAO
[https://material.io/](https://material.io/) has completely janky scrolling
behavior in Firefox 50 on a 2015 MBP. Unacceptable

------
bosky101
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](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
Trust Google to have such an uninspiring design.

