8 ms·

Material Design for Bootstrap

194 points by FezVrasta 12y ago

Macha 12y ago
Performance on the animations is very poor on my nexus 7.
- FezVrasta 12y ago
  unfortunately mobile support is not yet guaranteed, you may try to open an Issue on GitHub and see if someone finds a solution.
andybak 12y ago
Really lovely for the most part. The input boxes rather lack affordance/discoverability or whatever you want to call it. Basically - they don't look inputty enough.
- FezVrasta 12y ago
  They just follow the Material Design specs, and this is the purpose of this theme. One can then take this theme and customize it for its purposes.
izolate 12y ago
I hope this doesn't take off. If bootstrap wasn't annoying enough, we'll soon have this abomination on every MVP site. Animation for animation's sake. Design for design's sake. This is just tacky.
- FezVrasta 12y ago
  What's the problem with animations? We have 8 cores with 3ghz+ and 16gb of ram to just render plain text?
  - mattmanser 12y ago
    Because it takes time and is distracting. An interface should be snappy and get out of your way, not try to impress with pointless animations. That screams graphic designer trying and failing to do UX. Which is material in a nutshell really.
    - FezVrasta 12y ago
      I think that a compromise can be found, just check out Lollipop to see a successful example.
      - TuringTest 12y ago
        There are some glitches when animating layouts. The "primary action button" (is that what the floating circle was called?) sometimes covers the scrollbar after resizing the window, and jumps around on mouse-over; and when the browser window is not maximized, after selecting an option in the left vertical menu, the floating panels jump around a lot vertically before stopping. I'm using latest Chrome on Windows 7.
      - glyxbaer 12y ago
        That's up for debate. I have disabled the animation in L as they were too distracting.. Although I like Material Design overall.
    - TuringTest 12y ago
      Material animations are not (entirely) pointless, they are designed to improve user's awareness of UI's behaviors - primarily by making transitions between related screens less "beam-me up, Scotty" Teleport-like. Sure, it may be prone to abuse, but the base theory is sound. By tapping into the perceptual abilities of movement and shadows, some parts of the inner structure and layout of the interface (which are usually only known to the dialog's developer) are exposed to the user in an intuitive way.
    - warfangle 12y ago
      What's some of the best UX design you've done? Can you tell me about affordances, and why the Materials design falls short on them? On desktop? On touch devices? For us developers, a command line and vim (or emacs, not trying to start a war) can be the epitome of UX -- once we learn all those shortcuts. But for users, there's a lot more that comes into play. Indicating to a user when something can be interacted with and - more importantly, many times - how it can be interacted with is very important. Usually such indications will also inform about what kind of result will happen from the interaction: will the form submit, will the page reload, will I see a list of additional options? Just as important is indicating to the user that yes - you just interacted with something that can be interacted with. Depending on the action, this can be something as subtle as an underline - or as obvious as showing a loading indicator. The Material animations aren't just eyecandy for the sake of eyecandy. While touch screens are getting better, there are still situations where a touch doesn't necessarily register as a touch. It's super important to indicate to the user that a touch has been registered. It's just as important that this happens immediately, instead of after - say - a round-trip request to a server somewhere. If you've built and designed a user interface that has amazing affordances, a general perception of 'speediness' even if the server is being slow, and treats touch users as a first-class citizen ... I'd really like to see your work!
- paulojreis 12y ago
  > Design for design's sake. This is one of the most senseless things I've read in a long, long time. I guess you think "design" means "decoration".
  - collyw 12y ago
    Lots of people do. I am sure people asking to learn about design on this site have been directed to dribble. Actually design is a very ambiguous word for me as a developer. I use it to include application architecture, and user workflows amongst other things, while many other people seem to think its all about the shinny pictures on the front page.
    - crisnoble 12y ago
      The first mention I have ever seen of dribble on this site was from you, just now. I have had the opposite experience and it seems to me that design articles posted here tend to be focused on user experience improvements, research based explorations into best practices, and calls to stop gimmicky mumbo jumbo like scrolljacking.
- Kiro 12y ago
  > This is just tacky. According to you. I think it's beautiful.
  - Sakes 12y ago
    I personally don't like the current implementation. But I think they are doing some good work on this repo. Over the next year I expect it to mature quite a bit. Once I start using it on my current project, I will even contribute to the code base.
    - FezVrasta 12y ago
      Thanks :)
- thewarrior 12y ago
  I hope this Picasso thing doesn't take off. If Van Gogh wasn't annoying enough we'll soon have this cubism abomination in every museum. Beauty for beauty's sake. Art for art's sake. This is just tacky.
  - deleted 12y ago
    [deleted]
- greenpizza13 12y ago
  At the risk of being productive with my comment, please read Google's information on material design (http://www.google.com/design/spec/material-design/introduction.html http://www.google.com/design/spec/material-design/introducti...) and you'll understand that this isn't animation for animatio's sake or design for design's sake.
mkawia 12y ago
transitions , what I like most about material design is transitioning between elements ,Morphing and filling . But this remains best implementation
- FezVrasta 12y ago
  Actually I don't think this should be handled by the theme itself, if you want transitions you should handcraft them using CSS and JS probably. Maybe a solution would be a library to make these animations easier to create.
