
Material Design for Bootstrap - necrodome
https://fezvrasta.github.io/bootstrap-material-design/
======
eudoxus
Don't know if you are aware of this bootstrap material design/paper theme:
[http://bootswatch.com/paper](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.

~~~
FezVrasta
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"

~~~
tonyplee
How does someone detect "hover" on mobile platform?

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

~~~
stephenjwatkins
After looking through Google's own material design guidelines
([http://www.google.com/design/spec/material-
design/introducti...](http://www.google.com/design/spec/material-
design/introduction.html)), 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.

~~~
FezVrasta
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 :)

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

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

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

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

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

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

~~~
drcode
Newbie question: Do bootstrap themes like this work in react-bootstrap?
[http://react-bootstrap.github.io/](http://react-bootstrap.github.io/)

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

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

~~~
maxmcd
[http://chat.cc](http://chat.cc) is mostly material design outside the signup
page.

[https://www.dropbox.com/s/hk24p7rjillampz/Screenshot%202014-...](https://www.dropbox.com/s/hk24p7rjillampz/Screenshot%202014-09-28%2000.00.37.png?dl=0)

~~~
nwh
That front page renders horribly in FireFox.

[http://i.imgur.com/kfYvuiX.jpg](http://i.imgur.com/kfYvuiX.jpg)

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

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

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

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

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

------
rayshan
Google still hasn't released updated Roboto font on Google Fonts yet.
[https://twitter.com/addyosmani/status/492367467176792064](https://twitter.com/addyosmani/status/492367467176792064)

~~~
mh-
[https://fonts.googleapis.com/css?family=RobotoDraft:regular,...](https://fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium)

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

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

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

~~~
FezVrasta
There's not mobile support at the moment.

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

~~~
spankalee
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...](https://www.polymer-project.org/components/paper-
elements/demo.html#paper-checkbox)

Android L is also shipping with Material Design widgets:
[https://developer.android.com/preview/material/index.html](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

~~~
drcode
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)

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

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

I didn't like the save icon.

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

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

------
tambourine_man
Tapping the search box crashes my iPhone

------
general_failure
Very nicely done, will try this out soonish

------
sirji
I'm liking it

------
thatswrong0
The drop shadow is pretty ugly.

------
_random_
Original Google's inspiration for reference:

[http://metroui.org.ua/](http://metroui.org.ua/)

[http://aozora.github.io/bootmetro/docs/docs-
index.html](http://aozora.github.io/bootmetro/docs/docs-index.html)

