Material with Bootstrap 3?


#1

Hi guys,

I’d really like to use Material for an upcoming project but IE8 / 9 support is necessary.

Is there a ‘quick and dirty’ way to swap out Bootstrap 4 in favor of 3? I think I read somewhere that by applying the material.min.css over the boostrap.min.css, it should work… but what about the JS files?

Alternatively, could it be swapped in the ‘vars’ section of the _config.yml file, or at npm install stage?

Any help greatly appreciated, and thanks for all your hard work with this.

Regards,
Marmaliser.


#2

Hi @marmaliser,

Firstly, material.min.css should replace bootstrap.min.css, not applied over it. bootstrap.min.js can be used as it is while material.min.js, optionally, can be added as an addition for some extra functionalities such as floating labels and ripple effects.

Getting back to your question, you can update browsers settings of the postcss task in Gruntfile.js (around line 162) to include IE 8, so when you recompile your CSS, the postcss task will try its best to generate CSS that can support IE 8. However, I doubt this will be sufficient mainly due to IE 8’s lack of support for flexbox, media queries, etc as these are used regularly in this project. You will need to include some poylfills for the CSS to actually work in IE 8. A good place to start is:

Alternatively, we do have a version that is built upon Bootstrap 3 and this is currently sitting in the maintenance branch. Although this version does not support as many features as the currently active branches (dev, master), it may suit your need.


#3

Cheers @sesemaya -great support again.

Ill try out those suggestions, and let you guys know how I get on!!

Thanks again.
marmaliser.


#4

#5