DZittersteyn 12y ago
Looks really nice, one nitpick: You use the placeholder-as-label anti-pattern (src: http://www.w3.org/TR/html5/forms.html#the-placeholder-attribute http://www.w3.org/TR/html5/forms.html#the-placeholder-attrib...) in the search field of the navbar. That almost put me off before I'd even seen the nice floating label pattern under the fold.
- FezVrasta 12y ago
  May you please open an issue on GitHub about this problem?
- TuringTest 12y ago
  There are some "floating label" versions of the components that alleviate that problem, and may come handy at places where the available space is really limited, such as mobile applications.
bithush 12y ago
I really like the look of Material but not all the animations.
TuringTest 12y ago
The floating labels in input text fields are a nice finding. The click animation for most elements is too strong, though, at least on the desktop. I haven't tried on touchscreens, they may be good enough feedback for direct finger touch, but they are distracting when using the mouse for clicks. Is the exact highlight animation mandated by Material guidelines, or can it be tweaked? I believe a fast, simultaneous "fade" effect that made the animated circle/rectangle lighter while its moving would be enough to make it subtler and less aggressive.
- FezVrasta 12y ago
  The "ripple effect" could be surely be improved, I'll try to improve it studying the Lollipop implementation.
Zolomon 12y ago
Back-button is broken, nothing changes upon going back.
- FezVrasta 12y ago
  Good catch :P
espadrine 12y ago
The ripple effect when clicking buttons is a 20x20px div with 100% border-radius and a CSS scale transform animation, created when clicked, where clicked.
- FezVrasta 12y ago
  So?
  - Kiro 12y ago
    What's with the attitude? It was a good observation. I think a lot of people wondered how it was done.
    - FezVrasta 12y ago
      I was just wondering why he posted it :)
      - espadrine 12y ago
        I crave neat implementations of fancy animations and this is one. Congrats!
awjr 12y ago
Definitely one to watch. There is a lot to like here. I'm not saying it's for everyone but I see this as something you would use with Ionic to deliver a very good Android 5 look and feel solution.
awjr 12y ago
Definitely one to watch. There is a lot to like here. I'm not saying it's for everyone but I see this as something you would use with Ionic to deliver a very good Android 5 look and feel solution.
Kudos 12y ago
What's with the non-commercial licence?
- desdiv 12y ago
  Kudos is referring to this: This program is free software: you can redistribute it and/or modify it under the terms you can find below. You can use this software for free only for no-profit projects. If you'd like to use this software in a commercial project you may contact the author (Federico Zivolo) of the software and ask for his permission and fulfill his conditions.
  - sesutton 12y ago
    The no commercial license definitely makes it not free (as in speech) software. This definitely killed my interest. Edit- I also think the license should be noted much more prominently otherwise its going to bite people.
- cpayne624 12y ago
  ? Seems pretty clear to me.
  - Kudos 12y ago
    It's not that clear at all, but the OP made some clarifications elsewhere in the thread.
JamesMcMinn 12y ago
I like material design on mobile, however I really don't get it on a desktop, and even less so on a website.
trumbitta2 12y ago
Nicely done. Shouldn't the wells – being "wells" – be inset instead of outset?
- FezVrasta 12y ago
  actually you are right lol.. I've used this class because was something that in "material design" is not documented... probably would be better use panels and add to well some different effect. I'll open an issue.. (#279)
Guillaume86 12y ago
I find it strange there's so many different material design implementations (for the web, no idea how it's going on in android), shoudn't at least the CSS be centralized to avoid uneccesary efforts and then provide specialized packages for things like bootstrap, jQuery UI themes, angular, react etc that all use the same base CSS? I know it's probably utopic but it looks like there's a lot of "wasted" energy in these kind of projetcs.
- oneeyedpigeon 12y ago
  If Google released their own, then presumably these would mostly disappear. I guess Google's focus right now is on Android, although elements of Material design are appearing on things like Google Docs, so they'd think they'd release that publicly, just as Twitter did with Bootstrap.
  - oneeyedpigeon 12y ago
    In fact, Google offers a downloadable zip file of color swatches, which is a bunch of adobe files. Great for designers who use those tools, less than ideal for designers who don't.
  - Raphael 12y ago
    https://www.polymer-project.org/docs/elements/material.html https://www.polymer-project.org/docs/elements/material.html Google has released this, for those brave enough to use web components.
- FezVrasta 12y ago
  I would like something like this as well. But when I've started the project (and even now) there are not good implementations in pure CSS of Material Design. Mine is the one that tries to follow the specs more than others, but I've not lot of time to dedicate to it so the process is kinda slow.
debaserab2 12y ago
This is basically unusable on an iPhone 5S - text/elements bleeding off the panel, unclear scroll areas (easy to swipe the background scroll area). I thought the big use case of MD was to deliver a more intuitive interface especially on mobile. This misses the mark by a wide margin.
- deleted 12y ago
  [deleted]
- Sakes 12y ago
  The purpose of material design is to provide consistent design principles across applications and devices (mobile/tablet/desktop). This repo is still very infantile, I'm sure your issues will eventually be addressed.
- warfangle 12y ago
  Looks like this happens on any device in portrait mode. The text in buttons doesn't wrap, for example - and the main content covers up the menu on the left. Ideally on a narrow-width device, the menu on the left would show/hide with a layered animation. While this is a good material design implementation for desktop and tablet users, it looks like small-form-factor design was forwent.
- FezVrasta 12y ago
  Currently this framework supports only desktop devices, the demo is not yet compatible with mobile but will be soon (let me find some time to work on it :P)
  - Sakes 12y ago
    You are doing great work Fez, you are very active/responsive to the issues on github. Anyone involved in the project knows the effort that has gone into it. I will be using your repo later this month, and will be more than happy to help contribute to your library.
