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.