index: added api info

index.html

@@ -82,32 +82,30 @@
         <div class="span4">
           <img src="img/glyphicons_036_file.png">
 		  <h3>Easy to Install</h3>
-          <p>Simply download the CSS file from the swatch of your choice and replace the one in Bootstrap. No messing around with hex values.</p>
+          <p>Simply download a CSS file and replace the one in Bootstrap. No messing around with hex values.</p>
        </div>
-        <div class="span4">
-		  <img src="img/glyphicons_009_magic.png">
-          <h3>Whole New Feel</h3>
-          <p>We've all been there with the black bar and blue buttons. See how a splash of color and typography can transform the feel of your site.</p>
-        </div>
-        <div class="span4">
-          <img src="img/glyphicons_050_link.png">
-		  <h3>Tuned for 2.0.2</h3>
-          <p>Swatches are built for and tested with the latest version of Bootstrap. <a target="_blank" href="https://github.com/thomaspark/bootswatch/downloads">Previous versions</a> are also available for download.</p>
-       </div>
-      </div>
-	  
-      <div class="row about">
         <div class="span4">
 		  <img src="img/glyphicons_341_github.png">
           <h3>Open Source</h3>
           <p>Licensed under Apache 2.0 and maintained by the community on <a target="_blank" href="https://github.com/thomaspark/bootswatch">GitHub</a>.</p>
         </div>
+       <div class="span4">
+          <img src="img/glyphicons_280_settings.png">
+		  <h3>Tuned for 2.0.2</h3>
+          <p>Swatches are built for and tested with the latest version of Bootstrap. <a target="_blank" href="https://github.com/thomaspark/bootswatch/downloads">Older versions</a> are also available for download.</p>
+       </div>
+      </div>	  
+      <div class="row about">
          <div class="span4">
-           <img src="img/glyphicons_025_binoculars.png">
+           <img src="img/glyphicons_023_cogwheels.png">
   	  <h3>Modular</h3>
            <p>Changes are contained in just two LESS files, enabling modification and ensuring forward compatibility.</p>
          </div>
-		
+	      <div class="span4">
+			  <img src="img/glyphicons_265_electrical_plug.png">
+	          <h3>Plug It In</h3>
+	          <p>An <a data-toggle="modal" href="#modal-api">API</a> is available to integrate Bootswatch with your app or platform.</p>
+	        </div>
         <div class="span4">
           <img src="img/glyphicons_032_wifi_alt.png">
 		  <h3>Stay Updated</h3>
@@ -115,6 +113,25 @@
         </div>
       </div>
 	  
+			<div class="modal hide fade" id="modal-api">
+			  <div class="modal-header">
+			    <a class="close" data-dismiss="modal">×</a>
+			    <h3>API</h3>
+			  </div>
+			  <div class="modal-body">
+				<h4>Properties</h4>
+			    <p>The following properties are available for each swatch: <code>name</code>, <code>description</code>, <code>preview</code>, <code>thumbnail</code>, <code>css</code>, and <code>css-min</code>.
+				<h4>Request</h4>
+			    <p>CORS and JSONP are supported. Send your request to <code>http://simplejsonp.nodester.com/thomaspark/bootswatch/</code></p>
+				<h4>Example</h4>
+			    <p>A <a target="_blank" href="http://jsbin.com/anavok/1/edit#javascript,live">simple example</a>, using <a target="_blank" href="http://jquery.com/">jQuery</a> and <a target="_blank" href="https://github.com/janl/mustache.js">mustache.js</a> for templating.</p>
+				<p>Thanks to <a target="_blank" href="http://jostylr.tumblr.com/">James</a> for <a target="_blank" href="https://github.com/jostylr/simplejsonp">simplejsonp</a>.</p>
+			  </div>
+			  <div class="modal-footer">
+			    <a href="#" class="btn" data-dismiss="modal">Close</a>
+			  </div>
+			</div>	
+	
 	  <div class="row">
 		  <div class="span12">
 		  	  <h1 id="gallery">Gallery</h1>

js/bootswatch.js

@@ -50,6 +50,8 @@ var taglines = [];
 taglines.push('Free themes for <a target="_blank" href="http://twitter.github.com/bootstrap/">Twitter Bootstrap</a>');
 taglines.push('Add color to your <a target="_blank" href="http://twitter.github.com/bootstrap/">Bootstrap</a> site without touching a color picker');
 taglines.push('Saving the web from default <a target="_blank" href="http://twitter.github.com/bootstrap/">Bootstrap</a>');
+taglines.push('Give your <a target="_blank" href="http://twitter.github.com/bootstrap/">Bootstrap</a> site a whole new feel');
+taglines.push('Lose the black bar and blue buttons on your <a target="_blank" href="http://twitter.github.com/bootstrap/">Bootstrap</a> site');
 
 var line = Math.floor((taglines.length) * Math.random());
 $('#tagline').html(taglines[line]);