Mixing UI Frameworks Zurb Foundation with Twitter Bootstrap

Question

Can different UI frameworks be mixed?

Say, so that I can use both bootstrap and zurb foundation in the same project?

If yes are there any examples of sites where it has been done?

Answer 1

The answer is, it depends. Foundation 4 allows you either use presentational classes .large-12 .columns or sass mixins. You can also define in the _settings.scss which specific presentational classes should be generated. If you are using mixins directly, there is no need to have any presentational classes generated at all.

Bootstrap on the other hand uses Less. It is a similar technology but is not compatible with Sass/Scss. I know Bootstrap 3 also has a similar functionality with Less Mixins. This means you would need to create some sort of build script / file to cat both css files together or to include both generated files on your pages.

Then there is the JavaScript. Zurb Foundation uses Zepto (or tries to) by default. It is questionable whether Bootstrap 3 is compatible or not but at this point it is a bit of work to get it going. You would need to force the page to use jQuery.

Once that is done, maybe Foundation and Bootstrap might play nice or it is possible that they won't work at all. You would want to select each javascript file individually. Zurb Foundation provides this automatically and is very granular. Bootstrap 3 does not do this by default and you will have to include the javavascript files from the /js directory directly and remove the reference to the bootstrap.js file.

Once that is all said in done, you might consider why you are wanting to mix the two frameworks. Is it some element in one and not the other? Is it the design or styling? I would consider choosing the framework that does most of what you want to do out of the box. Then style it in Sass or Less or use jQuery plugins that give you a similar functionality.

In my experience Zurb Foundation is a lot more design agnostic. This means it provides a better experience if you have a design or you are a designer which allows you to implement exactly what you want to do. Bootstrap looks a lot more designed out of the box but it can be more difficult to override all the default styling. The advantage here is that you don't have to spend much time on the design initially, it looks great.

Both frameworks are fantastic and provide a lot of the functionality you need for a modern web site or app. Both are fully responsive and both allow a Mobile First approach. If you learn one it is very easy to use the other one, it is just a matter of syntax.

I don't know of any sites that implement a blending of the two frameworks. I assume this is because of some of the issues I described above.