From: Thomas Park <thomas@thomaspark.me>
Date: Thu, 8 Aug 2013 20:24:33 +0000 (-0400)
Subject: add api info to help page
X-Git-Tag: v3.0.0-rc2~7
X-Git-Url: http://git.roojs.org/?p=bootswatch;a=commitdiff_plain;h=b8ba5f25f5bf21e266007e7bdbf2d79764a4382d

add api info to help page
---

diff --git a/help/index.html b/help/index.html
index f890ee8..64f2b67 100644
--- a/help/index.html
+++ b/help/index.html
@@ -9,9 +9,13 @@
     <link rel="stylesheet" href="../assets/css/bootswatch.min.css">
     <style>
 
+      h1 {
+        margin-top: 2em;
+      }
+
       code {
-        background-color: #1B2532;
-        color: #fff;
+        background-color: #eee;
+        color: inherit;
       }
 
     </style>
@@ -82,33 +86,29 @@
     <div class="container">
       <div class="row">
         <div class="col-lg-9">
-          
-            <div class="page-header">
-              <h1>Help</h1>
-            </div>
 
-            <h1>Quick Start</h1>
+            <h1 id="quickstart">Quick Start</h1>
             <p>Using a theme is as easy as downloading a CSS file and replacing the one that comes with <a href="http://getbootstrap.com" target="_blank">Bootstrap</a>.</p>
 
-            <h1>Customization</h1> 
+            <h1 id="customization">Customization</h1> 
             <p>To modify a theme or create your own, follow the steps below.</p>
             <ol>
               <li><p><code>git clone git@github.com:thomaspark/bootswatch.git</code></p></li>
-
               <li><p><code>npm install</code></p></li>
-
               <li><p><code>bower install</code></p></li>
-
               <li>
                 <p>Edit <code>variables.less</code> and <code>bootswatch.less</code> in one of the theme directories, or create your own in <code>/custom</code>.</p>
               </li>
-
               <li><p>Type <code>grunt swatch:[theme]</code> to build the CSS for a theme, e.g., <code>grunt swatch:amelia</code> for Amelia. Or type <code>grunt swatch</code> to build them all at once.</p></li>
-
             </ol>
-
             <p>Here are additional tips for <a href="http://coding.smashingmagazine.com/2013/03/12/customizing-bootstrap/" target="_blank">customizing Bootstrap</a>.</p>
 
+            <h1 id="api">API</h1>
+            <p>You can use the API to integrate the themes with your platform. Send your request to:</p>
+            <p><a href="http://api.bootswatch.com/3/">http://api.bootswatch.com/3/</a></p>
+            <p>This returns the <code>version</code> and a <code>themes</code> array with the following properties: <code>name</code>, <code>description</code>, <code>preview</code>, <code>thumbnail</code>, <code>css</code>, <code>cssMin</code>, <code>less</code>, and <code>lessVariables</code>.</p>
+            <p>Here's a <a href="http://jsbin.com/oqubil/1/edit" target="_blank">demo</a> with mustache.js templating.</p>
+
         </div>
       </div>
     </div>
diff --git a/index.html b/index.html
index 33bf53d..ac46c3e 100644
--- a/index.html
+++ b/index.html
@@ -121,7 +121,7 @@
           </div>
           <div class="col-lg-4 col-sm-6">
             <h3><i class="icon-cloud"></i> Get Plugged In</h3>
-            <p>An <a href="http://news.bootswatch.com/post/22193315172/bootswatch-api" onclick="pageTracker._link(this.href); return false;">API</a> is available for integrating with your platform. In use by <a href="http://320press.com/wpbs/" target="_blank">WPBS</a>, <a href="http://www.fusionleaf.com/" target="_blank">FusionLeaf</a>, <a href="http://yabdab.com/stacks/snaps/bootsnap/" target="_blank">BootSnap</a>, and others.</p>
+            <p>An <a href="./help/#api" onclick="pageTracker._link(this.href); return false;">API</a> is available for integrating with your platform. In use by <a href="http://320press.com/wpbs/" target="_blank">WPBS</a>, <a href="http://www.fusionleaf.com/" target="_blank">FusionLeaf</a>, <a href="http://yabdab.com/stacks/snaps/bootsnap/" target="_blank">BootSnap</a>, and others.</p>
           </div>
           <div class="col-lg-4 col-sm-6">
             <h3><i class="icon-bullhorn"></i> Stay Updated</h3>