Material Design for Bootstrap • Hacker News Board

Re: Material Design for Bootstrap

#21

Post by spankalee » Sun, Sep 28, 2014, 4:33 AM UTC

drcode wrote: post #10

Am I the only one who's disappointed by Google's UI library chops? How can they think it is sensible to release a UI design without having concrete, usable implementations in all the major UI frontends, including bootstrap, out of the box? The fact that someone outside of Google had to build this makes it look like Google's design guys have no credibility inside of Google, and are ignored by other Google devs.

Google released a concrete, usable set of custom elements that implement Material Design and should be usable in any framework. See the Paper Elements demo here: https://www.polymer-project.org/components/paper-elements/de...

Android L is also shipping with Material Design widgets: https://developer.android.com/preview/material/index.html

Google doesn't really use or promote Bootstrap (much... we're* so big I'm sure it's used somewhere), and Bootstrap is designed for a pre-web components, pre-flexbox world, so it shouldn't be too surprising that we didn't release a theme for it.

* I work for Google

Re: Material Design for Bootstrap

#22

Post by mholt » Sun, Sep 28, 2014, 4:36 AM UTC

I can't quite place it, but there's something about it that doesn't feel so "material"... the effects are over-used, like combining the hover effects with the click effects with shadows. It gets hard to follow what interactions are really happening.

This is a good start and could be really great, but it but needs some refining before it can be considered a true implementation of Material Design.

Re: Material Design for Bootstrap

#23

Post by stephenjwatkins » Sun, Sep 28, 2014, 5:03 AM UTC

nwh wrote: post #12

So "Material Design" is "Flat Design" with shadows? I'm not sure I can quite get used to this particular theme at all. The colors are pretty gaudy, the main action buttons (brown and purple) particularly are almost unreadable to me. I couldn't find the input boxes at all even though they had a header, they just parse as horizontal rules rather than something I can click on an add text. I respect the effort that has g…

After looking through Google's own material design guidelines (http://www.google.com/design/spec/material-design/introducti...), I find them much more pleasing than this bootstrap theme. When it comes to material design, it seems that context and execution details will play a big role in delivering an experience that looks and feels right.

Re: Material Design for Bootstrap

#24

Post by goldfeld » Sun, Sep 28, 2014, 5:14 AM UTC

nwh wrote: post #12

So "Material Design" is "Flat Design" with shadows? I'm not sure I can quite get used to this particular theme at all. The colors are pretty gaudy, the main action buttons (brown and purple) particularly are almost unreadable to me. I couldn't find the input boxes at all even though they had a header, they just parse as horizontal rules rather than something I can click on an add text. I respect the effort that has g…

The Google stuff looks eerily like Metro to me, but perhaps flat design with strict guidelines and good principles converge into similar looking aesthetics.

I just find "material design" obnoxious, pathological cargo-culting and can't bring myself to elocute it, except maybe if I'm referring to someone designing synthetic leather.

Re: Material Design for Bootstrap

#25

Post by mikeg8 » Sun, Sep 28, 2014, 5:26 AM UTC

vladikoff wrote: post #13

barsonme wrote: post #2

Does anybody have any examples of actual websites being built using material design? I know Google has a bunch, and there are websites like this, but when I was thinking of a design for a website a few weeks ago, I couldn't find any good examples of a website using material design -- they were all apps, which my website was not.

http://androidto.com/

wow, i really dislike the visuals of this website

Re: Material Design for Bootstrap

#26

Post by dmix » Sun, Sep 28, 2014, 6:03 AM UTC

nwh wrote: post #12

So "Material Design" is "Flat Design" with shadows? I'm not sure I can quite get used to this particular theme at all. The colors are pretty gaudy, the main action buttons (brown and purple) particularly are almost unreadable to me. I couldn't find the input boxes at all even though they had a header, they just parse as horizontal rules rather than something I can click on an add text. I respect the effort that has g…

Thats what I thought until I tried Android L...looks flat + shadows when you look at screenshots. But I was wrong. It's about layers and movement after interactions. You have to experience it with animations, sliding down notification menus, and tab-switching between apps. It feels like an very smooth remake of the Android 4 redesign, that flows cleanly between panels and screens.

The flat/shadowy UI elements are secondary IMO to the layering effects that have been added. Something bootstrap themes can't really capture.

Re: Material Design for Bootstrap

#27

Post by cordite » Sun, Sep 28, 2014, 6:06 AM UTC

It acts really weird on mobile.

On windows phone 8, it has an odd button highlighting deal, and on iOS 8 there is an uncomfortable 800 or so millisecond delay.

Re: Material Design for Bootstrap

#28

Post by RubyPinch » Sun, Sep 28, 2014, 6:12 AM UTC

spankalee wrote: post #21

drcode wrote: post #10

Am I the only one who's disappointed by Google's UI library chops? How can they think it is sensible to release a UI design without having concrete, usable implementations in all the major UI frontends, including bootstrap, out of the box? The fact that someone outside of Google had to build this makes it look like Google's design guys have no credibility inside of Google, and are ignored by other Google devs.

Google released a concrete, usable set of custom elements that implement Material Design and should be usable in any framework. See the Paper Elements demo here: https://www.polymer-project.org/components/paper-elements/de... Android L is also shipping with Material Design widgets: https://developer.android.com/preview/material/index.html Google doesn't really use or promote Bootstrap (much... we're* so big I'm sure…

polymer is done by google?

---

aside: I now strongly believe that, by HTML10, no elements will be defined and everything is going to be JS, and then there is going to be a massive HTML5/6 movement, "Hey guys, did you know that its possible to get /native forms/ though the web browser? and it doesn't even require javascript, manages to support in-built validation, you can even have 3d animations, all built-in to the html5 framework!"

Re: Material Design for Bootstrap

#29

Post by notatoad » Sun, Sep 28, 2014, 6:24 AM UTC

It seems to be pretty much completely broken in chrome on a nexus 7. Animations either don't fire or run at about 2fps.

For comparison, all the polymer demos for material design run buttery smooth.

Re: Material Design for Bootstrap

#30

Post by Bahamut » Sun, Sep 28, 2014, 7:12 AM UTC

givehimagun wrote: post #16

drcode wrote: post #10

Am I the only one who's disappointed by Google's UI library chops? How can they think it is sensible to release a UI design without having concrete, usable implementations in all the major UI frontends, including bootstrap, out of the box? The fact that someone outside of Google had to build this makes it look like Google's design guys have no credibility inside of Google, and are ignored by other Google devs.

You're not the only one thinking that. The ionic team is helping build angular specific material components. Google should have cleaned up its own stuff here.

https://material.angularjs.org/