While Foundation is great for creating whole page designs, it may not be the best choice when you just need a small snippet to add into existing HTML and CSS code. In Foundation's _global.scss
file, there are global settings such as:
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 can sometimes disrupt existing designs.
So my question is, how can I integrate a Foundation-based snippet div into a page while still benefiting from what Foundation offers (like rows, columns) without breaking the rest of the code? I want to avoid using iFrames if possible.