
Material Design for Bootstrap - FezVrasta
http://fezvrasta.github.io/bootstrap-material-design/
======
dang
[https://hn.algolia.com/?q=material+design+bootstrap#!/story/...](https://hn.algolia.com/?q=material+design+bootstrap#!/story/forever/0/material%20design%20bootstrap)

------
cpursley
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
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
I was not referring to yours as you gave constructive feedback (and indeed,
mobile version needs work). I'm talking about the blanket dismissals.

------
kfinley
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/...](https://github.com/FezVrasta/bootstrap-material-
design/blob/master/LICENSE.md)

Edit: grammar, added license

~~~
chimeracoder
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).

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

~~~
FezVrasta
I've tried to follow the style of the Bootswatch, in this way it's very easy
for users to inject this theme in any Bootstrap website. I'm thinking about
writing a separated project sharing the CSS and basing it on some grid system
without Bootstrap dependencies, keeping the compatibility with Bootstrap.

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

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

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

~~~
Kiro
What's with the attitude? It was a good observation. I think a lot of people
wondered how it was done.

~~~
FezVrasta
I was just wondering why he posted it :)

~~~
espadrine
I crave neat implementations of fancy animations and this is one. Congrats!

------
amdt
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...](https://www.polymer-project.org/docs/elements/paper-
elements.html#paper-button)) 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
I think they'd let you if quality is on-par; not confusing their (prospect)
clients.

------
Kudos
What's with the non-commercial licence?

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

------
TuringTest
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
The "ripple effect" could be surely be improved, I'll try to improve it
studying the Lollipop implementation.

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

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

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

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

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

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

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

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

------
izolate
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
What's the problem with animations? We have 8 cores with 3ghz+ and 16gb of ram
to just render plain text?

~~~
mattmanser
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
I think that a compromise can be found, just check out Lollipop to see a
successful example.

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

------
DZittersteyn
Looks really nice, one nitpick: You use the placeholder-as-label anti-pattern
(src: [http://www.w3.org/TR/html5/forms.html#the-placeholder-
attrib...](http://www.w3.org/TR/html5/forms.html#the-placeholder-attribute))
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.

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

------
gumballhead
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
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
Thanks for the report!

------
warfangle
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
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
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
I'm going to release an huge update that will dramatically reduce the size (I
hope) and will ad the entire color palette available.

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

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

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

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

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

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

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

------
csmattryder
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
Where? Please open an Issue on [http://GitHub.com/fezvrasta/bootstrap-
material-design/issues](http://GitHub.com/fezvrasta/bootstrap-material-
design/issues)

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

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

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

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

------
trumbitta2
Nicely done.

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

~~~
FezVrasta
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)

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

~~~
FezVrasta
Good catch :P

------
mkawia
transitions , what I like most about material design is transitioning between
elements ,Morphing and filling .

But this remains best implementation

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

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

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

