Can Foundation 4 have a scope? - zurb-foundation

Question

Can Foundation 4 be initialized only in certain areas of the page?
For instance, if I have 2 divs, can I call foundation("#div2") and all CSS and javascript events are applied only within div#2?
Thanks a 1000!

Answer 1

Generally it won't affect you. The grid system for example is mainly controlled by CSS. For forms, unless you apply the custom class to your form the js for forms elements won't kick in. To illustrate that, one of the two forms below has the custom class and the other don't. Notice that Foundation will add two anchor tags and an unordered list for the form with custom class:
<form id="form1">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</form>
<form id="form2" class="custom">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</form>
Here's the fiddle to that to see it in action.
UPDATE: For general "section formatting" yes you can apply foundation to some sections of your page. But take note though that the grid system will still be applied even if the grid is outside the section you targeted. Again, that is because they are mainly controlled by CSS. Here's another illustration:
<h1>The Grid System will still be applied to this</h1>
<div class="row1">
<div class="large-5 large-centered columns">
<p class="panel">Centered Div</p>
</div>
</div>
<div id="foundationArea">
<h1>Only apply Foundation here</h1>
<form id="form1" class="custom">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</form>
<div class="row">
<div class="large-6 columns panel">
<p>Test</p>
</div>
</div>
</div>
<h1>Foundation is not allowed here</h1>
<form id="form2" class="custom">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</form>
See this updated fiddle to show the updated example given here.