jonifico 12y ago
I personally enjoy the animations, I just hate how damn slow they are! This needs to be much faster in response to user input.
csmattryder 12y ago
I noticed the simple modal, unlike Bootstrap's, doesn't seem to close when you click anywhere on the page. Is this by design, or is it on my end?
- FezVrasta 12y ago
  Where? Please open an Issue on http://GitHub.com/fezvrasta/bootstrap-material-design/issues http://GitHub.com/fezvrasta/bootstrap-material-design/issues
PaulHoule 12y ago
Ugh, have any of you actually used android l? Google runs video ads for the nexus 5 and 9 with the devicea turned off because they look atrocious when turned on.
warfangle 12y ago
Fantastic for the most part. Minified JS is less than 6k. The CSS is huge though - over 250k. This is expensive for mobile devices :(
- Kudos 12y ago
  No it isn't, it's 20KB minified and gzipped. The source map file is around 250KB, so I guess you confused it for that?
  - warfangle 12y ago
    Yeah, 36KB minified and zipped. That includes material.min.css, material-wfont.min.css and ripples.min.css. Un-zipped it's 253KB. But given that it fails dramatically on small-screen touch devices, the point is moot.
    - FezVrasta 12y ago
      I'm going to release an huge update that will dramatically reduce the size (I hope) and will ad the entire color palette available.
amdt 12y ago
This project raised a question for me: what is the copyright or licensing situation with Google’s Material Design? The specification itself appears to be copyright Google, but several implementations of the specification on the Web are under permissive licenses: Google’s Web Starter Kit (https://developers.google.com/web/starter-kit/ https://developers.google.com/web/starter-kit/) uses the Apache License 2.0 Polymer is implementing Material Design for its Paper Elements collection (https://www.polymer-project.org/docs/elements/paper-elements.html#paper-button https://www.polymer-project.org/docs/elements/paper-elements...) under a BSD license. Angular is implementing it (https://material.angularjs.org/ https://material.angularjs.org/) under the MIT license. Is Material Design for Google and Android apps only? Can anyone implement it on the Web?
- barrystaes 12y ago
  I think they'd let you if quality is on-par; not confusing their (prospect) clients.
mkohlmyr 12y ago
How about don't slow down navigation to play an animation. Function over form. Every time. Never artificially slow your user down for the sake of "pretty". Pretty is subjective, snappy is objective and appreciated by everyone. The navigation feels like when I was 12 and wrote my first c++ program adding "cool loading animations" for no reason.
- FezVrasta 12y ago
  This demo is intended as a clone of the Polymer demo page, and it must tell the user say "wow", not say "productive!". It's the developer that includes this framework that will have to make its app productive.
  - mkohlmyr 12y ago
    Having looked at the polymer page I see what you were going for and I can even agree with the above poster who commended your clever implementation of the animations. You even have a point saying it's on the developer. I just can't help but feel that many of these new design ideas and frameworks that are constantly posted are completely missing the mark by valuing "this looks pretty" over "this actually works". They break the back button. They break scrolling. They slow down the loading of new content by animating it. All these things while pretty create a worse user experience, and by including it in examples they make it inevitable it will find its way into the wild. I'm not asking for everything to work in lynx, I just want to not feel like my browsing has been handicapped.
    - FezVrasta 12y ago
      Actually the bug on my demo is on the back button. The scrolling works just fine. And I'm gonna fix the back button soon.
normloman 12y ago
I get that animations can help users sometimes. But these animations are waaaaayyyyy too long. Everyone stop with this material design bullshit. Just because Google released a new design language with a fancy name doesn't mean you have to mindlessly copy the most shallow parts of it. The fundamentals of UI design didn't change. Carry on.
- mortoc 12y ago
  The animations don't feel as bad on a touchscreen. I think the biggest problem with material design in this sort of context is that Google made something that feels nice enough on mobile but feels trashy on PC.
- barrystaes 12y ago
  This bootstrap material design also does not resonate here .. its hard to get right. I do not like the animations or pointless overlapping panels either. But stop? I disagree because Google's material design is not about the animations. Its about using minimal appearance chrome to strengthen UI context. Is it part of something, or is it "laying" on top of it? Is it approaching me, or laying back? Its 2,5D. For example note how the button shadow intuively distinguishes it from a card or other UI-panel. I see good things for Material Design whenever we have 2,5D or 3D displays in our devices. And so wil iOS with its icon/background parallax effect, which for now is only a gimmick. These where basically made with that in mind.
  - normloman 12y ago
    "Its about using minimal appearance chrome to strengthen UI context." Keeping chrome to a minimum and adding context are great design principles. But I wouldn't call it material design. It's called good design. I don't think we need a new name for fundamental design principles that have been known for years. Just calling it "material design" attracts the copycats, who would rather copy the look than understand the fundamentals. We should simply talk about good design, and encourage people to study timeless design principles.
srs0001 12y ago
You know, I really want to like it, but I just don't. I think Material works very well on touch surfaces. There are a ton of good design principles that it champions, but the interactions are strange on desktop.
cpursley 12y ago
God forbid I ever spend time making something and put it on hacker news. Dismissing an idea doesn't take any work. Good job, fezvrasta.
- debaserab2 12y ago
  Sorry, I know that's exactly how my comment reads. However, given how many CSS frameworks are posted to HN everyday I think it's reasonable to expect at very least the demo to be mobile friendly, especially if it's touting material design.
  - cpursley 12y ago
    I was not referring to yours as you gave constructive feedback (and indeed, mobile version needs work). I'm talking about the blanket dismissals.
- colmvp 12y ago
  Honestly that's on par for the course for anything visual/design related on HN.
Raphmedia 12y ago
This won't do until you can use keyboard navigation. Think accessibility.
- FezVrasta 12y ago
  Most of the components have accessibility by keyboard, but I've to admit that it must be improved a lot. It is one of the things I want do asap.
jdawg77 12y ago
If you like to be abel to use material in bootstrap (or more) make sure you check out semantic UI. Open source as well, let's you toggle between...everything really :) This looks pretty awesome as well, thanks for sharing.
thewarrior 12y ago
OP don't listen to all the haters in this thread. This is absolutely gorgeous and fluid smooth , atleast on Desktop. I can see this becoming very popular in the months ahead. And why all the hate for the animations ? They are well thought out and provide context . Design is continuously evolving and Material Design will also evolve to overcome some of its shortcomings such as a lack of information density and a rather flat look.
- normloman 12y ago
  Why the hate? Some of us have been around for a long time and seen the same UI mistakes repeated over and over. This approach to animation seems to take something that wasn't broken in the first place, and replace it with something worse. On most sites today, I put my cursor over a button and it lights up or fades on hover. If I click it or touch it, it depresses. That's plenty of affordance. I don't see how replacing a simple effect with a dramatic, second long button flash improves matters. And if the material evangelists had their way, this is how every website would work. Of course you can see this becoming popular in the months ahead. There's always some stupid trend that makes headlines for a few years, then fades away. Remember when gradients and reflections were in? Remember when everyone had to have a splash page? The best design ignores trends and builds upon all we've learned about user behavior since the first command line. There's always room for improvement and experimentation. But as long as we're locked in the fad-of-the-year hype cycle, we turn the whole web into a poorly designed experiment, with users as our unwilling test subjects.
  - tracker1 12y ago
    The kind of effect you're talking about goes against material design... actually a lot of what is in the theme breaks the guidelines and their intent. I'm disappointed that this project didn't start as a fork of bootstrap, then the changes applied. It really seems like a designer trying to make a money play off of other's efforts. I can't be certain that is the case, but that is definitely the feel I get, and even then it seems to be only halfway there with the shadows applied to elements they don't belong in.
kfinley 12y ago
FezVrasta - Nice work! I'm curious about your choice of license[0]. I've been considering the use of a non-commercial license for a project I'm working on. Would you mind discussing: 1. Your motivation for the choice. Is it to prevent people from reselling the theme? 2. The impact, if any, that the choice has had on adoption. With the popularity of the project, it doesn’t seem to be an issue. In your experience are users not using your project to built commercial application? Or are they violation the terms (un)intentionally? 3. Your longterm objectives for the project. Do you plan on making this into a business by selling commercial licenses? Do you plan on having a standard commercial license fee, or do you believe it works better to negotiate each license independently? Thanks! 0: https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md https://github.com/FezVrasta/bootstrap-material-design/blob/... Edit: grammar, added license
- chimeracoder 12y ago
  Yeah, I really love this project, but I have to say I generally avoid using non-free libraries when developing[0]. (To give one specific use case: if I would like to create a FOSS website, this means that I cannot use this library and provide the whole result under a single free license.) That aside, this looks really well-done! I already have a lot of sites built around Bootstrap, so I may give this a test drive later today. [0] Free-as-in-freedom, which includes the freedom to use software for any purpose (so a non-commercial use requirement makes the software non-free).
- FezVrasta 12y ago
  Hello. 1. I've used this license because I wanted to give something for free for people that was looking for this kind of theme. The restriction about commercial projects is because I don't want people to resell my theme and because I think that if someone is going to earn something using my work I should get something in exchange. 2. This license seems not a problem, users use it anyway following the terms. 3. Usually I negotiate individually.
bmm6o 12y ago
It looks pretty cool. There's one thing about the demo site that I found really confusing though - those white rectangles look like they should be modal dialogs but they aren't. I kept trying to dismiss the donation popup before I realized navigation wasn't disabled.
gumballhead 12y ago
I love material design, and this is more related to material design than this theme, because this is a beautiful and faithful implementation for web, but that button ripple is obnoxious. It also makes the ui seem very sluggish, because the traditional pressed state of a button is instant feedback, and this is an animation that takes a couple hundred ms or so to complete.
sumdeos 12y ago
Seems like there is a bug in the number validation example. When non-numeric data is entered, the floating label moves back into the input field making it very difficult to read. This is on Chrome. Other than that, this looks pretty cool; I particularly like the floating label animations. I may have to give it a try in my next project!
- FezVrasta 12y ago
  Thanks for the report!
danbucholtz 12y ago
This is really nice. Great work! Ignore the haters - you're on the right track with this. Most of the people giving you guff are not the type that create things - they're the ones who pretend to create things.
tracker1 12y ago
Other than menus (which don't follow material design guidelines), and modals... I don't think the designer really understands how material design is supposed to work. I'd been thinking that it would be nice to see a material design theme go into bootstrap.. I like that VezVrasta has integrated the color pallet but not sure how well integrated it is. I would say that the Jumbotron, wells, etc shouldn't be raised materially, and that the shadow effect should probably simple be a sub-class used by the JS based overlays, which should then follow the material design guidelines. Nice effort, but I think it's not quite right.
Synroc 12y ago
This looks great! I'll definitely keep this in mind for future development.
FezVrasta 12y ago
The transition between pages is now 100% faster. Hope it looks better. The ripple effect is now subtler.
dang 12y ago
https://hn.algolia.com/?q=material+design+bootstrap#!/story/forever/0/material%20design%20bootstrap https://hn.algolia.com/?q=material+design+bootstrap#!/story/...
tn13 12y ago
I am writing this comment only because of the so many negative comments on the thread. Kudos to FezVrasta for building thing. Clearly it is not perfect but I am sure he will work on ironing out the issues. Also if the license is MIT I would use it in my projects too.

194 points by FezVrasta 12y ago

Macha 12y ago

Performance on the animations is very poor on my nexus 7.

FezVrasta 12y ago
unfortunately mobile support is not yet guaranteed, you may try to open an Issue on GitHub and see if someone finds a solution.

andybak 12y ago

Really lovely for the most part. The input boxes rather lack affordance/discoverability or whatever you want to call it. Basically - they don't look inputty enough.

FezVrasta 12y ago
They just follow the Material Design specs, and this is the purpose of this theme. One can then take this theme and customize it for its purposes.

izolate 12y ago

I hope this doesn't take off. If bootstrap wasn't annoying enough, we'll soon have this abomination on every MVP site. Animation for animation's sake. Design for design's sake. This is just tacky.

FezVrasta 12y ago
What's the problem with animations? We have 8 cores with 3ghz+ and 16gb of ram to just render plain text?
- mattmanser 12y ago
  Because it takes time and is distracting. An interface should be snappy and get out of your way, not try to impress with pointless animations. That screams graphic designer trying and failing to do UX. Which is material in a nutshell really.
  - FezVrasta 12y ago
    I think that a compromise can be found, just check out Lollipop to see a successful example.
    - TuringTest 12y ago
      There are some glitches when animating layouts. The "primary action button" (is that what the floating circle was called?) sometimes covers the scrollbar after resizing the window, and jumps around on mouse-over; and when the browser window is not maximized, after selecting an option in the left vertical menu, the floating panels jump around a lot vertically before stopping. I'm using latest Chrome on Windows 7.
    - glyxbaer 12y ago
      That's up for debate. I have disabled the animation in L as they were too distracting.. Although I like Material Design overall.
  - TuringTest 12y ago
    Material animations are not (entirely) pointless, they are designed to improve user's awareness of UI's behaviors - primarily by making transitions between related screens less "beam-me up, Scotty" Teleport-like. Sure, it may be prone to abuse, but the base theory is sound. By tapping into the perceptual abilities of movement and shadows, some parts of the inner structure and layout of the interface (which are usually only known to the dialog's developer) are exposed to the user in an intuitive way.
  - warfangle 12y ago
    What's some of the best UX design you've done? Can you tell me about affordances, and why the Materials design falls short on them? On desktop? On touch devices? For us developers, a command line and vim (or emacs, not trying to start a war) can be the epitome of UX -- once we learn all those shortcuts. But for users, there's a lot more that comes into play. Indicating to a user when something can be interacted with and - more importantly, many times - how it can be interacted with is very important. Usually such indications will also inform about what kind of result will happen from the interaction: will the form submit, will the page reload, will I see a list of additional options? Just as important is indicating to the user that yes - you just interacted with something that can be interacted with. Depending on the action, this can be something as subtle as an underline - or as obvious as showing a loading indicator. The Material animations aren't just eyecandy for the sake of eyecandy. While touch screens are getting better, there are still situations where a touch doesn't necessarily register as a touch. It's super important to indicate to the user that a touch has been registered. It's just as important that this happens immediately, instead of after - say - a round-trip request to a server somewhere. If you've built and designed a user interface that has amazing affordances, a general perception of 'speediness' even if the server is being slow, and treats touch users as a first-class citizen ... I'd really like to see your work!
paulojreis 12y ago
> Design for design's sake. This is one of the most senseless things I've read in a long, long time. I guess you think "design" means "decoration".
- collyw 12y ago
  Lots of people do. I am sure people asking to learn about design on this site have been directed to dribble. Actually design is a very ambiguous word for me as a developer. I use it to include application architecture, and user workflows amongst other things, while many other people seem to think its all about the shinny pictures on the front page.
  - crisnoble 12y ago
    The first mention I have ever seen of dribble on this site was from you, just now. I have had the opposite experience and it seems to me that design articles posted here tend to be focused on user experience improvements, research based explorations into best practices, and calls to stop gimmicky mumbo jumbo like scrolljacking.
Kiro 12y ago
> This is just tacky. According to you. I think it's beautiful.
- Sakes 12y ago
  I personally don't like the current implementation. But I think they are doing some good work on this repo. Over the next year I expect it to mature quite a bit. Once I start using it on my current project, I will even contribute to the code base.
  - FezVrasta 12y ago
    Thanks :)
thewarrior 12y ago
I hope this Picasso thing doesn't take off. If Van Gogh wasn't annoying enough we'll soon have this cubism abomination in every museum. Beauty for beauty's sake. Art for art's sake. This is just tacky.
- deleted 12y ago
  [deleted]
greenpizza13 12y ago
At the risk of being productive with my comment, please read Google's information on material design (http://www.google.com/design/spec/material-design/introduction.html http://www.google.com/design/spec/material-design/introducti...) and you'll understand that this isn't animation for animatio's sake or design for design's sake.

mkawia 12y ago

transitions , what I like most about material design is transitioning between elements ,Morphing and filling . But this remains best implementation

FezVrasta 12y ago
Actually I don't think this should be handled by the theme itself, if you want transitions you should handcraft them using CSS and JS probably. Maybe a solution would be a library to make these animations easier to create.

DZittersteyn 12y ago

Looks really nice, one nitpick: You use the placeholder-as-label anti-pattern (src: http://www.w3.org/TR/html5/forms.html#the-placeholder-attribute http://www.w3.org/TR/html5/forms.html#the-placeholder-attrib...) in the search field of the navbar. That almost put me off before I'd even seen the nice floating label pattern under the fold.

FezVrasta 12y ago
May you please open an issue on GitHub about this problem?
TuringTest 12y ago
There are some "floating label" versions of the components that alleviate that problem, and may come handy at places where the available space is really limited, such as mobile applications.

bithush 12y ago

I really like the look of Material but not all the animations.

TuringTest 12y ago

The floating labels in input text fields are a nice finding. The click animation for most elements is too strong, though, at least on the desktop. I haven't tried on touchscreens, they may be good enough feedback for direct finger touch, but they are distracting when using the mouse for clicks. Is the exact highlight animation mandated by Material guidelines, or can it be tweaked? I believe a fast, simultaneous "fade" effect that made the animated circle/rectangle lighter while its moving would be enough to make it subtler and less aggressive.

FezVrasta 12y ago
The "ripple effect" could be surely be improved, I'll try to improve it studying the Lollipop implementation.

Zolomon 12y ago

Back-button is broken, nothing changes upon going back.

FezVrasta 12y ago
Good catch :P

espadrine 12y ago

The ripple effect when clicking buttons is a 20x20px div with 100% border-radius and a CSS scale transform animation, created when clicked, where clicked.

FezVrasta 12y ago
So?
- Kiro 12y ago
  What's with the attitude? It was a good observation. I think a lot of people wondered how it was done.
  - FezVrasta 12y ago
    I was just wondering why he posted it :)
    - espadrine 12y ago
      I crave neat implementations of fancy animations and this is one. Congrats!

awjr 12y ago

Definitely one to watch. There is a lot to like here. I'm not saying it's for everyone but I see this as something you would use with Ionic to deliver a very good Android 5 look and feel solution.

awjr 12y ago

Definitely one to watch. There is a lot to like here. I'm not saying it's for everyone but I see this as something you would use with Ionic to deliver a very good Android 5 look and feel solution.

Kudos 12y ago

What's with the non-commercial licence?

desdiv 12y ago
Kudos is referring to this: This program is free software: you can redistribute it and/or modify it under the terms you can find below. You can use this software for free only for no-profit projects. If you'd like to use this software in a commercial project you may contact the author (Federico Zivolo) of the software and ask for his permission and fulfill his conditions.
- sesutton 12y ago
  The no commercial license definitely makes it not free (as in speech) software. This definitely killed my interest. Edit- I also think the license should be noted much more prominently otherwise its going to bite people.
cpayne624 12y ago
? Seems pretty clear to me.
- Kudos 12y ago
  It's not that clear at all, but the OP made some clarifications elsewhere in the thread.

JamesMcMinn 12y ago

I like material design on mobile, however I really don't get it on a desktop, and even less so on a website.

trumbitta2 12y ago

Nicely done. Shouldn't the wells – being "wells" – be inset instead of outset?

FezVrasta 12y ago
actually you are right lol.. I've used this class because was something that in "material design" is not documented... probably would be better use panels and add to well some different effect. I'll open an issue.. (#279)

Guillaume86 12y ago

I find it strange there's so many different material design implementations (for the web, no idea how it's going on in android), shoudn't at least the CSS be centralized to avoid uneccesary efforts and then provide specialized packages for things like bootstrap, jQuery UI themes, angular, react etc that all use the same base CSS? I know it's probably utopic but it looks like there's a lot of "wasted" energy in these kind of projetcs.

oneeyedpigeon 12y ago
If Google released their own, then presumably these would mostly disappear. I guess Google's focus right now is on Android, although elements of Material design are appearing on things like Google Docs, so they'd think they'd release that publicly, just as Twitter did with Bootstrap.
- oneeyedpigeon 12y ago
  In fact, Google offers a downloadable zip file of color swatches, which is a bunch of adobe files. Great for designers who use those tools, less than ideal for designers who don't.
- Raphael 12y ago
  https://www.polymer-project.org/docs/elements/material.html https://www.polymer-project.org/docs/elements/material.html Google has released this, for those brave enough to use web components.
FezVrasta 12y ago
I would like something like this as well. But when I've started the project (and even now) there are not good implementations in pure CSS of Material Design. Mine is the one that tries to follow the specs more than others, but I've not lot of time to dedicate to it so the process is kinda slow.

debaserab2 12y ago

This is basically unusable on an iPhone 5S - text/elements bleeding off the panel, unclear scroll areas (easy to swipe the background scroll area). I thought the big use case of MD was to deliver a more intuitive interface especially on mobile. This misses the mark by a wide margin.

deleted 12y ago
[deleted]
Sakes 12y ago
The purpose of material design is to provide consistent design principles across applications and devices (mobile/tablet/desktop). This repo is still very infantile, I'm sure your issues will eventually be addressed.
warfangle 12y ago
Looks like this happens on any device in portrait mode. The text in buttons doesn't wrap, for example - and the main content covers up the menu on the left. Ideally on a narrow-width device, the menu on the left would show/hide with a layered animation. While this is a good material design implementation for desktop and tablet users, it looks like small-form-factor design was forwent.
FezVrasta 12y ago
Currently this framework supports only desktop devices, the demo is not yet compatible with mobile but will be soon (let me find some time to work on it :P)
- Sakes 12y ago
  You are doing great work Fez, you are very active/responsive to the issues on github. Anyone involved in the project knows the effort that has gone into it. I will be using your repo later this month, and will be more than happy to help contribute to your library.

jonifico 12y ago

I personally enjoy the animations, I just hate how damn slow they are! This needs to be much faster in response to user input.

csmattryder 12y ago

I noticed the simple modal, unlike Bootstrap's, doesn't seem to close when you click anywhere on the page. Is this by design, or is it on my end?

FezVrasta 12y ago
Where? Please open an Issue on http://GitHub.com/fezvrasta/bootstrap-material-design/issues http://GitHub.com/fezvrasta/bootstrap-material-design/issues

PaulHoule 12y ago

Ugh, have any of you actually used android l? Google runs video ads for the nexus 5 and 9 with the devicea turned off because they look atrocious when turned on.

warfangle 12y ago

Fantastic for the most part. Minified JS is less than 6k. The CSS is huge though - over 250k. This is expensive for mobile devices :(

Kudos 12y ago
No it isn't, it's 20KB minified and gzipped. The source map file is around 250KB, so I guess you confused it for that?
- warfangle 12y ago
  Yeah, 36KB minified and zipped. That includes material.min.css, material-wfont.min.css and ripples.min.css. Un-zipped it's 253KB. But given that it fails dramatically on small-screen touch devices, the point is moot.
  - FezVrasta 12y ago
    I'm going to release an huge update that will dramatically reduce the size (I hope) and will ad the entire color palette available.

amdt 12y ago

This project raised a question for me: what is the copyright or licensing situation with Google’s Material Design? The specification itself appears to be copyright Google, but several implementations of the specification on the Web are under permissive licenses: Google’s Web Starter Kit (https://developers.google.com/web/starter-kit/ https://developers.google.com/web/starter-kit/) uses the Apache License 2.0 Polymer is implementing Material Design for its Paper Elements collection (https://www.polymer-project.org/docs/elements/paper-elements.html#paper-button https://www.polymer-project.org/docs/elements/paper-elements...) under a BSD license. Angular is implementing it (https://material.angularjs.org/ https://material.angularjs.org/) under the MIT license. Is Material Design for Google and Android apps only? Can anyone implement it on the Web?

barrystaes 12y ago
I think they'd let you if quality is on-par; not confusing their (prospect) clients.

mkohlmyr 12y ago

How about don't slow down navigation to play an animation. Function over form. Every time. Never artificially slow your user down for the sake of "pretty". Pretty is subjective, snappy is objective and appreciated by everyone. The navigation feels like when I was 12 and wrote my first c++ program adding "cool loading animations" for no reason.

FezVrasta 12y ago
This demo is intended as a clone of the Polymer demo page, and it must tell the user say "wow", not say "productive!". It's the developer that includes this framework that will have to make its app productive.
- mkohlmyr 12y ago
  Having looked at the polymer page I see what you were going for and I can even agree with the above poster who commended your clever implementation of the animations. You even have a point saying it's on the developer. I just can't help but feel that many of these new design ideas and frameworks that are constantly posted are completely missing the mark by valuing "this looks pretty" over "this actually works". They break the back button. They break scrolling. They slow down the loading of new content by animating it. All these things while pretty create a worse user experience, and by including it in examples they make it inevitable it will find its way into the wild. I'm not asking for everything to work in lynx, I just want to not feel like my browsing has been handicapped.
  - FezVrasta 12y ago
    Actually the bug on my demo is on the back button. The scrolling works just fine. And I'm gonna fix the back button soon.

normloman 12y ago

I get that animations can help users sometimes. But these animations are waaaaayyyyy too long. Everyone stop with this material design bullshit. Just because Google released a new design language with a fancy name doesn't mean you have to mindlessly copy the most shallow parts of it. The fundamentals of UI design didn't change. Carry on.

mortoc 12y ago
The animations don't feel as bad on a touchscreen. I think the biggest problem with material design in this sort of context is that Google made something that feels nice enough on mobile but feels trashy on PC.
barrystaes 12y ago
This bootstrap material design also does not resonate here .. its hard to get right. I do not like the animations or pointless overlapping panels either. But stop? I disagree because Google's material design is not about the animations. Its about using minimal appearance chrome to strengthen UI context. Is it part of something, or is it "laying" on top of it? Is it approaching me, or laying back? Its 2,5D. For example note how the button shadow intuively distinguishes it from a card or other UI-panel. I see good things for Material Design whenever we have 2,5D or 3D displays in our devices. And so wil iOS with its icon/background parallax effect, which for now is only a gimmick. These where basically made with that in mind.
- normloman 12y ago
  "Its about using minimal appearance chrome to strengthen UI context." Keeping chrome to a minimum and adding context are great design principles. But I wouldn't call it material design. It's called good design. I don't think we need a new name for fundamental design principles that have been known for years. Just calling it "material design" attracts the copycats, who would rather copy the look than understand the fundamentals. We should simply talk about good design, and encourage people to study timeless design principles.

srs0001 12y ago

You know, I really want to like it, but I just don't. I think Material works very well on touch surfaces. There are a ton of good design principles that it champions, but the interactions are strange on desktop.

cpursley 12y ago

God forbid I ever spend time making something and put it on hacker news. Dismissing an idea doesn't take any work. Good job, fezvrasta.

debaserab2 12y ago
Sorry, I know that's exactly how my comment reads. However, given how many CSS frameworks are posted to HN everyday I think it's reasonable to expect at very least the demo to be mobile friendly, especially if it's touting material design.
- cpursley 12y ago
  I was not referring to yours as you gave constructive feedback (and indeed, mobile version needs work). I'm talking about the blanket dismissals.
colmvp 12y ago
Honestly that's on par for the course for anything visual/design related on HN.

Raphmedia 12y ago

This won't do until you can use keyboard navigation. Think accessibility.

FezVrasta 12y ago
Most of the components have accessibility by keyboard, but I've to admit that it must be improved a lot. It is one of the things I want do asap.

jdawg77 12y ago

If you like to be abel to use material in bootstrap (or more) make sure you check out semantic UI. Open source as well, let's you toggle between...everything really :) This looks pretty awesome as well, thanks for sharing.

thewarrior 12y ago

OP don't listen to all the haters in this thread. This is absolutely gorgeous and fluid smooth , atleast on Desktop. I can see this becoming very popular in the months ahead. And why all the hate for the animations ? They are well thought out and provide context . Design is continuously evolving and Material Design will also evolve to overcome some of its shortcomings such as a lack of information density and a rather flat look.

normloman 12y ago
Why the hate? Some of us have been around for a long time and seen the same UI mistakes repeated over and over. This approach to animation seems to take something that wasn't broken in the first place, and replace it with something worse. On most sites today, I put my cursor over a button and it lights up or fades on hover. If I click it or touch it, it depresses. That's plenty of affordance. I don't see how replacing a simple effect with a dramatic, second long button flash improves matters. And if the material evangelists had their way, this is how every website would work. Of course you can see this becoming popular in the months ahead. There's always some stupid trend that makes headlines for a few years, then fades away. Remember when gradients and reflections were in? Remember when everyone had to have a splash page? The best design ignores trends and builds upon all we've learned about user behavior since the first command line. There's always room for improvement and experimentation. But as long as we're locked in the fad-of-the-year hype cycle, we turn the whole web into a poorly designed experiment, with users as our unwilling test subjects.
- tracker1 12y ago
  The kind of effect you're talking about goes against material design... actually a lot of what is in the theme breaks the guidelines and their intent. I'm disappointed that this project didn't start as a fork of bootstrap, then the changes applied. It really seems like a designer trying to make a money play off of other's efforts. I can't be certain that is the case, but that is definitely the feel I get, and even then it seems to be only halfway there with the shadows applied to elements they don't belong in.

kfinley 12y ago

FezVrasta - Nice work! I'm curious about your choice of license[0]. I've been considering the use of a non-commercial license for a project I'm working on. Would you mind discussing: 1. Your motivation for the choice. Is it to prevent people from reselling the theme? 2. The impact, if any, that the choice has had on adoption. With the popularity of the project, it doesn’t seem to be an issue. In your experience are users not using your project to built commercial application? Or are they violation the terms (un)intentionally? 3. Your longterm objectives for the project. Do you plan on making this into a business by selling commercial licenses? Do you plan on having a standard commercial license fee, or do you believe it works better to negotiate each license independently? Thanks! 0: https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE.md https://github.com/FezVrasta/bootstrap-material-design/blob/... Edit: grammar, added license

chimeracoder 12y ago
Yeah, I really love this project, but I have to say I generally avoid using non-free libraries when developing[0]. (To give one specific use case: if I would like to create a FOSS website, this means that I cannot use this library and provide the whole result under a single free license.) That aside, this looks really well-done! I already have a lot of sites built around Bootstrap, so I may give this a test drive later today. [0] Free-as-in-freedom, which includes the freedom to use software for any purpose (so a non-commercial use requirement makes the software non-free).
FezVrasta 12y ago
Hello. 1. I've used this license because I wanted to give something for free for people that was looking for this kind of theme. The restriction about commercial projects is because I don't want people to resell my theme and because I think that if someone is going to earn something using my work I should get something in exchange. 2. This license seems not a problem, users use it anyway following the terms. 3. Usually I negotiate individually.

bmm6o 12y ago

It looks pretty cool. There's one thing about the demo site that I found really confusing though - those white rectangles look like they should be modal dialogs but they aren't. I kept trying to dismiss the donation popup before I realized navigation wasn't disabled.

gumballhead 12y ago

I love material design, and this is more related to material design than this theme, because this is a beautiful and faithful implementation for web, but that button ripple is obnoxious. It also makes the ui seem very sluggish, because the traditional pressed state of a button is instant feedback, and this is an animation that takes a couple hundred ms or so to complete.

sumdeos 12y ago

Seems like there is a bug in the number validation example. When non-numeric data is entered, the floating label moves back into the input field making it very difficult to read. This is on Chrome. Other than that, this looks pretty cool; I particularly like the floating label animations. I may have to give it a try in my next project!

FezVrasta 12y ago
Thanks for the report!

danbucholtz 12y ago

This is really nice. Great work! Ignore the haters - you're on the right track with this. Most of the people giving you guff are not the type that create things - they're the ones who pretend to create things.

tracker1 12y ago

Other than menus (which don't follow material design guidelines), and modals... I don't think the designer really understands how material design is supposed to work. I'd been thinking that it would be nice to see a material design theme go into bootstrap.. I like that VezVrasta has integrated the color pallet but not sure how well integrated it is. I would say that the Jumbotron, wells, etc shouldn't be raised materially, and that the shadow effect should probably simple be a sub-class used by the JS based overlays, which should then follow the material design guidelines. Nice effort, but I think it's not quite right.

Synroc 12y ago

This looks great! I'll definitely keep this in mind for future development.

FezVrasta 12y ago

The transition between pages is now 100% faster. Hope it looks better. The ripple effect is now subtler.

dang 12y ago

https://hn.algolia.com/?q=material+design+bootstrap#!/story/forever/0/material%20design%20bootstrap https://hn.algolia.com/?q=material+design+bootstrap#!/story/...

tn13 12y ago

I am writing this comment only because of the so many negative comments on the thread. Kudos to FezVrasta for building thing. Clearly it is not perfect but I am sure he will work on ironing out the issues. Also if the license is MIT I would use it in my projects too.