Is it a bad idea to use Bootstrap 3.x's grid system instead of angular-flex-layout with angular2-material?

Question

I have recently started using angular2-material and angular-flex is driving me insane with inconsistent behavior/confusing/cluttered documentation(...). I now want to get rid of angular-flex-layout and use the bootstrap 3.x grid system. I read on another question that bootstrap might overwrite some angular-material styles. So my question is: has anyone has done this before (used angular-material components in combination with bootstrap 3.x grid system)? If so was there anything major that went wrong/got overwritten?

Answer 1

Been there, done that. I cannot think of a reason why the flex-layout system is worse/better than Bootstrap's grid system but I can accept some personal preference behind the decision. My experience was with Angular 1.x and its material design components but I believe the answer stands still.

Grid/Layout vs. Components

If you are careful enough not to mix the grid settings of Bootstrap and the layout settings of AMD then for positioning it can work pretty well and easy. The issues rise when using different components:

1. Using both Bootstrap and AMD components at the same time

When using a form that includes labels, different types of inputs, buttons, tooltips, icons, etc. you will find yourself in a huge mess of CSS hierarchy which keeps overwriting each other in the most unforeseen places. Just a few examples: BS 3.x and AMD handles some browser compatibility and accessibility somewhat differently in a few cases. AMD components' width and positioning highly relies on their parent containers layout settings which they not 100% get if those are in BS's grid system (this is probably the most blocking issue). Try to imagine the disabled/required/placeholder/etc. settings of an input: yes, it will become a huge mess of positioning, text sizes, and in any possible way.

2. DOM heavy approach

Both systems are quite heavy regarding DOM rendering, now imagine adding both. If you are displaying larger sets of data (not in the millions but in the few hundreds or thousands) then applying several (many times overlapping and overwriting each other) styles and JS features to the same element will put a huge burden on the browser that tries to render it. This was a really huge issue in my experience since we had to display ~2k items in a list that contained some action buttons. Shouldn't have been causing a hard time for any (IE10+) browser but it did.

3. Behaviour of styling, interaction

Last but not least I found it unreliable in the sense that it created way too many unforeseen issues. While creating the UI and trying to focus on the UX and responsivity I found myself debugging tiny positioning issues every 5 minutes. It was a huge hassle and I was never sure whether it would look the same (or at least similar!) in different browsers on different screens. Optimizing the UI took me at least 3 times the usual and at the end I was standing there with a huge bowl of spaghetti of CSS and JS.

Solution? (kind of)

MD Bootstrap is a great tool which pointed me in a good direction with my next project. So is Materialize. I am not saying that these will solve all your problems and that they are the only things to do but they pointed me to a great direction: think through what your UI will need the most and then choose wisely. If you will be doing plenty of grid-like positioning then go with BS and use CSS libraries to imitate MD. If you need angular's MVC and JS flexibility then you shall go with AMD but come up with a good layout handling.

I hope my experience sharing helped you or at least pointed to the good direction. Some further reading which helped me with my research back a few months ago:

Using Bootstrap for Angular and Material design for Angular together

Combining angular material with twitter bootstrap without conflicts