docs/index.html.erb in zurb-foundation-4.3.1 vs docs/index.html.erb in zurb-foundation-4.3.2

- old
+ new

@@ -30,116 +30,116 @@ <h5 class="subheader">We've got you covered when it comes to useful features and we've made it easy to take out what you don't need. Here's what you'll get when you create a project using our Sass version or the default CSS version:</h5> <div class="row"> <div class="large-4 columns"> <dl> - <dt><h5><a href="components/grid.html">The Grid</a></h5></dt> + <dt><a href="components/grid.html">The Grid</a></dt> <dd>Our grid works on almost any device and has support for nesting, source ordering, offsets and device presentation. It almost makes creating layouts too easy!</dd> </dl> </div> <div class="large-4 columns"> <dl> - <dt><h5><a href="components/type.html">Typography</a></h5></dt> + <dt><a href="components/type.html">Typography</a></dt> <dd>Our type is based on a golden ratio modular scale that creates meaningful relationships for the copy on the page. It's easily updated using Scss or our CSS customizer.</dd> </dl> </div> <div class="large-4 columns"> <dl> - <dt><h5><a href="components/buttons.html">Buttons</a></h5></dt> + <dt><a href="components/buttons.html">Buttons</a></dt> <dd>Buttons are a core interactive element of the Web. We've included styles for creating simple marketing CTAs to complex application toolbars.</dd> </dl> </div> </div> <div class="row"> <div class="large-4 columns"> <dl> - <dt><h5><a href="components/top-bar.html">Navigation</a></h5></dt> + <dt><a href="components/top-bar.html">Navigation</a></dt> <dd>People have to get around. Navigation styles in Foundation include a complex top bar that supports 3-level dropdown navigation for simple bars, sidebars and subnav pills.</dd> </dl> </div> <div class="large-4 columns"> <dl> - <dt><h5><a href="components/forms.html">Forms</a></h5></dt> + <dt><a href="components/forms.html">Forms</a></dt> <dd>Built with the Foundation Grid, you can create simple or complicated forms quickly and easily&mdash; validation states, custom select, radio buttons and more.</dd> </dl> </div> <div class="large-4 columns"> <dl> - <dt><h5><a href="components/panels.html">UI Elements</a></h5></dt> + <dt><a href="components/panels.html">UI Elements</a></dt> <dd>We've also included lots of useful elements like visibility classes (to hide or show things based on screen size or orientation), labels, alerts, tooltips, panels and a lot more.</dd> </dl> </div> </div> <div class="row"> <div class="large-4 columns"> <dl> - <dt><h5><a href="components/section.html">Section</a></h5></dt> + <dt><a href="components/section.html">Section</a></dt> <dd>Whether it's entire pages or simple tabbed content, Foundation's tabs get the job done. Not only stylish, but interactive out of the box.</dd> </dl> </div> <div class="large-4 columns"> <dl> - <dt><h5><a href="components/orbit.html">Orbit</a></h5></dt> + <dt><a href="components/orbit.html">Orbit</a></dt> <dd>A powerful image or content slider that works responsively and includes tons of useful options, such as timers, paddles, bullet thumbs and more.</dd> </dl> </div> <div class="large-4 columns"> <dl> - <dt><h5><a href="components/reveal.html">Reveal</a></h5></dt> + <dt><a href="components/reveal.html">Reveal</a></dt> <dd>You can easily call modals without writing any JS, even spawn subsequent modals cleanly on the same page. Reveal works across devices.</dd> </dl> </div> </div> <div class="row"> <div class="large-4 columns"> <dl> - <dt><h5><a href="components/clearing.html">Clearing</a></h5></dt> + <dt><a href="components/clearing.html">Clearing</a></dt> <dd>Show off your images in style with our easy to use gallery plugin. It's built with simple unordered lists that can be styled to your hearts content.</dd> </dl> </div> <div class="large-4 columns"> <dl> - <dt><h5><a href="components/magellan.html">Magellan</a></h5></dt> + <dt><a href="components/magellan.html">Magellan</a></dt> <dd>A flexible sticky navigation that knows where you are on the page. You just tell it what to recognize and set it off.</dd> </dl> </div> <div class="large-4 columns"> <dl> - <dt><h5><a href="components/joyride.html">Joyride</a></h5></dt> + <dt><a href="components/joyride.html">Joyride</a></dt> <dd>This plugin lets you give users a tour of your site or app. Joyride is easy to customize using CSS or our Scss variables.</dd> </dl> </div> </div> <div class="row"> <div class="large-4 columns"> <dl> - <dt><h5><a href="components/tooltips.html">Tooltips</a></h5></dt> + <dt><a href="components/tooltips.html">Tooltips</a></dt> <dd>Tooltips lets you add quick hover or tap tooltips to elements.</dd> </dl> </div> <div class="large-4 columns end"> <dl> - <dt><h5><a href="components/dropdown.html">Dropdown</a></h5></dt> + <dt><a href="components/dropdown.html">Dropdown</a></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/interchange.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> + <dt><a href="components/interchange.html">Interchange</a></dt> + <dd>This plugin lets you load up the appropriate size image based on media queries that you define.</dd> </dl> </div> </div> <div class="row"> <div class="large-4 columns"> <dl> - <dt><h5><a href="components/abide.html">Abide</a></h5></dt> + <dt><a href="components/abide.html">Abide</a></dt> <dd>Abide is an HTML5 form validation library that supports the native API by using patterns and required attributes.</dd> </dl> </div> </div> @@ -149,44 +149,44 @@ <h5 class="subheader">We follow common patterns for directory structure that are logical and easily maintained. Below is an explanation of each file you'll get when you create a project using our gem or download via our <a href="http://foundation.zurb.com/migration.php">customizer</a>.</h5> <div class="row"> <div class="large-4 columns"> <dl> - <dt><h5>css</h5></dt> + <dt>css</dt> <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> + <dt>js</dt> <dd>All of our plugins and the necessary JavaScript to make Foundation work properly. <strong>All JS is initiated by default</strong>.</dd> </dl> </div> <div class="large-4 columns"> <dl> - <dt><h5>img</h5></dt> + <dt>img</dt> <dd>This directory actually comes empty in Foundation 4! We no longer have any images included in the core of Foundation.</dd> </dl> </div> </div> <div class="row"> <div class="large-4 columns"> <dl> - <dt><h5>index.html</h5></dt> + <dt>index.html</dt> <dd>A sample structure for page content, giving you something to use as a basic structural template for the rest of the pages in your project.</dd> </dl> </div> <div class="large-4 columns"> <dl> - <dt><h5>humans.txt</h5></dt> + <dt>humans.txt</dt> <dd>A way to tell the world about the people that worked on the sites you build, giving them kudos they deserve.</dd> </dl> </div> <div class="large-4 columns"> <dl> - <dt><h5>robots.txt</h5></dt> + <dt>robots.txt</dt> <dd>Give instructions to web robots so search engines know what to do when they crawl your site for content.</dd> </dl> </div> </div> <br> @@ -195,11 +195,11 @@ <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). 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> + <dt>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> </div> @@ -262,42 +262,42 @@ ', :html %> <div class="row"> <div class="large-4 columns"> <dl> - <dt><h5>Doctype &amp; Head</h5></dt> + <dt>Doctype &amp; Head</dt> <dd>We use the HTML doctype declaration to tell the browser what to expect. From there we've used a <a href="http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/">technique by Paul Irish</a> that attaches classes to the HTML for IE. After that, we set the character set to UTF-8.</dd> <dt>Meta Viewport tag</dt> <dd>This is used to make sure smaller devices use the device width as the viewport width.</dd> <dt>Title Tag</dt> <dd>This one is pretty self-explanatory. You're setting the name of the current page with this value.</dd> </dl> </div> <div class="large-4 columns"> <dl> - <dt><h5>CSS &amp; Modernizr</h5></dt> + <dt>CSS &amp; Modernizr</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> 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> <dd>We use this to give us the HTML5 Shiv, touch classes and JS media queries that help us control Foundation.</dd> - <dt><h5>Javascripts</h5></dt> + <dt>Javascripts</dt> <dd>Our JS is linked up right before the closing body tag and includes all necessary plugins and initializers to hit the ground running.</dd> </dl> </div> </div> <hr> <div class="panel"> <h3>Get going!</h3> <h5 class="subheader">Now that you understand the gist of what Foundation is and how it works, it's time to start a project! We've got two different ways for you to build projects with Foundation, a Compass Gem using Scss or a with plain CSS.</h5> - <a href="./sass.html" class="button">Using the Gem</a></li> - <a href="http://foundation.zurb.com/migration.php" class="button secondary">Quickstart with CSS</a></li> + <a href="./sass.html" class="button">Using the Gem</a> + <a href="http://foundation.zurb.com/migration.php" class="button secondary">Quickstart with CSS</a> </div> </div>