5 ms·

Material Design for Bootstrap

385 points by necrodome 12y ago

barsonme 12y ago
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.
- tzamora 12y ago
  I would like to see some examples too.
- maxmcd 12y ago
  http://chat.cc http://chat.cc is mostly material design outside the signup page. https://www.dropbox.com/s/hk24p7rjillampz/Screenshot%202014-09-28%2000.00.37.png?dl=0 https://www.dropbox.com/s/hk24p7rjillampz/Screenshot%202014-...
  - nwh 12y ago
    That front page renders horribly in FireFox. http://i.imgur.com/kfYvuiX.jpg http://i.imgur.com/kfYvuiX.jpg
  - strongbuilding 12y ago
    Friendly disclaimers please, seeing as this is your company.
- vladikoff 12y ago
  http://androidto.com/ http://androidto.com/
  - mikeg8 12y ago
    wow, i really dislike the visuals of this website
    - Zombieball 12y ago
      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.
- cheeaun 12y ago
  http://www.polymer-project.org/docs/elements/material.html http://www.polymer-project.org/docs/elements/material.html
- FezVrasta 12y ago
  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
  - barsonme 12y ago
    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 :)
tphan 12y ago
I don't like the vertical align of the search input field.
- FezVrasta 12y ago
  I know, it's kinda bugged since I've edited the size of the input fields, will fix it soon ;)
oakleon 12y ago
Any chance you would take contract work to do the same thing with react.js from facebook. It could be open source
- drcode 12y ago
  Newbie question: Do bootstrap themes like this work in react-bootstrap? http://react-bootstrap.github.io/ http://react-bootstrap.github.io/
  - nickcolley 12y ago
    Yeah sure, react-bootstrap has all the normal bootstrap classes so as long as you theme it right you'll be sorted.
- ssp_ 12y ago
  I've started to create a version of it in React: http://sanderspies.github.io/react-material/ 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.
jonalmeida 12y ago
Is there a sample website built using this? I'd like to test it out on some devices (not by emulation).
thatswrong0 12y ago
The drop shadow is pretty ugly.
general_failure 12y ago
Very nicely done, will try this out soonish
drcode 12y ago
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.
- givehimagun 12y ago
  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.
  - Bahamut 12y ago
    https://material.angularjs.org/ https://material.angularjs.org/
- ryanwatkins 12y ago
  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.
  - drcode 12y ago
    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.
- spankalee 12y ago
  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/demo.html#paper-checkbox 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 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
nwh 12y ago
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 12y ago
  After looking through Google's own material design guidelines (http://www.google.com/design/spec/material-design/introduction.html 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.
  - FezVrasta 12y ago
    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 12y ago
      It doesn't feel that way, though. Your colors for example seem significantly "darker".
      - riffraff 12y ago
        agreed the colors seem to have higher saturation in the bootstrap version
    - bsimpson 12y ago
      The most important aspect of Material is the layered animations. This library is missing them.
eudoxus 12y ago
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 12y ago
  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 12y ago
    How does someone detect "hover" on mobile platform?
abhinaykumar21 12y ago
I like the ink effect its really nice. thanks for simplifying this for bootstrap.
mholt 12y ago
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.
cordite 12y ago
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 12y ago
  There's not mobile support at the moment.
notatoad 12y ago
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.
zerolinesofcode 12y ago
(93 days ago) [Ask HN] Material Design Bootstrap Theme https://news.ycombinator.com/item?id=7953042 https://news.ycombinator.com/item?id=7953042
tambourine_man 12y ago
Tapping the search box crashes my iPhone
RivieraKid 12y ago
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 12y ago
  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.
- xixixao 12y ago
  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.
sirji 12y ago
I'm liking it
_random_ 12y ago
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
bresc 12y ago
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...
deleted 12y ago
[deleted]
bob_situmorang 12y ago
ugly
hardwaresofton 12y ago
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.
boobsbr 12y ago
I was pleasantly surprised by the click animations on the buttons. I didn't like the save icon.
owenversteeg 12y ago
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.
deleted 12y ago
[deleted]
rayshan 12y ago
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- 12y ago
  https://fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium https://fonts.googleapis.com/css?family=RobotoDraft:regular,...

385 points by necrodome 12y ago

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.

tzamora 12y ago
I would like to see some examples too.
maxmcd 12y ago
http://chat.cc http://chat.cc is mostly material design outside the signup page. https://www.dropbox.com/s/hk24p7rjillampz/Screenshot%202014-09-28%2000.00.37.png?dl=0 https://www.dropbox.com/s/hk24p7rjillampz/Screenshot%202014-...
- nwh 12y ago
  That front page renders horribly in FireFox. http://i.imgur.com/kfYvuiX.jpg http://i.imgur.com/kfYvuiX.jpg
- strongbuilding 12y ago
  Friendly disclaimers please, seeing as this is your company.
vladikoff 12y ago
http://androidto.com/ http://androidto.com/
- mikeg8 12y ago
  wow, i really dislike the visuals of this website
  - Zombieball 12y ago
    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.
cheeaun 12y ago
http://www.polymer-project.org/docs/elements/material.html http://www.polymer-project.org/docs/elements/material.html
FezVrasta 12y ago
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
- barsonme 12y ago
  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 :)

tphan 12y ago

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

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

oakleon 12y ago

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

drcode 12y ago
Newbie question: Do bootstrap themes like this work in react-bootstrap? http://react-bootstrap.github.io/ http://react-bootstrap.github.io/
- nickcolley 12y ago
  Yeah sure, react-bootstrap has all the normal bootstrap classes so as long as you theme it right you'll be sorted.
ssp_ 12y ago
I've started to create a version of it in React: http://sanderspies.github.io/react-material/ 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.

jonalmeida 12y ago

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

thatswrong0 12y ago

The drop shadow is pretty ugly.

general_failure 12y ago

Very nicely done, will try this out soonish

drcode 12y ago

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.

givehimagun 12y ago
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.
- Bahamut 12y ago
  https://material.angularjs.org/ https://material.angularjs.org/
ryanwatkins 12y ago
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.
- drcode 12y ago
  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.
spankalee 12y ago
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/demo.html#paper-checkbox 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 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

nwh 12y ago

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 12y ago
After looking through Google's own material design guidelines (http://www.google.com/design/spec/material-design/introduction.html 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.
- FezVrasta 12y ago
  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 12y ago
    It doesn't feel that way, though. Your colors for example seem significantly "darker".
    - riffraff 12y ago
      agreed the colors seem to have higher saturation in the bootstrap version
  - bsimpson 12y ago
    The most important aspect of Material is the layered animations. This library is missing them.

eudoxus 12y ago

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 12y ago
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 12y ago
  How does someone detect "hover" on mobile platform?

abhinaykumar21 12y ago

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

mholt 12y ago

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.

cordite 12y ago

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 12y ago
There's not mobile support at the moment.

notatoad 12y ago

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.

zerolinesofcode 12y ago

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

tambourine_man 12y ago

Tapping the search box crashes my iPhone

RivieraKid 12y ago

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 12y ago
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.
xixixao 12y ago
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.

sirji 12y ago

I'm liking it

_random_ 12y ago

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

bresc 12y ago

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

deleted 12y ago

[deleted]

bob_situmorang 12y ago

ugly

hardwaresofton 12y ago

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.

boobsbr 12y ago

I was pleasantly surprised by the click animations on the buttons. I didn't like the save icon.

owenversteeg 12y ago

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.

deleted 12y ago

[deleted]

rayshan 12y ago

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- 12y ago
https://fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium https://fonts.googleapis.com/css?family=RobotoDraft:regular,...