7 ms·

Show HN: Material Design for Bootstrap – Powerful and Free Material Design UI KIT

164 points by Bolduro 10y ago

applecrazy 10y ago
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!
- wanda 10y ago
  Out of curiosity, what were the shortcomings of MDL? I personally roll my own CSS/JS per project but I've got a project lined up which requires Material Design and I was considering MDL.
  - kowdermeister 10y ago
    MDL is pretty decent as long as you follow their logic of building material designish principles. I used it only once, but would go back again if it fits the use-case.
- Bolduro 10y ago
  I'm glad that you like it! We're keep on improving it as much as possible so any feedback means a world to us.
  - morokhovets 10y ago
    Feedback: live demo page eats almost all of my core i7 cpu (70% avg, 100% 2/3 of time, Win10/Chrome). I understand the page is very large and loaded with js but that was my first experience with your site, I clicked on Live Demo link and all of a sudden my mouse cursors became unresponsive/slow.
    - Bolduro 10y ago
      That's something we're currently working on. And by currently I mean that by the end of this week it should be solved. Thank's for noticing.
- gedy 10y ago
  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 10y ago
    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 10y ago
      Even the navbar is a premium component. Pass.
      - thekevan 10y ago
        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?
sealthedeal 10y ago
Looks great!
adyus 10y ago
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!
- anmorgan 10y ago
  Agreed. The drop shadow needs to be swapped between the two.
- davidw 10y ago
  > 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 10y ago
    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
    - davidw 10y ago
      So basically attempting to do what UI's have always attempted to do. But as a 'metaphor'.
    - deathanatos 10y ago
      > 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?
TeeWEE 10y ago
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.
- Bolduro 10y ago
  Actually, the font is "Roboto" from Google Material Design guidelines, so I think we've got it right. As for the speed of animations - we'll surely look into it. Thanks for the feedback!
  - dchest 10y ago
    It is Roboto, but it doesn't look like you follow the guidelines on how to use it https://material.google.com/style/typography.html https://material.google.com/style/typography.html
- dchest 10y ago
  Also, this selected dropdown menu item O_o https://i.sli.mg/fWROjW.png https://i.sli.mg/fWROjW.png
- Nadya 10y ago
  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-palette https://material.google.com/style/color.html#color-color-pal...
  - pbreit 10y ago
    The animations are the singular reason why I don't use Material. Are they disable-able? I otherwise like the consistency and cleanliness.
nik736 10y ago
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.
- eagsalazar2 10y ago
  It is a bad example. They've made choices with the button placement, icon size and alignment, links below form that aren't not part of MD and I agree look terrible. There are other examples of MD that look great.
  - jeffmould 10y ago
    Was going to make a similar comment. I don't think it is necessarily MD forms in general, but these examples leave a bad impression. The icons are not aligned and are improperly sized for the form.
- edwinyzh 10y ago
  Same here. All Material Design webpages I've seen so far feel too "blur" to me - I'm not sure if "blur" is a correct wording, but what I mean is that, with MD, the buttons, sections, and so on, are no longer clear on my eyes... Am I alone?
- cyberferret 10y ago
  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
deanclatworthy 10y ago
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.
marioseekr 10y ago
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 10y ago
  You can use Free Package both for your commercial and personal projects. http://mdbootstrap.com/license/ http://mdbootstrap.com/license/
xwvvvvwx 10y ago
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.
6DM 10y ago
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.
chenster 10y ago
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!!
ch4s3 10y ago
This looks pretty nice. Has anyone used Material Design Lite from Google? https://getmdl.io/ https://getmdl.io/
- samblr 10y ago
  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.
johnwheeler 10y ago
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.
samblr 10y ago
Really good work - thank you for post.
bcheung 10y ago
This looks pretty interesting. Are there any libraries / plans that use this with React?
biocomputation 10y ago
OMG! Does this mean my website/apps can look as bad as Google's?
sumitgt 10y ago
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.
pixel_fcker 10y ago
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.
thekevan 10y ago
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 10y ago
I love soo much Material Design. Now Material Design with Bootstrap is soo cool solution. I waiting for Material Design with foundation.

