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.
So?
Material Design for Bootstrap
21–30 of 115 posts
Re: Material Design for Bootstrap
#22Earlier quoted context omitted.
What's the problem with animations? We have 8 cores with 3ghz+ and 16gb of ram to just render plain text?
I consider it as high distraction. Yeah, sure it looks great in demos and talks, but do we really want to have two seconds animation every time one switchs tab? Or would you like to have this kind of design in tool you use everyday, editor or IDE?
IIRC, in the design guidelines longer animations should be limited to context switches, where anything under two seconds is "acceptable speed" and anything under half a second is "fast".
There's no need to use the most extreme animations for minor actions in the interface, and the linked page is obviously a showcase, not a real application.
Re: Material Design for Bootstrap
#23I 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.
What's the problem with animations? We have 8 cores with 3ghz+ and 16gb of ram to just render plain text?
What percentage of machines do you think have those specs?
Re: Material Design for Bootstrap
#24Earlier quoted context omitted.
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.
I think that a compromise can be found, just check out Lollipop to see a successful example.
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.
Re: Material Design for Bootstrap
#25Definitely 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.
Re: Material Design for Bootstrap
#26Definitely 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.
Re: Material Design for Bootstrap
#27Earlier quoted context omitted.
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.
I think that a compromise can be found, just check out Lollipop to see a successful example.
That's up for debate. I have disabled the animation in L as they were too distracting.. Although I like Material Design overall.
Re: Material Design for Bootstrap
#28I 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.
What's the problem with animations? We have 8 cores with 3ghz+ and 16gb of ram to just render plain text?
I really really really Material design
I like that they make me think about things like depth to differentiate what's active , I like the little line in inputs ,it encourages users(me included) to fill the input,
the ripple effect is small and cheap animation and communicates to the user a click .as is with checkbox etc
the morphing transitions is their best idea , As a user I hate flickers , if you blink you miss them overlay are even worse unless you are alerting.
Re: Material Design for Bootstrap
#29Looks really nice, one nitpick: You use the placeholder-as-label anti-pattern (src: 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.
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.
Re: Material Design for Bootstrap
#30What's with the non-commercial licence?