Porting from one css framework to another

Question

I recently got two similar jobs of porting a responsive website from one framework to another ie Zurb Foundation to Bootstap and Gumby Framework to Zurb/Bootstrap. Do I have to personally go through the various nitty gritties, functions and all or is there any other way. Also aren't these three frameworks connected, functions and all similar. (I've heard that Gumby's basically a fork of Zurb Foundation) How much work do you think i'll have to do, I'am relatively new to responsive design and this isn't one of my highest paying projects! :D

Answer 1

Just replace the CSS/JS files and then do a find/replace in all of your HTML files to swap in the correct classes. For instance, if you were going from Bootstrap to Foundation you would have to change all instances of col-sm-12 to small-12 columns .

Answer 2

It's a lot of work, and it can be overwhelming. I'd rather avoid it, but then again, I have also been in situations where you really can't — for instance when merging two code bases. The problem is that if you just start a project, you might not really care that much. But then by the time you start to care, it's already too late: all your HTML has bene structured according to the standards dictated by the CSS framework you started with.

I also addressed this problem here . In that answer, I mentioned experimenting with Pug mixins to produce my HTML, introducing a lever of indirection allowing me to change the way my HTML is getting generated if I choose to switch CSS frameworks in the future. That might not help in your specific situation, where you need to fix things after the fact, but it might be helpful to know about it anyhow.