Replacing bootstrap.min.css on the site with material.min.css from this project without any other changes will transform all components and elements into a materialised look.
JavaScript has been separated in the new version v4.0.0-alpha.1
(current master
).
Regarding CSS, I intended to do the same but found that separating bootstrap.css
from material.css
isn’t a practical solution.
For example, bootstrap.css
has its own grid system with breakpoints that are different to the breakpoints defined in Material Design Guidelines, so for this module to work, the material.css needs to:
A) stop the grid system triggering new layout at Bootstrap breakpoints:
/* Bootstrap md breakpoint is 768px */
@media (min-width: 768px) {
.col-md-* {
float: none;
width: auto;
...
}
}
B) set new breakpoints for md according to Material Design Guidelines:
/* Material md breakpoint is 960px */
@media (min-width: 960px) {
.col-md-* {
float: left;
width: ...%;
...
}
}
Again, for material.css
to style a component like .btn
in this module, it first needs to reset quite a lot of styles it will inherit from .btn
in bootstrap.css
and then adds new styles on top of it.
The same will basically apply to every single Bootstrap component because material.css
is re-styling them completely.
Therefore, although you have bootstrap.css
and material.css
separately in the end, the bootstrap.css
will be useless as the majority of it will be overridden by material.css
. Meanwhile, the size of material.css
can potentially be doubled as maybe half of it will be resetting styles in bootstrap.css
.