7 ms·

Material Components Preview

127 points by gcoguiec 10y ago

deleted 10y ago
[deleted]
zitterbewegung 10y ago
So which Material Design library is the one to use? Or does it depend on if I use angular / react or even bootstrap?
- kevinstubbs 10y ago
  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 10y ago
    MDL includes a JS library and it seems that there is a complete rewrite underway at the moment.
    - gcoguiec 10y ago
      In fact: https://github.com/google/material-design-lite/tree/master https://github.com/google/material-design-lite/tree/master
    - joshtynjala 10y ago
      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-web https://github.com/material-components/material-components-w...
      - tobltobs 10y ago
        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.
  - trizzle21 10y ago
    Is there a suggested version for react? I know there are react versions out there, but I haven't had the time to look into them.
- deleted 10y ago
  [deleted]
Numberwang 10y ago
O god can't this ugly paradigm die already. Material design is the herpes of the Internet.
- kevinstubbs 10y ago
  I'm not a designer. Why is material design bad? What is better? Are there any situations/contexts where material design is the king?
  - Numberwang 10y ago
    I can think of lot's of situations where material design would be an improvement (any UK or US bank site really) but I can't think of a situation where it is King. For example the text input box not having borders and all the slow animations. I struggle to think of a situation where Material is better than just basic css.
    - pitaj 10y ago
      "Basic CSS" is very vague. When you use basic CSS you end up with ugly or inconsistent design. There's a reason we have CSS frameworks and design standards.
  - subpixel 10y ago
    My beef with Material Design is that it's too clever by half. It's often pretty, the animations are pleasant, but the interaction is just not intuitive enough for primetime. To wit, I've encountered them for years and I still have no idea what a floating circle with a plus sign in it is supposed to represent. Almost every time I've clicked one, it's begun a process of flow that was not my intention, so I've learned to avoid them. What Material Design is trying to do is to create a universal design language, based on the assumption that different apps designed in all sorts of different ways is a bad thing. While I admit that bad design comes in many shapes and forms, I actually feel like the context of an app should dictate how it is designed, and that in many cases it will call for something other than bold colored boxy components with assorted degrees of box-shadow.
- 10y ago
idlewords 10y ago
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.
- deleted 10y ago
  [deleted]
- SquareWheel 10y ago
  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 10y ago
    Sorry, click on the parent domain (the top corner link).
- ChrisClark 10y ago
  112k here for a fresh load (no caching).
- SamBam 10y ago
  Other folks are looking at the material.io site as well. It's no where close to 5mb, it's < 150kb. Here's my chrome network panel: http://i.imgur.com/kUqttf3.png http://i.imgur.com/kUqttf3.png
  - idlewords 10y ago
    That screenshot is for material.io/components. Look at material.io.
    - SamBam 10y ago
      Ah, my apologies. It wasn't clear because you originally referred to "four lines of text", and the marerial.io site has got about a dozen links and animations, but I do get your point. It's still significantly closer to 800kb than 5mb, though: http://i.imgur.com/0fuGPwj.png http://i.imgur.com/0fuGPwj.png (I'm sure there's a better way to get the full size of the site than looking at all the requests and eyeballing the sum...)
twiss 10y ago
Instructions to view the demos of material-components-web: https://github.com/material-components/material-components-web#running-the-demos 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-web/master/demos/index.html https://rawgit.com/material-components/material-components-w...
mgummelt 10y ago
> 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 10y ago
  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 10y ago
    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 10y ago
      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.
  - yincrash 10y ago
    Material Design is mostly linked to Matias Duarte. I would ask you to take a look at his history instead of just asserting that it's just ad industry professionals. https://en.m.wikipedia.org/wiki/Mat%C3%ADas_Duarte https://en.m.wikipedia.org/wiki/Mat%C3%ADas_Duarte
r1ch 10y ago
> 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?
- rickycook 10y ago
  the usual thing in other MD HTML frameworks is the ripple effect on buttons, and a few others. it's upsetting but legitimate
- SamBam 10y ago
  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-web/tree/master/packages https://github.com/material-components/material-components-w...
kukx 10y ago
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-web https://github.com/material-components/material-components-w... [2] - https://material.angularjs.org/latest/demo/button https://material.angularjs.org/latest/demo/button
- pferdone 10y ago
  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 10y ago
    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 10y ago
      Does that page seriously require es6 (in production)!? https://puu.sh/sRdzE/f9a952f073.png https://puu.sh/sRdzE/f9a952f073.png
elliotlarson 10y ago
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.
- segphault 10y ago
  The conventions they use look like BEM, which is a relatively common approach for component-based design in CSS: https://css-tricks.com/bem-101/ https://css-tricks.com/bem-101/
- sratner 10y ago
  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 10y ago
    Oh, that's interesting. Thanks for the link!
TheAceOfHearts 10y ago
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 10y ago
  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-web/blob/master/docs/architecture.md 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/google/material-design-lite/issues/4984 https://github.com/material-components/material-components-web/commit/8d46ba05ecbc19af2d887cabbc0e3a88bf59be48 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.
chenster 10y ago
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.
- RandomInteger4 10y ago
  Google Drive?
- anilgulecha 10y ago
  I think any UI framework, once it's popular, is boring.
  - chenster 10y ago
    Popular, maybe, but it is undoubtedly boring from UI perspective.
