CODEWITHSUNDEEP
twitter-bootstrapzurb-foundation
Deepankar Bajpeyi
Deepankar Bajpeyi

Reputation: 5859

Mixing UI Frameworks Zurb Foundation with Twitter Bootstrap

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?

Upvotes: 13

Views: 5049

Answers (2)

Melodic Crypter
Melodic Crypter

Reputation: 31

I kinda agree with manofstone. But right now I am using both Foundation and Bootstrap for my project. Of course we all know that Foundation is based on SCSS and Bootstrap on LESS. To cut some issues you just have to use the Bootstrap based on SCSS. Here are the links where you can download it:

Thomas McDonald's Sass/Bootstrap

Alademann's Sass/Bootstrap

It's up to you which work you're going to use. Read their Documentations. As for me, I am using McDonald's work. I use Foundation for my main responsive framework, and I only use Bootstrap's effects (JS). I also use some of Kube's features. Kube is another CSS framework. Here's how I setup things inside my HEAD tag:

<link rel="stylesheet" type="text/css" href="css/foundation/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/kube/kube.css" />
<link rel="stylesheet" type="text/css" href="css/kube/master.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap/responsive.css" />
<link rel="stylesheet" type="text/css" href="css/foundation/foundation.css" />
<link rel="stylesheet" type="text/css" href="css/Index.css" />
<script src="js/vendor/custom.modernizr.js"></script>

And here's a sample wherein I used Foundation and Bootstrap:

<div class="row">
<div class="large-12 columns">
<div class="large-10 columns" id="slideshow">
    <div class="carousel slide auto" id="picz" >
    <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#picz" data-slide-to="0" class="active"></li>
            <li data-target="#picz" data-slide-to="1"></li>
            <li data-target="#picz" data-slide-to="2"></li>
        </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner">...

These are actual codes of my project, so I'll not post everything. Hope it helps a little.

Upvotes: 3

JAMESSTONEco
JAMESSTONEco

Reputation: 2051

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.

Upvotes: 8

Related Questions