Improvements to the docs and welcome page

Author: adamschwartz

docs/intro.md

@@ -4,8 +4,10 @@ Sortable is an open-source javascript and CSS library which adds sorting functio
 
 #### Demo
 
+Here is a demo of the "Bootstrap" theme.
+
 <p style="display: none"></p>
-<table data-sortable> <thead> <tr> <th data-sortable="false">Browser</th> <th data-sorted="true" data-sorted-direction="descending">Usage</th> <th>Initial release</th> <th>Stable version</th> </tr> </thead> <tbody> <tr> <td>Chrome</td> <td>42.68%</td> <td data-value="2008">September 2, 2008</td> <td>31.0.1650.57</td> </tr> <tr> <td>Internet Explorer</td> <td>25.44%</td> <td data-value="1995">August 16, 1995</td> <td>11.0.1</td> </tr> <tr> <td>Firefox</td> <td>20.01%</td> <td data-value="2002">September 23, 2002</td> <td>25.0.1</td> </tr> <tr> <td>Safari</td> <td>8.39%</td> <td data-value="2003">January 7, 2003</td> <td>7.0</td> </tr> <tr> <td>Opera</td> <td>1.03%</td> <td data-value="1994">Late 1994</td> <td>18.0.1284.49</td> </tr> <tr> <td>Other</td> <td data-value="0">2.44%</td> <td data-value="-1"></td> <td></td> </tr> </tbody> </table>
+<table class="sortable-theme-bootstrap" data-sortable> <thead> <tr> <th data-sortable="false">Browser</th> <th data-sorted="true" data-sorted-direction="descending">Usage</th> <th>Initial release</th> <th>Stable version</th> </tr> </thead> <tbody> <tr> <td>Chrome</td> <td>42.68%</td> <td data-value="2008">September 2, 2008</td> <td>31.0.1650.57</td> </tr> <tr> <td>Internet Explorer</td> <td>25.44%</td> <td data-value="1995">August 16, 1995</td> <td>11.0.1</td> </tr> <tr> <td>Firefox</td> <td>20.01%</td> <td data-value="2002">September 23, 2002</td> <td>25.0.1</td> </tr> <tr> <td>Safari</td> <td>8.39%</td> <td data-value="2003">January 7, 2003</td> <td>7.0</td> </tr> <tr> <td>Opera</td> <td>1.03%</td> <td data-value="1994">Late 1994</td> <td>18.0.1284.49</td> </tr> <tr> <td>Other</td> <td data-value="0">2.44%</td> <td data-value="-1"></td> <td></td> </tr> </tbody> </table>
 <p style="display: none"></p>
 
 #### Features
@@ -32,19 +34,19 @@ For the most common usage of sortable, you'll want to include following:
 
 ```html
 <script src="sortable.min.js"></script>
-<link rel="stylesheet" href="sortable-theme-light.css" />
+<link rel="stylesheet" href="sortable-theme-bootstrap.css" />
 <script>setTimeout(function(){ sortable.init(); }, 0);</script>
 ```
 
 Now any table with the attribute `data-sortable` will be made sortable. To get the styling, you'll also need to add a class name to the table to match the theme you chose:
 
 ```html
-<table class="sortable-theme-light" data-sortable>
+<table class="sortable-theme-bootstrap" data-sortable>
     <!-- ... -->
 </table>
 ```
 
-This example uses the "light" theme. For a full list of supported themes, check out [Themes](/sortable/api/themes).
+This example uses the "bootstrap" theme. For a full list of supported themes, check out [Themes](/sortable/api/themes).
 
 #### Learn More
 
@@ -64,5 +66,13 @@ Sortable was built by [Adam Schwartz](http://twitter.com/adamfschwartz)
 <!-- Resources for the demos -->
 <p style="-webkit-transform: translateZ(0)"></p>
 <script src="/sortable/js/sortable.js"></script>
-<link rel="stylesheet" href="/sortable/css/sortable-theme-light.css" />
+<style>
+.hs-doc-content table {
+    border: 0;
+}
+.hs-doc-content table th {
+    background: initial;
+}
+</style>
+<link rel="stylesheet" href="/sortable/css/sortable-theme-bootstrap.css">
 <script>setTimeout(function(){ sortable.init(); }, 0);</script>

docs/welcome/index.html

@@ -221,7 +221,7 @@ <h2>The simplest, most elegant way to sort a table.</h2>
                 <a class="button" href="http://github.com/hubspot/sortable">★ On Github</a> &nbsp;&nbsp;
                 <a class="button dark" href="http://github.com/hubspot/sortable">Download</a>
             </p>
-            <table data-sortable class="sortable-theme-light">
+            <table class="sortable-theme-light" data-sortable>
                 <thead>
                     <tr>
                         <th data-sortable="false">Browser</th>
@@ -284,7 +284,7 @@ <h1>How to Use</h1>
 <pre class="  language-markup"><code class="  language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>sortable-theme-dark.css<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
 <span class="token script"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>sortable.min.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span></code></pre>
             <p>Add the attribute <code>data-sortable</code> and the theme class name to your <code>&lt;table&gt;</code> elements, and initialize them:</p>
-<pre class="  language-markup"><code class="  language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span> <span class="token attr-name">data-sortable</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>sortable-theme-dark<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
+<pre class="  language-markup"><code class="  language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>sortable-theme-dark<span class="token punctuation">"</span></span> <span class="token attr-name">data-sortable</span><span class="token punctuation">&gt;</span></span>
     <span class="token comment" spellcheck="true">&lt;!-- ... --&gt;</span>
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table</span><span class="token punctuation">&gt;</span></span>
 <span class="token script"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span>sortable<span class="token punctuation">.</span><span class="token function">init<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></span></code></pre>
@@ -295,7 +295,7 @@ <h1>How to Use</h1>
         <div class="showcase-inner">
             <h1>Themes</h1>
             <h2>Sortables for every occasion.</h2>
-            <table id="themeTable" data-sortable class="sortable-theme-bootstrap">
+            <table id="themeTable" class="sortable-theme-bootstrap" data-sortable>
                 <thead>
                     <tr>
                         <th data-sortable="false">Browser</th>