index.html.erb in zurb-foundation-4.2.0

- old
+ new

@@ -124,10 +124,16 @@
         <dl>
           <dt><h5><a href="components/dropdown.html">Dropdown</a></h5></dt>
           <dd>We've made a dropdown plugin that makes it easy to attach a popover dropdown to any element on the page.</dd>
         </dl>
       </div>
+      <div class="large-4 columns end">
+        <dl>
+          <dt><h5><a href="components/dropdown.html">Interchange</a></h5></dt>
+          <dd>This plugin let's you load up the appropriate size image based on media queries that you define.</dd>
+        </dl>
+      </div>
     </div>
 
     <hr>
 
     <h3>How is a project structured?</h3>
@@ -135,11 +141,11 @@
 
     <div class="row">
       <div class="large-4 columns">
         <dl>
           <dt><h5>css</h5></dt>
-          <dd>Includes <code>foundation.css</code> and <code>foundation.min.css</code> so you can choose which to use. You can add <code>app.css</code> or any other stylesheet to use for custom styles that will sit on top of the Foundation core as overrides.</dd>
+          <dd>Includes <code>foundation.css</code> and <code>foundation.min.css</code> so you can choose which to use. You'll also see <code>normalize.css</code>, which we use for resets. Add another stylesheet on top of Foundation to override defaults.</dd>
         </dl>
       </div>
       <div class="large-4 columns">
         <dl>
           <dt><h5>js</h5></dt>
@@ -179,11 +185,11 @@
       <div class="large-12 columns">
         <div class="panel">
           <h6 class="subheader"><strong>Using the Gem?</strong> You'll see a couple extra pieces in your project upon creation. These are:</h6>
           <dl>
             <dt>scss/</dt>
-            <dd>Your main style folder is named <strong>scss/</strong> and contains <code>app.scss</code> (which has the foundation gem import and commented portions you can pick and choose.) and <code>normalize.scss</code>. Override the Foundation styles within your app.scss file. You can see the compiled CSS in your stylesheets directory after you manually <span class="has-tip top" title="$ compass compile <filename>">compile</span> or <span class="has-tip top" title="$ compass watch <directory>">watch</span>. This directory also includes <code>_settings.scss</code>, which is used to control variables that help easily style Foundation.</dd>
+            <dd>Your main style folder is named <strong>scss/</strong> and contains <code>app.scss</code> (which has the foundation gem import and commented portions you can pick and choose). Override the Foundation styles within your <code>app.scss</code> file. You can see the compiled CSS in your stylesheets directory after you manually <span class="has-tip top" title="$ compass compile <filename>">compile</span> or <span class="has-tip top" title="$ compass watch <directory>">watch</span>. This directory also includes <code>_settings.scss</code>, which is used to control variables that help easily style Foundation. You'll also notice that the directory names are slightly different. Compass defaults to "stylesheets", "javascripts", and "image".</dd>
             <dt></i>config.rb</dt>
             <dd>This file is used by <a href="http://compass-style.org">Compass</a> to compile your project. Here you can control the output style of your CSS, the structure of your directories and other useful settings.</dd>
           </dl>
         </div>
       </div>
@@ -202,13 +208,15 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width" />
   <title>Foundation 4</title>
 
+  <!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->
   <link rel="stylesheet" href="css/normalize.css" />
-  <!-- If you are using CSS version, add this -->
   <link rel="stylesheet" href="css/foundation.css" />
+
+  <!-- If you are using the gem version, you need this only -->
   <link rel="stylesheet" href="css/app.css" />
 
   <script src="js/vendor/custom.modernizr.js"></script>
 
 </head>
@@ -233,12 +241,13 @@
   <script src="js/foundation/foundation.placeholder.js"></script>
   <script src="js/foundation/foundation.reveal.js"></script>
   <script src="js/foundation/foundation.section.js"></script>
   <script src="js/foundation/foundation.tooltips.js"></script>
   <script src="js/foundation/foundation.topbar.js"></script>
+  <script src="js/foundation/foundation.interchange.js"></script>
   <script>
-  $(document).foundation();
+    $(document).foundation();
   </script>
 </body>
 </html>
 
 ', :html %>
@@ -257,10 +266,10 @@
       <div class="large-4 columns">
         <dl>
           <dt><h5>CSS &amp; Modernizr</h5></dt>
           <dd>The default CSS download includes everything you need to get going, including necessary styles and our custom Modernizr script.</dd>
           <dt>CSS</dt>
-          <dd>We include <code>foundation.min.css</code> and <code>foundation.css</code>. The difference here is whether or not you want minified code or not (link whichever you want, but not both).</dd>
+          <dd>We include <code>foundation.min.css</code> and <code>foundation.css</code> with a default CSS download. The difference here is whether or not you want minified code or not (link whichever you want, but not both).</dd>
         </dl>
       </div>
       <div class="large-4 columns">
         <dl>
           <dt>Modernizr</dt>