Menu icon Foundation
Foundation breaks existing design

Foundation is good for creating the whole page design but not a good choice when it comes to small snippet that you want to include inside existing code (html, css). Foundation have this in the _global.scss:

html, body {
height: 100%;
}

// Set box-sizing globally to handle padding and border widths
html {
box-sizing: border-box;
}

*,
*:before,
*:after {
@include box-sizing(inherit);
}
This destroys existing designs.

My question is; how can i integrate the Foundation based snippet div inside a page that doesn't use foundation, profiting of what Foundation has to offer (rows, columns..) without breaking the other code. Without using iFrames.

conflictbreakdesigncoexist

Foundation is good for creating the whole page design but not a good choice when it comes to small snippet that you want to include inside existing code (html, css). Foundation have this in the _global.scss:

html, body {
height: 100%;
}

// Set box-sizing globally to handle padding and border widths
html {
box-sizing: border-box;
}

*,
*:before,
*:after {
@include box-sizing(inherit);
}
This destroys existing designs.

My question is; how can i integrate the Foundation based snippet div inside a page that doesn't use foundation, profiting of what Foundation has to offer (rows, columns..) without breaking the other code. Without using iFrames.

This post has been closed. No new replies can be added.

Rafi Benkual over 4 years ago

Are you building on a site that does not use border box? You can omit this CSS and it should still work fine.

Mixing an existing site with a framework is not the recommended practice though. I'd build the site on Foundation and re-use you existing UI within the grid structure.

abdessamad idrissi over 4 years ago

I see that foundation is based on box-sizing: border-box;, and it is a globally set rule! At the end I decided to build my many grid system using http://andhart.github.io/bijou/ as a base :)