CODEWITHSUNDEEP
htmlcsszurb-foundation
numediaweb
numediaweb

Reputation: 17030

Use Zurb Foundation without breaking existing code

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, profiting of what Foundation has to offer (rows, columns..) without breaing the other code. Without using iFrames.

Upvotes: 0

Views: 56

Answers (1)

Colin Marshall
Colin Marshall

Reputation: 2142

According to the Global Styles page of the Foundation Docs:

Global Styles

Every Foundation project needs to include these global styles in order to work properly. These include things like basic formatting and global utility classes.

If you want to use the grid you have to include the _global.scss file, so you're going to have to update the old layout to support box-sizing: border-box or adjust the entire layout to work with Foundation.

Upvotes: 2

Related Questions