
Show HN: Material Design for Bootstrap – Powerful and Free Material Design UI KIT - Bolduro
http://mdbootstrap.com/material-design-for-bootstrap/?utm_source=HN-I-IX&utm_medium=HackerNews&utm_campaign=HackerNewsCamp
======
nik736
I don't understand why anyone wants to use MD by choice. I don't have an
opinion about the web looking similar (has pros and cons) but what I know is
that MD looks just not right and at times very weird. I understand that
everyone has a different taste but, for example:

[http://mdbootstrap.com/components/forms/](http://mdbootstrap.com/components/forms/)
I can't imagine any designer let alone regular user liking the way these forms
look.

~~~
cyberferret
We recently redesigned a customer's website from an older, uglier custom
format, to one that uses a Bootstrap Material style template (similar to the
OP's).

User feedback was that the newer one was much easier to understand. Layout was
somewhat the same, but we just used the Material specs to place and colour the
buttons etc. It just made things more intuitive for non technical users.

I don't think I am a particular good front end designer, but I was able to get
the screens to look reasonable while conforming to Material's design
principles (note: some information blurred in these screenshots as it is live
client data).

1 - [https://flic.kr/p/MxrPbt](https://flic.kr/p/MxrPbt) 2 -
[https://flic.kr/p/MENUsv](https://flic.kr/p/MENUsv) 3 -
[https://flic.kr/p/MxrPmi](https://flic.kr/p/MxrPmi)

~~~
dchest
A lot of websites that try to use Material Design look ugly, but yours look
very nice: clean and easy to understand. Good job!

------
adyus
It looks like the first (hero) element on the page breaks Material
conventions. You have a photo with a large z-index somehow below a panel with
a smaller z-index.

The idea of Material design was not just pretty shadows and drip animations on
click. It was about providing a metaphor for digital content on screens.

Still, great job on the technical effort of converting everything to Material!

~~~
davidw
> It was about providing a metaphor for digital content on screens.

Sounds complicated. Why not just directly provide the digital content on the
screen?

~~~
cyberferret
I'd suggest you check out Google's philosophy on Material Design [1] - it
explains it quite well.

HN readers are probably not the intended audience for MD. It was basically
intended so that layperson users would intuitively understand how to use an
interface without thinking too hard about it - e.g. which areas are clickable?
Did I really press that button (The ripple and/or bounce effect gives them a
visual confirmation that yes, they indeed did). Items appear to float above
each other to give the idea that there is more content underneath, or that
they can drill down further etc.

[1] - [https://material.google.com/#introduction-
principles](https://material.google.com/#introduction-principles)

~~~
deathanatos
> _e.g. which areas are clickable?_

Hasn't (at least what I interpret to be) "material design" _removed_ the
ability of the user to determine what is clickable today? It feels like a flat
colored box suffices as a "button" … sometimes. Sometimes it is really just a
flat colored box, and you can't tell up until the point you click it. Buttons
used to have a nice bevel around them, giving them the appearance of being … a
button. Being a bump on the page that _could_ be pushed inwards. Everything is
flat now.

> _Items appear to float above each other to give the idea that there is more
> content underneath, or that they can drill down further etc._

If I've ever seen drops shadows used to indicate anything other than just
being there for looks, then it went well over my head. That seems like the
most subtle, impossible to discover UI aspect. Can you show me one recent
"material design" UI that uses drop shadows to convey information about the
workings of the UI?

~~~
adyus
"Material Design" and Google's Material Design are different things.

The former is a label generally applied to flat, square design with minimal
flourishes. The latter is a set of principles and standards for how digital
interfaces should behave, along with a sample implementation.

In Google's MD, the clickable items are supposed to be identified either by
their elevation (drop shadows) or an all-caps, secondary-color treatment and
position at the bottom of elements.

It's true, icons and some text links could use some improvement.

------
TeeWEE
Too bad its doesnt feel like material. The fonts are wrong. The icons are not
material, and the effects animations are too fast... Buts its close to what
material is.

~~~
Nadya
I actually love MD, I hate how people focus more on the click-animation of the
button (the "pulse" animation originating from where someone clicks/taps) and
less about the rest of the guidelines.

Proper z-indexing, proper drop shadows, proper typography, proper colors, etc.

People typically use "flat colors" with "Material-esque animations" and call
it Material Design...

For example, where does the blue come from?
[http://i.imgur.com/ZvzuEtf.png](http://i.imgur.com/ZvzuEtf.png)

[https://material.google.com/style/color.html#color-color-
pal...](https://material.google.com/style/color.html#color-color-palette)

~~~
pbreit
The animations are the singular reason why I don't use Material. Are they
disable-able? I otherwise like the consistency and cleanliness.

------
marioseekr
What are the limitations of the free license from the perspective of someone
using "Free" package on a website (comercial or not)?

The "free" license seems permissive enough for commercial (or non-commercial)
use and I while there are "premium" components, these could be trivially be
re-created using the "free" packaged css/js.

PS. I'm not talking about "repackaging" the code in some secondary
tool/template/theme, but to use it on a website like an e-commerce website.

~~~
Bolduro
You can use Free Package both for your commercial and personal projects.

[http://mdbootstrap.com/license/](http://mdbootstrap.com/license/)

------
applecrazy
This is exactly what I was looking for since mid 2015 for a static site. MDL
didn't cut it for me, and Polyner was overkill. I will certainly looking into
this for some projects I am working on. Thanks for sharing!

~~~
gedy
Another simple and free alternative is the Paper Bootstrap theme from
Bootswatch:

[https://bootswatch.com/paper/](https://bootswatch.com/paper/)

Which is available via CDN:
[https://www.bootstrapcdn.com/bootswatch/](https://www.bootstrapcdn.com/bootswatch/)

It's not as polished as the nice library here but it works in a pinch.

~~~
Bolduro
On a side note, as for the CDN, MDB is there for you. You can also get it
through NPM, Bower and from Github.

It's all here: [http://mdbootstrap.com/getting-
started/](http://mdbootstrap.com/getting-started/)

~~~
mianos
Even the navbar is a premium component. Pass.

~~~
thekevan
The navbar comes with Bootstrap. I created pages with MDBootstrap that have a
navbar and the look is integrated. Maybe you are seeing some of their
customized navs?

------
xwvvvvwx
I don't really get all these material design kits and themes. For me the
material design look is very closely tied to google products, so anything that
is not a google product that makes use of these material design themes comes
across as pretty derivative.

------
ch4s3
This looks pretty nice. Has anyone used Material Design Lite from Google?
[https://getmdl.io/](https://getmdl.io/)

~~~
samblr
material design from google looks good - any idea on effort it will take to
write a bootstrap wrapper around this ? use bootstrap class (+additional
class) but underneath use styling and animation of google-material-design-
lite.

------
deanclatworthy
There are some issues here. The others will highlight them in the comments,
but I want to say something positive. I wanted to browse through your examples
page and wonder why I'd ever use this but you have really put great effort
into illustrating practical examples of how this library can be used. Great
job!

Edit: I'd like you to talk on the homepage, open and honestly about how much
extra download size this will add on top of standard bootstrap.

------
johnwheeler
I'm not a fan of material design, but your implementation of it is more subtle
and better than the original IMO. Also, your site is beautiful.

------
thekevan
While I am sort on the fence about Material Design itself, I do love
MDBootstrap. I just saw it about a month ago and have been playing with it
ever since. Specifically, I really like having the component prebuilt.

I will say that the way the folks behind this project design their pages and
lay them out is not to my taste, having the prebuilt components it a time
saver, and tweaking their look or layout isn't that hard.

------
6harleyef6
I love soo much Material Design. Now Material Design with Bootstrap is soo
cool solution. I waiting for Material Design with foundation.

------
chenster
The demo looks great! When I think of Google's material design, however, I
always picture Android's rather flat and blockish UI. Am I the only person who
doesn't think material design is attractive? Maybe this is what material
design really should be! Congrats!!

------
6DM
This is really cool, I'm surprised at how many variations you have of some of
these components.

One thing I noticed, your before/after confused me about which side was
before/after, I would suggest switching the panels so that after is on the
same side as the after button.

------
bcheung
This looks pretty interesting. Are there any libraries / plans that use this
with React?

------
pixel_fcker
On Safari on iOS 9, iPhone 6s, the buttons along the bottom of your date
picker (e.g. Close) are very difficult to click because touching that area
brings up safari's bottom menu bar.

------
sumitgt
Was trying to go through all the components. But clicking on any of them
closes the component box when the page for that component loads.

------
samblr
Really good work - thank you for post.

------
biocomputation
OMG!

Does this mean my website/apps can look as bad as Google's?

