Move documentation styles to docs.css

[ratchet] / docs / index.html

diff --git a/docs/index.html b/docs/index.html
index dec5bac..fd2a413 100644 (file)
--- a/docs/index.html
+++ b/docs/index.html
@@ -58,6 +58,7 @@
               <li><a href="#forms">Forms</a></li>
               <li><a href="#toggles">Toggles</a></li>
               <li><a href="#popovers">Popovers</a></li>
+              <li><a href="#modals">Modals</a></li>
               <li><a href="#sliders">Sliders</a></li>
               <li><a href="#push">Push</a></li>
             </ul>
@@ -73,8 +74,8 @@
     <header class="docs-outer-wrapper docs-header">
       <div class="docs-inner-wrapper">
         <hgroup class="docs-header-text">
-          <h2 class="docs-header-subtitle">Prototype iPhone apps with simple HTML, CSS and JS components.</h2>
-          <a data-ignore="push" href="#" class="docs-btn" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V1.0']);">Download Ratchet</a>
+          <h2 class="docs-header-subtitle">Prototype iPhone apps with simple HTML, CSS, and JS components.</h2>
+          <a data-ignore="push" href="http://maker.github.com/ratchet/ratchet.zip" class="docs-btn" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V1.0']);">Download Ratchet</a>
         </hgroup>
       </div>
       <section class="social">
@@ -284,31 +285,31 @@
               <nav class="bar-tab">
                 <ul class="tab-inner">
                   <li class="tab-item active">
-                    <a>
+                    <a href="#">
                       <img class="tab-icon" src="img/icon-home.png">
                       <div class="tab-label">Label</div>
                     </a>
                   </li>
                   <li class="tab-item">
-                    <a>
+                    <a href="#">
                       <img class="tab-icon" src="img/icon-profile.png">
                       <div class="tab-label">Label</div>
                     </a>
                   </li>
                   <li class="tab-item">
-                    <a>
+                    <a href="#">
                       <img class="tab-icon" src="img/icon-messages.png">
                       <div class="tab-label">Label</div>
                     </a>
                   </li>
                   <li class="tab-item">
-                    <a>
+                    <a href="#">
                       <img class="tab-icon" src="img/icon-hamburger.png">
                       <div class="tab-label">Label</div>
                     </a>
                   </li>
                   <li class="tab-item">
-                    <a href="http://starwars.com">
+                    <a href="#">
                       <img class="tab-icon" src="img/icon-settings.png">
                       <div class="tab-label">Label</div>
                     </a>
@@ -321,31 +322,31 @@
 &lt;nav class=&quot;bar-tab&quot;&gt;
   &lt;ul class=&quot;tab-inner&quot;&gt;
     &lt;li class=&quot;tab-item active&quot;&gt;
-      &lt;a href=&quot;&quot;&gt;
+      &lt;a href=&quot;#&quot;&gt;
         &lt;img class=&quot;tab-icon&quot; src=&quot;img/icon-home.png&quot;&gt;
         &lt;div class=&quot;tab-label&quot;&gt;Label&lt;/div&gt;
       &lt;/a&gt;
     &lt;/li&gt;
     &lt;li class=&quot;tab-item&quot;&gt;
-      &lt;a href=&quot;&quot;&gt;
+      &lt;a href=&quot;#&quot;&gt;
         &lt;img class=&quot;tab-icon&quot; src=&quot;img/icon-profile.png&quot;&gt;
         &lt;div class=&quot;tab-label&quot;&gt;Label&lt;/div&gt;
       &lt;/a&gt;
     &lt;/li&gt;
     &lt;li class=&quot;tab-item&quot;&gt;
-      &lt;a href=&quot;&quot;&gt;
+      &lt;a href=&quot;#&quot;&gt;
         &lt;img class=&quot;tab-icon&quot; src=&quot;img/icon-messages.png&quot;&gt;
         &lt;div class=&quot;tab-label&quot;&gt;Label&lt;/div&gt;
       &lt;/a&gt;
     &lt;/li&gt;
     &lt;li class=&quot;tab-item&quot;&gt;
-      &lt;a href=&quot;&quot;&gt;
+      &lt;a href=&quot;#&quot;&gt;
         &lt;img class=&quot;tab-icon&quot; src=&quot;img/icon-hamburger.png&quot;&gt;
         &lt;div class=&quot;tab-label&quot;&gt;Label&lt;/div&gt;
       &lt;/a&gt;
     &lt;/li&gt;
     &lt;li class=&quot;tab-item&quot;&gt;
-      &lt;a href=&quot;&quot;&gt;
+      &lt;a href=&quot;#&quot;&gt;
         &lt;img class=&quot;tab-icon&quot; src=&quot;img/icon-settings.png&quot;&gt;
         &lt;div class=&quot;tab-label&quot;&gt;Label&lt;/div&gt;
       &lt;/a&gt;
@@ -976,6 +977,35 @@ document
 </pre>
 
         </article>
+        
+        <!-- Modals -->
+        <article class="component" id="modals">
+          <h3 class="component-title">Modals</h3>
+
+          <div class="component-example">
+            
+          </div>
+
+<pre class="prettyprint">
+&lt;a href=&quot;#myModal&quot; class=&quot;button&quot;&gt;Open modal&lt;/a&gt;
+
+&lt;div id=&quot;myModal&quot; class=&quot;modal&quot;&gt;
+  &lt;header class=&quot;bar-title&quot;&gt;
+    &lt;h1 class=&quot;title&quot;&gt;Modal&lt;/h1&gt;
+    &lt;a class=&quot;button&quot; href=&quot;#myModal&quot;&gt;
+      Close
+    &lt;/a&gt;
+  &lt;/header&gt;
+  
+  &lt;div class=&quot;content content-padded&quot;&gt;
+    &lt;p&gt;The contents of my modal&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+          <p class="component-description">Modals are designed to only fire from links. Set the value of the toggle links href to the id of a modal.</p>
+
+        </article>
 
         <!-- Slider -->
         <article class="component" id="sliders">
@@ -1109,11 +1139,11 @@ window.addEventListener('push', myFunction);
           <ol class="steps">
               <li class="step">
               <h3 class="step-title">1. Fixed bars come first</h3>
-              <p class="step-description">All fixed bars (<code>.bar-title, .bar-tab, .bar-header-secondary, .bar-footer)</code>) should always be the first thing in the <code>&lt;body&gt;</code> of the page. This is really important!</p>
+              <p class="step-description">All fixed bars (<code>.bar-title, .bar-tab, .bar-header-secondary, .bar-footer</code>) should always be the first thing in the <code>&lt;body&gt;</code> of the page. This is really important!</p>
             </li>
             <li class="step">
               <h3 class="step-title">2. Everything else goes in <code>.content</code></h3>
-              <p class="step-description">Anything that's not a <code>.bar-title</code> or <code>.bar-tab</code> should be put in a div with the class "<code>content</code>". Put this div after the bars in the <code>&lt;body&gt;</code> tag. The <code>.content</code> div is what actually scrolls in a Ratchet prototype.</p>
+              <p class="step-description">Anything that's not a <code>.bar-</code> should be put in a div with the class "<code>content</code>". Put this div after the bars in the <code>&lt;body&gt;</code> tag. The <code>.content</code> div is what actually scrolls in a Ratchet prototype.</p>
             </li>
             <li class="step">
               <h3 class="step-title">3. Don't forget your meta tags</h3>