FordPrefectAO 10y ago
https://material.io/ https://material.io/ has completely janky scrolling behavior in Firefox 50 on a 2015 MBP. Unacceptable
samdoidge 10y ago
Trust Google to have such an uninspiring design.
bosky101 10y ago
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

127 points by gcoguiec 10y ago

deleted 10y ago

[deleted]

zitterbewegung 10y ago

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

kevinstubbs 10y ago
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 10y ago
  MDL includes a JS library and it seems that there is a complete rewrite underway at the moment.
  - gcoguiec 10y ago
    In fact: https://github.com/google/material-design-lite/tree/master https://github.com/google/material-design-lite/tree/master
  - joshtynjala 10y ago
    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-web https://github.com/material-components/material-components-w...
    - tobltobs 10y ago
      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.
- trizzle21 10y ago
  Is there a suggested version for react? I know there are react versions out there, but I haven't had the time to look into them.
deleted 10y ago
[deleted]

Numberwang 10y ago

O god can't this ugly paradigm die already. Material design is the herpes of the Internet.

kevinstubbs 10y ago
I'm not a designer. Why is material design bad? What is better? Are there any situations/contexts where material design is the king?
- Numberwang 10y ago
  I can think of lot's of situations where material design would be an improvement (any UK or US bank site really) but I can't think of a situation where it is King. For example the text input box not having borders and all the slow animations. I struggle to think of a situation where Material is better than just basic css.
  - pitaj 10y ago
    "Basic CSS" is very vague. When you use basic CSS you end up with ugly or inconsistent design. There's a reason we have CSS frameworks and design standards.
- subpixel 10y ago
  My beef with Material Design is that it's too clever by half. It's often pretty, the animations are pleasant, but the interaction is just not intuitive enough for primetime. To wit, I've encountered them for years and I still have no idea what a floating circle with a plus sign in it is supposed to represent. Almost every time I've clicked one, it's begun a process of flow that was not my intention, so I've learned to avoid them. What Material Design is trying to do is to create a universal design language, based on the assumption that different apps designed in all sorts of different ways is a bad thing. While I admit that bad design comes in many shapes and forms, I actually feel like the context of an app should dictate how it is designed, and that in many cases it will call for something other than bold colored boxy components with assorted degrees of box-shadow.
10y ago

idlewords 10y ago

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.

deleted 10y ago
[deleted]
SquareWheel 10y ago
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 10y ago
  Sorry, click on the parent domain (the top corner link).
ChrisClark 10y ago
112k here for a fresh load (no caching).
SamBam 10y ago
Other folks are looking at the material.io site as well. It's no where close to 5mb, it's < 150kb. Here's my chrome network panel: http://i.imgur.com/kUqttf3.png http://i.imgur.com/kUqttf3.png
- idlewords 10y ago
  That screenshot is for material.io/components. Look at material.io.
  - SamBam 10y ago
    Ah, my apologies. It wasn't clear because you originally referred to "four lines of text", and the marerial.io site has got about a dozen links and animations, but I do get your point. It's still significantly closer to 800kb than 5mb, though: http://i.imgur.com/0fuGPwj.png http://i.imgur.com/0fuGPwj.png (I'm sure there's a better way to get the full size of the site than looking at all the requests and eyeballing the sum...)

twiss 10y ago

Instructions to view the demos of material-components-web: https://github.com/material-components/material-components-web#running-the-demos 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-web/master/demos/index.html https://rawgit.com/material-components/material-components-w...

mgummelt 10y ago

> 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 10y ago
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 10y ago
  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 10y ago
    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.
- yincrash 10y ago
  Material Design is mostly linked to Matias Duarte. I would ask you to take a look at his history instead of just asserting that it's just ad industry professionals. https://en.m.wikipedia.org/wiki/Mat%C3%ADas_Duarte https://en.m.wikipedia.org/wiki/Mat%C3%ADas_Duarte

r1ch 10y ago

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

rickycook 10y ago
the usual thing in other MD HTML frameworks is the ripple effect on buttons, and a few others. it's upsetting but legitimate
SamBam 10y ago
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-web/tree/master/packages https://github.com/material-components/material-components-w...

kukx 10y ago

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-web https://github.com/material-components/material-components-w... [2] - https://material.angularjs.org/latest/demo/button https://material.angularjs.org/latest/demo/button

pferdone 10y ago
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 10y ago
  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 10y ago
    Does that page seriously require es6 (in production)!? https://puu.sh/sRdzE/f9a952f073.png https://puu.sh/sRdzE/f9a952f073.png

elliotlarson 10y ago

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.

segphault 10y ago
The conventions they use look like BEM, which is a relatively common approach for component-based design in CSS: https://css-tricks.com/bem-101/ https://css-tricks.com/bem-101/
sratner 10y ago
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 10y ago
  Oh, that's interesting. Thanks for the link!

TheAceOfHearts 10y ago

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 10y ago
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-web/blob/master/docs/architecture.md 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/google/material-design-lite/issues/4984 https://github.com/material-components/material-components-web/commit/8d46ba05ecbc19af2d887cabbc0e3a88bf59be48 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.

chenster 10y ago

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.

RandomInteger4 10y ago
Google Drive?
anilgulecha 10y ago
I think any UI framework, once it's popular, is boring.
- chenster 10y ago
  Popular, maybe, but it is undoubtedly boring from UI perspective.

FordPrefectAO 10y ago

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

samdoidge 10y ago

Trust Google to have such an uninspiring design.

bosky101 10y ago

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