using Bootstrap and foundation together?

Question

I am using twitter bootstrap for layout and css. But I like the foundation top bar navigation over what bootstrap provides. I tried to use the top bar code inside my html (built with bootstrap) and it messes up the layout. That is not surprising because both of them rely extensively on class named "row" and they have different properties.

One of the options I could think off is to override the row class some how in my style sheet but that would be too much of a work and doesn't seem right.

Other option might be using iframe.

Is there any other way this issue can be solved?

Answer 1

Ideally, you only need to use the top-bar CSS and JS code of Foundation, since that is the only component you mean to use. Here is the SCSS file (with dependancies on the variables declared in _settings.scss. Or you can use the generated CSS code.

If you still need to use .row, just copy the .row styling and name it different. I.e:

/* The Grid ---------------------- */
.foundation-row { width: 1000px; max-width: 100%; min-width: 768px; margin: 0 auto; }

Finally, dont't forget to include the jquery.foundation.topbar.js file and calling

$(document).foundationTopBar();

Answer 2

Old question but thought I'll share the latest if someone is looking for a seamless solution: Web Components

It's a bit of a more complex subject but will allow you to create widgets within completely isolated Shadow DOM's without overriding a thing. Read more about it here and here. Then you'll be able to do something like this:

<template id="templateContent">
     <style> @import "css/generalStyle.css"; </style>
</template>

Taken from this answer

Answer 3

Using an iframe for this is a bad idea. If you like the style for the Foundation top bar, just copy those styles into a custom class in your stylesheet.

Please note that you may have to override some of Bootstrap's default styles for the top bar to get it right.