164 points by Bolduro 10y ago

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!

wanda 10y ago
Out of curiosity, what were the shortcomings of MDL? I personally roll my own CSS/JS per project but I've got a project lined up which requires Material Design and I was considering MDL.
- kowdermeister 10y ago
  MDL is pretty decent as long as you follow their logic of building material designish principles. I used it only once, but would go back again if it fits the use-case.
Bolduro 10y ago
I'm glad that you like it! We're keep on improving it as much as possible so any feedback means a world to us.
- morokhovets 10y ago
  Feedback: live demo page eats almost all of my core i7 cpu (70% avg, 100% 2/3 of time, Win10/Chrome). I understand the page is very large and loaded with js but that was my first experience with your site, I clicked on Live Demo link and all of a sudden my mouse cursors became unresponsive/slow.
  - Bolduro 10y ago
    That's something we're currently working on. And by currently I mean that by the end of this week it should be solved. Thank's for noticing.
gedy 10y ago
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 10y ago
  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 10y ago
    Even the navbar is a premium component. Pass.
    - thekevan 10y ago
      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?

sealthedeal 10y ago

Looks great!

adyus 10y ago

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!

anmorgan 10y ago
Agreed. The drop shadow needs to be swapped between the two.
davidw 10y ago
> 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 10y ago
  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
  - davidw 10y ago
    So basically attempting to do what UI's have always attempted to do. But as a 'metaphor'.
  - deathanatos 10y ago
    > 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?

TeeWEE 10y ago

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.

Bolduro 10y ago
Actually, the font is "Roboto" from Google Material Design guidelines, so I think we've got it right. As for the speed of animations - we'll surely look into it. Thanks for the feedback!
- dchest 10y ago
  It is Roboto, but it doesn't look like you follow the guidelines on how to use it https://material.google.com/style/typography.html https://material.google.com/style/typography.html
dchest 10y ago
Also, this selected dropdown menu item O_o https://i.sli.mg/fWROjW.png https://i.sli.mg/fWROjW.png
Nadya 10y ago
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-palette https://material.google.com/style/color.html#color-color-pal...
- pbreit 10y ago
  The animations are the singular reason why I don't use Material. Are they disable-able? I otherwise like the consistency and cleanliness.

nik736 10y ago

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.

eagsalazar2 10y ago
It is a bad example. They've made choices with the button placement, icon size and alignment, links below form that aren't not part of MD and I agree look terrible. There are other examples of MD that look great.
- jeffmould 10y ago
  Was going to make a similar comment. I don't think it is necessarily MD forms in general, but these examples leave a bad impression. The icons are not aligned and are improperly sized for the form.
edwinyzh 10y ago
Same here. All Material Design webpages I've seen so far feel too "blur" to me - I'm not sure if "blur" is a correct wording, but what I mean is that, with MD, the buttons, sections, and so on, are no longer clear on my eyes... Am I alone?
cyberferret 10y ago
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

deanclatworthy 10y ago

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.

marioseekr 10y ago

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 10y ago
You can use Free Package both for your commercial and personal projects. http://mdbootstrap.com/license/ http://mdbootstrap.com/license/

xwvvvvwx 10y ago

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.

6DM 10y ago

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.

chenster 10y ago

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

ch4s3 10y ago

This looks pretty nice. Has anyone used Material Design Lite from Google? https://getmdl.io/ https://getmdl.io/

samblr 10y ago
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.

johnwheeler 10y ago

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.

samblr 10y ago

Really good work - thank you for post.

bcheung 10y ago

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

biocomputation 10y ago

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

sumitgt 10y ago

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.

pixel_fcker 10y ago

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.

thekevan 10y ago

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 10y ago

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