patch up the getting started pages

11 years ago · 717f7aa8b7
5 changed files with 129 additions and 35 deletions
--- a/docs/_includes/footer.html
+++ b/docs/_includes/footer.html
@ -1 +1 @@
-<p class="docs-mini-footer">Code licensed under the MIT license and the docs are licensed under CC BY 3.0. Ratchet version 2.0.0 was lovingly crafted by <a href="https://twitter.com/connors">Connor Sears</a>.</p>
+<p class="docs-mini-footer">Code licensed under the MIT license and the docs are licensed under CC BY 3.0. Ratchet version 2.0.0 was lovingly crafted by <a href="https://twitter.com/connors" data-ignore="push">Connor Sears</a>.</p>
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@ -259,7 +259,7 @@ body {
 }

 .section-heading {
-  font-size: 26px;
+  font-size: 22px;
  font-weight: 300;
 }

@ -269,6 +269,48 @@ body {
  font-weight: 100;
 }

+.docs-steps {
+  margin-top: 20px;
+  padding: 0;
+  list-style: none;
+}
+
+.step {
+  padding-top: 30px;
+  padding-bottom: 30px;
+}
+
+.step-title,
+.step-description {
+  font-weight: 300;
+}
+
+.step-title {
+  font-size: 18px;
+}
+
+.step-title code {
+  font-size: 14px;
+}
+
+.step-description {
+  font-size: 14px;
+}
+
+.docs-module {
+  margin-top: 20px;
+  padding: 20px;
+  border: 1px solid #dddddd;
+  border-radius: 3px;
+}
+.docs-module .btn-block {
+  margin-bottom: 0;
+}
+
+.docs-module-title {
+  font-weight: 300;
+}
+
 .social {
  position: absolute;
  bottom: 0;
@ -346,7 +388,7 @@ code {
 }

 .component-title {
-  margin-bottom: 15px;
+  margin-bottom: 10px;
  font-size: 24px;
  font-weight: 300;
  line-height: 34px;
@ -355,6 +397,7 @@ code {
 .component-description {
  margin-bottom: 15px;
  font-size: 16px;
+  font-weight: 300;
 }

 .component-example {
@ -707,27 +750,25 @@ hr {
    margin-top: 0;
  }

-  .docs-steps {
-    margin-top: 50px;
-    padding: 0;
-    list-style: none;
+  .step-title {
+    font-size: 24px;
  }

-  .step {
-    padding-top: 30px;
-    padding-bottom: 30px;
+  .step-title code {
+    font-size: 18px;
  }

-  .step-title,
  .step-description {
-    font-weight: 300;
+    font-size: 18px;
  }

-  .step-description {
-    font-size: 18px;
+  .docs-module {
+    margin-top: 35px;
  }

  .section-heading {
+    margin-top: 50px;
+    margin-bottom: 10px;
    font-size: 40px;
  }

--- a/docs/examples.html
+++ b/docs/examples.html
@ -1,6 +1,6 @@
 ---
 layout: default
-title: Ratchet &middot; Getting Started
+title: Examples &middot; Ratchet
 ---

 <div class="docs-sub-header">
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@ -1,6 +1,6 @@
 ---
 layout: default
-title: Ratchet &middot; Getting Started
+title: Getting started &middot; Ratchet
 ---

 <div class="docs-sub-header">
@ -24,21 +24,22 @@ title: Ratchet &middot; Getting Started
      <ol class="docs-steps">
        <li class="step">
          <h3 class="step-title">1. Create your pages</h3>
-          <p class="step-description">Use the <a href="/components">documentation</a> as a reference for all the available components and piece together the pages of your app. Be sure to look at the <a href="#pageLayout">basic page template</a> and <a href="/examples">example applications</a>. Customize the style too - make the prototype all your own.</p>
+          <p class="step-description">Use the <a href="/components" data-ignore="push">documentation</a> as a reference for all the available components and piece together the pages of your app. Be sure to look at the <a href="#pageLayout">basic page template</a> and <a href="/examples" data-ignore="push">example applications</a>. Customize the style too - make the prototype all your own.</p>
        </li>
        <li class="step">
          <h3 class="step-title">2. Connect pages with push.js</h3>
-          <p class="step-description">Read about <a href="/components/#push">push.js</a> then start connecting your pages. Push.js allows you to create a prototype that feels like a real app when you save it to your phone. (Need to have a server running).</p>
+          <p class="step-description">Read about <a href="/components/#push" data-ignore="push">push.js</a> then start connecting your pages. Push.js allows you to create a prototype that feels like a real app when you save it to your phone. (Need to have a server running).</p>
        </li>
        <li class="step">
          <h3 class="step-title">3. Save the prototype to your phone</h3>
-          <p class="step-description">There are <a href="https://groups.google.com/forum/#!topic/goratchet/IboE6SCMAyw">a few ways to do this</a>, but the simplest is to run a local server on your computer, point Safari on your iPhone to your computer, then click the <span class="icon icon-share"></span> button and "Add to Home Screen".</p>
+          <p class="step-description">There are <a href="https://groups.google.com/forum/#!topic/goratchet/IboE6SCMAyw" data-ignore="push">a few ways to do this</a>, but the simplest is to run a local server on your computer, point Safari on your iPhone to your computer, then click the <span class="icon icon-share"></span> button and "Add to Home Screen".</p>
        </li>
      </ol>

      <hr> 

-      <h2>Page setup</h2>
+      <h2 class="section-heading">Page setup</h2>
+      <p class="section-lead">Three simple rules for structuring your Ratchet pages</p>
      <ol class="docs-steps">
        <li class="step">
          <h3 class="step-title">1. Fixed bars come first</h3>
@ -57,7 +58,8 @@ title: Ratchet &middot; Getting Started

      <hr> 

-      <h2>Basic template</h2>
+      <h2 id="pageLayout" class="section-heading">Basic template</h2>
+      <p class="section-lead">Use this basic template to get your app started.</p>
 {% highlight html %}
 <!DOCTYPE html>
 <html>
@ -97,7 +99,7 @@ title: Ratchet &middot; Getting Started
            </a>
          </li>
          <li class="table-view-cell">
-            <a class="push-right" href="https\://www.github.com/maker/ratchet/">
+            <a class="push-right" href="https://www.github.com/maker/ratchet/">
              <strong>Ratchet on Github</strong>
            </a>
          </li>
@ -119,7 +121,16 @@ title: Ratchet &middot; Getting Started
 </html>
 {% endhighlight %}
    </div>
+
+    <div class="column units-2 lg-units-4">
+      <div class="docs-module">
+        <h4 class="docs-module-title">Download Ratchet</h4>
+        <p>If you haven't already, download the cource code for Ratchet.</p>
+        <a href="#" class="btn btn-block btn-primary" data-ignore="push">Download Ratchet</a>
+      </div>
+    </div>
  </div>
+
  <div class="column units-2">
    <!-- Footer -->
    {% include footer.html %}
--- a/sass/docs.scss
+++ b/sass/docs.scss
@ -250,7 +250,7 @@ body {
  margin-bottom: 0;
 }
 .section-heading {
-  font-size: 26px;
+  font-size: 22px;
  font-weight: 300;
 }
 .section-lead {
@ -259,6 +259,47 @@ body {
  font-weight: 100;
 }

+// Steps
+// --------------------------------------------------
+
+.docs-steps {
+  margin-top: 20px;
+  padding: 0;
+  list-style: none;
+}
+.step {
+  padding-top: 30px;
+  padding-bottom: 30px;
+}
+.step-title,
+.step-description {
+  font-weight: 300;
+}
+.step-title {
+  font-size: 18px
+}
+.step-title code {
+  font-size: 14px;
+}
+.step-description {
+  font-size: 14px;
+}
+
+// Docs modules 
+.docs-module {
+  margin-top: 20px;
+  padding: 20px;
+  border: $border-default;
+  border-radius: 3px;
+
+  .btn-block {
+    margin-bottom: 0;
+  }
+}
+.docs-module-title {
+  font-weight: 300;
+}
+

 // Overriding the button styles for the social
 // --------------------------------------------------
@ -344,7 +385,7 @@ code {
  border-bottom: 1px solid #ddd;
 }
 .component-title {
-  margin-bottom: 15px;
+  margin-bottom: 10px;
  font-size: 24px;
  font-weight: 300;
  line-height: 34px;
@ -352,6 +393,7 @@ code {
 .component-description {
  margin-bottom: 15px;
  font-size: 16px;
+  font-weight: 300;
 }
 .component-example {
  font-family: $font-family-default;
@ -716,27 +758,27 @@ hr {
  }

  // Steps
-  .docs-steps {
-    margin-top: 50px;
-    padding: 0;
-    list-style: none;
-  }
-  .step {
-    padding-top: 30px;
-    padding-bottom: 30px;
+  .step-title {
+    font-size: 24px;
  }
-  .step-title,
-  .step-description {
-    font-weight: 300;
+  .step-title code {
+    font-size: 18px;
  }
  .step-description {
    font-size: 18px;
  }

+  // Docs modules 
+  .docs-module {
+    margin-top: 35px;
+  }
+

  // Content sections
  // --------------------------------------------------
  .section-heading {
+    margin-top: 50px;
+    margin-bottom: 10px;
    font-size: 40px;
  }
  .section-lead {