Hacker News new | past | comments | ask | show | jobs | submit login
Material Design for Bootstrap (fezvrasta.github.io)
385 points by necrodome on Sept 28, 2014 | hide | past | web | favorite | 63 comments



Don't know if you are aware of this bootstrap material design/paper theme: http://bootswatch.com/paper

I personally think it matches the Google's implementation a little better, but that isn't to take away from the great work you've done.

One thing I noticed off the bat, is that the buttons have a shadow on them by default, not just on hover. And the click animations are slightly better.

But again, great work to you.


Buttons by default have not shadows if not on hover, to add shadows you have to add the class "btn-raised" and if you don't want them to have a shadow on hover add "btn-flat"


How does someone detect "hover" on mobile platform?


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 gone into creating this, but on a fundamental level I don't feel this is a good step in interface design.


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.


My project is just a 1:1 conversion from Polymer Paper project to Bootstrap. It's still in early developement but I'm sure it will become much better in future :)


It doesn't feel that way, though. Your colors for example seem significantly "darker".


agreed the colors seem to have higher saturation in the bootstrap version


The most important aspect of Material is the layered animations. This library is missing them.


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.


> So "Material Design" is "Flat Design" with shadows?

... and bright colors, yeah.

But it's really just a return to early 90s GUI design (flat, high-contrast, shadows): http://files.vforum.vn/2013/T08/img/diendanbaclieu-98580-tur...


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.


The flatness isn't the key point of Material Design, the interactions are.


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.


Material design isn't very suitable for the desktop web... and I'm not even sure it will work on mobile but let's hope it will.

Firstly, it's too constraining, too specific, this style could get pretty boring and bland if every app uses it. And for lots of apps (and majority of webs), different spacing, structure, etc. is optimal – forcing them to use a different spacing would lead to worsened usability and ugliness.

Secondly, the animations can get annoying and distracting quickly.


I couldn't word it better, and when Material design was first announced I was excited. The style will get boring quick if a large number of web apps use it. Then people will start straying from the guidelines to try differentiate.

Yes, most of the animations feel unnecessary.

I can't find any complex UI examples. Really want to see what it looks like when there are more than a few elements.


I much prefer Metro to Material, but following either would lead to better experience at least for me. That said, design "once" didn't really work with Windows and it's gonna be interesting watching Google try the same.


Any chance you would take contract work to do the same thing with react.js from facebook. It could be open source


I've started to create a version of it in React: http://sanderspies.github.io/react-material/

For now I wouldn't use it in production (broken build, not complete, etc.) - but it might be a start for what you want.


Newbie question: Do bootstrap themes like this work in react-bootstrap? http://react-bootstrap.github.io/


Yeah sure, react-bootstrap has all the normal bootstrap classes so as long as you theme it right you'll be sorted.


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.



I'm the developer of this project, my portfolio is built on top of it and I think matches Google material design guidelines. www.mywebexpression.com


Oh cool, thanks! Exactly what I was looking for!

I'm not sure I like the material design too much (not a slight against your designing) but I think it's more suited to application-style websites and whatnot.

That said, I appreciate the link and only time will tell... it's what I said about flat design as well, and I love flat now :)


http://chat.cc is mostly material design outside the signup page.

https://www.dropbox.com/s/hk24p7rjillampz/Screenshot%202014-...


That front page renders horribly in FireFox.

http://i.imgur.com/kfYvuiX.jpg


Friendly disclaimers please, seeing as this is your company.



wow, i really dislike the visuals of this website


I have to agree. I like the clean design but I feel like my eyes are fighting with the page. I don't mind any of the colours individually, but all the light thin text beside bring contrasting colours was really hard to digest.


I would like to see some examples too.


(93 days ago) [Ask HN] Material Design Bootstrap Theme https://news.ycombinator.com/item?id=7953042


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.


Certain elements work very well with Material Design, but one thing that is not working for the web are input fields and text areas. I tried it out for one of my projects and I didn't like it at all. It's very counter intuitive and text areas are a pain if you want users to be able to write more then 3 lines...


Hmm. Overall I like it, but I have some gripes:

- The inputs don't look like inputs.

- The animations on the navbars are really strange.

- The breadcrumbs are really out of place.

- So are the labels and panels. The colors are entirely wrong.

- Selects look weird.

- The contrast on the buttons at the top is atrocious. If I turn down my brightness I can't read the button text.

Other than that, it looks good.


Is there a sample website built using this? I'd like to test it out on some devices (not by emulation).


Google still hasn't released updated Roboto font on Google Fonts yet. https://twitter.com/addyosmani/status/492367467176792064



I like the ink effect its really nice. thanks for simplifying this for bootstrap.


I thought the point of material design was to push polymer, and try and get people into web components?

If it can be boiled down to just another bootstrap theme, then it's pointless.


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.


There's not mobile support at the moment.


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


It seems like it would be painful to use from react, which seems like a "major framework".

I'm not saying Google has any obligations to offer more code to support materials design... I'm just saying the impact of their design work is going to be limited because of it. (That certainly might be on purpose,I suppose)


Why would it be difficult to use from React? I haven't used React myself, but if it can produce DOM, it can use custom elements.


Actually with Bootstrap it's possible to create complex interfaces (I had written from scratch the Play Music interface with almost 1/3 of the markup needed by Google)... By the way I don't think google must release an implementation of their guidelines on every framework on the web.


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!"


Except that native forms are clunky and the validation is very basic. Javascript can save you some unnecessary requests to the server with quick & easy initial validation checks & allow you more control over the behavior of the page after form data submission (via xhr).

Javascript is also currently faster for animating, and can do a wider variety of animation.


I do not doubt the usefulness of JS, but...

so many blogs I've seen that require JS, when all they serve is text content...


They've released preview documentation of a design centered around an unreleased OS and you are upset they don't have Google implementations in all the other non-google UI frameworks already?

Its early days, they're clearly doing this first with Android L, Web Components (polymer-project.org) and Angular (material.angularjs.org).

And you're upset the implementation for Bootstrap is not done by Google? Boo hoo.


Google can do whatever they like, it just doesn't seem like they're using their available resources to accomplish a serious goal they seem to have (helping materials design become an impactful design language) and it will be interesting to see how the future of this design effort plays out.


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.



I was pleasantly surprised by the click animations on the buttons.

I didn't like the save icon.


I don't like the vertical align of the search input field.


I know, it's kinda bugged since I've edited the size of the input fields, will fix it soon ;)


Tapping the search box crashes my iPhone


Very nicely done, will try this out soonish


I'm liking it


The drop shadow is pretty ugly.





Registration is open for Startup School 2019. Classes start July 22nd.

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact

Search: