Show HN: Material Design for Bootstrap – Powerful and Free Material Design UI KIT | Hacker News Reader

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

mdbootstrap.com

164 pointsBolduro46 comments

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/ I can't imagine any designer let alone regular user liking the way these forms look.

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 2 - https://flic.kr/p/MENUsv 3 - https://flic.kr/p/MxrPmi

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

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?

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.

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.

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!

Agreed. The drop shadow needs to be swapped between the two.

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

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

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

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

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

So basically attempting to do what UI's have always attempted to do. But as a 'metaphor'.

Well, that content has to take some form. Previously it was all about skeuromorphic design, to make things look like their real-life equivalent.

Then, the balance swung to the other extreme, with completely-flat design. Things were decidedly 2D and "digital".

Material Design is Google's attempt (among others [1]) to standardize while providing subtle cues of depth and interaction.

[1] - https://www.lightningdesignsystem.com/

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.

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

https://material.google.com/style/color.html#color-color-pal...

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

Also, this selected dropdown menu item O_o https://i.sli.mg/fWROjW.png

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!

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

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.

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

http://mdbootstrap.com/license/

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!

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

https://bootswatch.com/paper/

Which is available via CDN: https://www.bootstrapcdn.com/bootswatch/

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

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/

Even the navbar is a premium component. Pass.

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?

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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

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

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.

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

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.

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.

Really good work - thank you for post.

OMG!

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

Reply on news.ycombinator.com