You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@couchdb.apache.org by da...@apache.org on 2014/02/12 07:20:37 UTC

[43/52] [abbrv] fauxton commit: updated refs/heads/import-master to d11b90b

2029 Consolidate CSS/LESS class name usage to minimize custom-ness


Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo
Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/247b61cd
Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/247b61cd
Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/247b61cd

Branch: refs/heads/import-master
Commit: 247b61cd30a3038989217d25ead6f1f664372513
Parents: 31e9993
Author: BigBlueHat <by...@bigbluehat.com>
Authored: Thu Jan 30 13:32:45 2014 -0500
Committer: suelockwood <de...@apache.org>
Committed: Fri Jan 31 15:33:47 2014 -0500

----------------------------------------------------------------------
 .../activetasks/assets/less/activetasks.less    |   6 +-
 app/addons/auth/assets/less/auth.less           |  15 -
 app/addons/auth/resources.js                    |   2 +-
 app/addons/compaction/views.js                  |   2 +-
 app/addons/config/assets/less/config.less       |  23 +-
 app/addons/config/templates/dashboard.html      |   6 +-
 app/addons/config/templates/item.html           |   6 +-
 app/addons/databases/assets/less/databases.less | 220 +-------
 app/addons/databases/templates/list.html        |   8 +-
 app/addons/databases/templates/newdatabase.html |   3 +-
 app/addons/documents/assets/less/documents.less |  70 ++-
 .../documents/templates/advanced_options.html   |   4 +-
 .../documents/templates/all_docs_layout.html    |   3 +-
 .../documents/templates/all_docs_list.html      |  10 +-
 app/addons/documents/templates/doc.html         |  16 +-
 .../documents/templates/doc_field_editor.html   |   4 +-
 .../templates/duplicate_doc_modal.html          |   4 +-
 app/addons/documents/templates/jumpdoc.html     |   9 +-
 app/addons/documents/templates/sidebar.html     |  10 +-
 .../documents/templates/upload_modal.html       |   4 +-
 app/addons/documents/templates/view_editor.html |  13 +-
 app/addons/documents/views.js                   |   2 +-
 app/addons/fauxton/templates/api_bar.html       |   4 +-
 app/addons/fauxton/templates/nav_bar.html       |   8 +-
 .../permissions/assets/less/permissions.less    |  39 +-
 app/addons/permissions/templates/item.html      |   2 +-
 app/addons/permissions/templates/section.html   |   8 +-
 .../replication/assets/less/replication.less    | 342 +++++++------
 app/addons/stats/assets/less/stats.less         |   6 +-
 app/addons/styletests/base.js                   |  33 ++
 app/addons/styletests/resources.js              |  22 +
 app/addons/styletests/routes.js                 |  40 ++
 app/addons/styletests/templates/theme.html      | 496 +++++++++++++++++++
 app/addons/styletests/views.js                  |  29 ++
 app/addons/verifyinstall/routes.js              |   2 +-
 app/addons/verifyinstall/views.js               |   2 +-
 app/templates/fauxton/api_bar.html              |   4 +-
 app/templates/fauxton/breadcrumbs.html          |   2 +-
 app/templates/fauxton/nav_bar.html              |   8 +-
 assets/less/fauxton.less                        | 150 ++----
 assets/less/variables.less                      |   2 +
 readme.md                                       |  10 +-
 settings.json.dev                               |  59 +++
 43 files changed, 1060 insertions(+), 648 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/247b61cd/app/addons/activetasks/assets/less/activetasks.less
----------------------------------------------------------------------
diff --git a/app/addons/activetasks/assets/less/activetasks.less b/app/addons/activetasks/assets/less/activetasks.less
index 743917d..b06f550 100644
--- a/app/addons/activetasks/assets/less/activetasks.less
+++ b/app/addons/activetasks/assets/less/activetasks.less
@@ -10,9 +10,7 @@
 // License for the specific language governing permissions and limitations under
 // the License.
 
-.task-tabs li {
+.task-tabs li,
+.active-tasks th {
   cursor: pointer;
 }
-table.active-tasks{
-	font-size: 16px;
-}

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/247b61cd/app/addons/auth/assets/less/auth.less
----------------------------------------------------------------------
diff --git a/app/addons/auth/assets/less/auth.less b/app/addons/auth/assets/less/auth.less
deleted file mode 100644
index 598da10..0000000
--- a/app/addons/auth/assets/less/auth.less
+++ /dev/null
@@ -1,15 +0,0 @@
-// Licensed under the Apache License, Version 2.0 (the "License"); you may not
-// use this file except in compliance with the License. You may obtain a copy of
-// the License at
-//
-//   http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
-// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
-// License for the specific language governing permissions and limitations under
-// the License.
-
-.menuDropdown {
-  display: none;
-}

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/247b61cd/app/addons/auth/resources.js
----------------------------------------------------------------------
diff --git a/app/addons/auth/resources.js b/app/addons/auth/resources.js
index 321d302..0c9b1f5 100644
--- a/app/addons/auth/resources.js
+++ b/app/addons/auth/resources.js
@@ -58,7 +58,7 @@ function (app, FauxtonAPI, CouchdbSession) {
           passwordsNotMatch:  'Passwords do not match.',
           incorrectCredentials: 'Incorrect username or password.',
           loggedIn: 'You have been logged in.',
-          adminCreated: 'Couchdb admin created',
+          adminCreated: 'CouchDB admin created',
           changePassword: 'Your password has been updated.'
         }, options.messages);
     },

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/247b61cd/app/addons/compaction/views.js
----------------------------------------------------------------------
diff --git a/app/addons/compaction/views.js b/app/addons/compaction/views.js
index f5469cf..a68daef 100644
--- a/app/addons/compaction/views.js
+++ b/app/addons/compaction/views.js
@@ -85,7 +85,7 @@ function (app, FauxtonAPI, Compaction) {
 
   Compaction.CompactView = FauxtonAPI.View.extend({
     template: 'addons/compaction/templates/compact_view',
-    className: 'btn btn-info btn-large pull-right',
+    className: 'btn btn-info pull-right',
     tagName: 'button',
 
     initialize: function () {

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/247b61cd/app/addons/config/assets/less/config.less
----------------------------------------------------------------------
diff --git a/app/addons/config/assets/less/config.less b/app/addons/config/assets/less/config.less
index 737beb4..88bbc66 100644
--- a/app/addons/config/assets/less/config.less
+++ b/app/addons/config/assets/less/config.less
@@ -13,11 +13,6 @@
 .config-item {
   height: 41px;
 
-  .edit-button {
-    float: right;
-    display:none;
-  }
-
   td:hover .edit-button {
     display: block;
   }
@@ -31,24 +26,10 @@
   }
 }
 
-.button-margin {
-  margin-bottom: 15px;
-}
-
 #add-section-modal {
   width: 400px;
 }
 
-table.config {
-  #config-trash {
-    width: 5%;
-  }
-  
-  #delete-value {
-    text-align: center;
-  } 
-}
-
-button#add-section {
-  float: right;
+#config-trash {
+  width: 5%;
 }

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/247b61cd/app/addons/config/templates/dashboard.html
----------------------------------------------------------------------
diff --git a/app/addons/config/templates/dashboard.html b/app/addons/config/templates/dashboard.html
index ffbeb37..b7dbc55 100644
--- a/app/addons/config/templates/dashboard.html
+++ b/app/addons/config/templates/dashboard.html
@@ -13,12 +13,10 @@ the License.
 -->
 
 <div class="row">
-  <div class="span2 offset10">
-    <button id="add-section" href="#" class="button button-margin">
-      <i class="icon-plus icon-white"> </i>
+    <button id="add-section" href="#" class="btn btn-primary pull-right">
+      <i class="icon icon-plus icon-white"> </i>
       Add Section
     </button>
-  </div>
 </div>
 <table class="config table table-striped table-bordered">
   <thead>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/247b61cd/app/addons/config/templates/item.html
----------------------------------------------------------------------
diff --git a/app/addons/config/templates/item.html b/app/addons/config/templates/item.html
index 1c808b9..502c9b3 100644
--- a/app/addons/config/templates/item.html
+++ b/app/addons/config/templates/item.html
@@ -20,12 +20,12 @@ the License.
 <td> <%= option.name %> </td>
 <td>
   <div id="show-value">
-    <%= option.value %> <button class="edit-button btn-mini btn"> Edit </button>
+    <%= option.value %> <button class="btn btn-mini pull-right hide edit-button"> Edit </button>
   </div>
   <div id="edit-value-form" style="display:none">
     <input class="value-input" type="text" value="<%= option.value %>" />
     <button id="save-value" class="btn btn-success btn-small"> Save </button>
-    <button id="cancel-value" class="btn btn-danger btn-small"> Cancel </button>
+    <button id="cancel-value" class="btn btn-small"> Cancel </button>
   </div>
 </td>
-<td id="delete-value"> <i class="icon-trash"> </i> </td>
+<td id="delete-value" class="text-center"> <i class="icon-trash"> </i> </td>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/247b61cd/app/addons/databases/assets/less/databases.less
----------------------------------------------------------------------
diff --git a/app/addons/databases/assets/less/databases.less b/app/addons/databases/assets/less/databases.less
index 3d86d81..7b7cf6a 100644
--- a/app/addons/databases/assets/less/databases.less
+++ b/app/addons/databases/assets/less/databases.less
@@ -15,194 +15,15 @@
    ---------------------------------------------------------------------- */
 @import "../../../../../assets/less/bootstrap/variables.less";  
 @import "../../../../../assets/less/bootstrap/mixins.less";   
-#db-tools {
-    position: absolute;
-    top: -7px;
-    right: 0;
-    width: 390px;
-
-    .btn-group {
-        position: absolute;
-        left: 0;
-        top: 6px;
-    }
-
-    form {
-        position: absolute;
-        right: 0;
-        top: 0;
-    }
-}
 
 .tools .nav {
     margin-bottom: 10px;
 }
 
-#sidenav {
-    padding-top: 10px;
-
-    h3 {
-        margin: 10px 0;
-    }
-
-    li a span.divider {
-        background: none;
-        color: #ccc;
-        padding: 0 2px;
-    }
-
-    li.nav-header a {
-        display: inline
-    }
-
-    div.btn-group {
-        display: inline-block;
-    }
-
-    li.nav-header, #sidenav li a {
-        padding-left: 4px;
-    }
-
-    li.active a {
-        background-color: #ddd;
-        color: #333;
-        text-shadow: none;
-    }
-}
-
-.edit {
-    display: none;
-
-    form {
-        margin-bottom: 0;
-    }
-
-    h3 {
-        border-bottom: 1px solid #ccc;
-        font-size: 100%;
-        line-height: 1;
-        margin-bottom: 18px;
-    }
-
-    textarea {
-        height: 100px;
-        width: 95%;
-    }
-
-    .btn-toolbar {
-        margin-bottom: 0;
-    }
-
-    .preview {
-        width: 100px;
-    }
-
-    .save {
-    }
-}
-
-#new-view-index {
-    .confirm {
-        display: none;
-    }
-
-    .confirm .progress {
-        display: none;
-        margin: 20px;
-    }
-
-    textarea {
-        height: 100px;
-        width: 95%;
-    }
-}
-
-.view {
-    display: none;
-
-    .result-tools {
-        float: left;
-        width: 100%;
-        margin-bottom: 10px;
-    }
-
-    table td div  {
-        position: relative;
-    }
-
-    table td div div {
-        display: none;
-        line-height: 1;
-        position: absolute;
-        right: 4px;
-        top: 4px;
-    }
-
-    table td div:hover div a.edits {
-        padding-left: 16px;
-        padding-right: 16px;
-    }
-
-    table td div:hover div {
-        display: block;
-    }
-
-}
-.view.show {
-    display: block;
-}
-.view.show.hidden-by-params {
-    display: none;
-}
-#database .view table tr td {
-    padding: 0;
-}
-
-.loading {display: none;}
-
-.view-request-duration {
-  padding-right: 10px;
-  float: right;
-}
-
-table.active-tasks{
-    th {
-        cursor: pointer;
-    }
-}
-
-.well{
-    .row-fluid{
-        margin: 0;
-    }
-    .row-fluid .row-fluid:last-child .well-item {
-        border: none;
-    }
-    .well-item{
-        color: #666;
-        font-size: 12px;
-        border-bottom: 1px solid #e5e5e5;
-        padding: 8px 4px;
-        strong {
-            font-size: 16px;
-        }  
-    } 
-}
-
-
-#doc {
-    .dropdown-menu{
-        width: auto;
-    }
-}
-// #tabs {
-//     height: 40px;
-// }
-
-.databases{
+.databases {
     a.db-actions,
-    a.db-actions:visited{
-        color: @red; 
+    a.db-actions:visited {
+        color: @red;
         border: 1px solid #e3e3e3;
         padding: 5px 7px;
         .border-radius(6px);
@@ -210,38 +31,3 @@ table.active-tasks{
         font-size: 19px;
     }
 }
-.btn-group{
-    ul.dropdown-menu li a:before{
-        margin-right: 10px;
-    }
-}
-
-.design-doc-group{
-    .span3 { margin: 0;}
-    #new-ddoc-section {
-        margin-top: 10px;
-        label{ width: 100px}
-        .controls{
-            margin-left: 100px;
-        }
-    }
-}
-table#changes-table {
-
-  #changes {
-    width: 50%;
-  }
-
-  #seq, #deleted {
-    width: 5%;
-  }
-
-}
-
-.doc-editor-buttons {
-    margin-bottom: 15px;
-    a.button.btn-large.gray {
-        padding: 9px 10px;
-        vertical-align: middle;
-    }
-}

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/247b61cd/app/addons/databases/templates/list.html
----------------------------------------------------------------------
diff --git a/app/addons/databases/templates/list.html b/app/addons/databases/templates/list.html
index 31c0977..1503c32 100644
--- a/app/addons/databases/templates/list.html
+++ b/app/addons/databases/templates/list.html
@@ -14,9 +14,11 @@ the License.
 
 <div class="result-tools" style="">
   <div id="newButton" class="pull-left"></div>
-  <form id="jump-to-db" class="navbar-form pull-right input-append database-search">
-    <input type="text" class="search-autocomplete" name="search-query" placeholder="Database name"></input>
-    <button class="fonticon-search btn button red " type="submit"></button>
+  <form id="jump-to-db" class="navbar-form pull-right database-search">
+    <div class="input-append">
+      <input type="text" class="search-autocomplete" name="search-query" placeholder="Database name" />
+      <button class="btn btn-primary" type="submit"><i class="icon icon-search"></i></button>
+    </div>
   </form>
 
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/247b61cd/app/addons/databases/templates/newdatabase.html
----------------------------------------------------------------------
diff --git a/app/addons/databases/templates/newdatabase.html b/app/addons/databases/templates/newdatabase.html
index b357e0b..1376ad5 100644
--- a/app/addons/databases/templates/newdatabase.html
+++ b/app/addons/databases/templates/newdatabase.html
@@ -12,6 +12,5 @@ License for the specific language governing permissions and limitations under
 the License.
 -->
 
-<a class="button new" id="new"><i class="icon fonticon-new-database"></i>Add New Database</a>
-
+<a class="btn btn-primary new" id="new"><i class="icon fonticon-new-database"></i> Add New Database</a>
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/247b61cd/app/addons/documents/assets/less/documents.less
----------------------------------------------------------------------
diff --git a/app/addons/documents/assets/less/documents.less b/app/addons/documents/assets/less/documents.less
index 68fc58d..6f462ef 100644
--- a/app/addons/documents/assets/less/documents.less
+++ b/app/addons/documents/assets/less/documents.less
@@ -10,7 +10,7 @@
 // License for the specific language governing permissions and limitations under
 // the License.
 /*ALL DOCS TABLE*/
-tr.all-docs-item{
+tr.all-docs-item {
   border: none;
   background: transparent;
     .btn-group {
@@ -22,3 +22,71 @@ tr.all-docs-item{
 button.beautify {
 	margin-top: 20px;
 }
+
+
+/** used in all_docs_list.html **/
+.view {
+    table td div {
+        position: relative;
+    }
+
+    table td div div {
+        display: none;
+        line-height: 1;
+        position: absolute;
+        right: 4px;
+        top: 4px;
+    }
+
+    table td div:hover div a.edits {
+        padding-left: 16px;
+        padding-right: 16px;
+    }
+
+    table td div:hover div {
+        display: block;
+    }
+}
+
+/** used in ddocs_info.html **/
+.well {
+    .row-fluid {
+        margin: 0;
+    }
+    .row-fluid .row-fluid:last-child .well-item {
+        border: none;
+    }
+    .well-item {
+        color: #666;
+        font-size: 12px;
+        border-bottom: 1px solid #e5e5e5;
+        padding: 8px 4px;
+        strong {
+            font-size: 16px;
+        }
+    }
+}
+
+/** used in view_editor.html **/
+.design-doc-group{
+    .span3 { margin: 0;}
+    #new-ddoc-section {
+        margin-top: 10px;
+        label{ width: 100px}
+        .controls{
+            margin-left: 100px;
+        }
+    }
+}
+
+/** used in changes.html **/
+#changes-table {
+
+  #changes {
+    width: 50%;
+  }
+
+  #seq, #deleted {
+    width: 5%;
+  }
+}

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/247b61cd/app/addons/documents/templates/advanced_options.html
----------------------------------------------------------------------
diff --git a/app/addons/documents/templates/advanced_options.html b/app/addons/documents/templates/advanced_options.html
index e256325..bea256a 100644
--- a/app/addons/documents/templates/advanced_options.html
+++ b/app/addons/documents/templates/advanced_options.html
@@ -86,9 +86,9 @@ the License.
   <div class="controls-group">
     <div class="row-fluid">
       <div id="button-options" class="controls controls-row">
-        <button type="submit" class="button green">Query</button>
+        <button type="submit" class="btn btn-success">Query</button>
         <% if (showPreview) { %>
-        <button class="button btn-info preview">Browser Preview</button>
+        <button class="btn btn-info preview">Browser Preview</button>
         <% } %>
       </div>
     </div>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/247b61cd/app/addons/documents/templates/all_docs_layout.html
----------------------------------------------------------------------
diff --git a/app/addons/documents/templates/all_docs_layout.html b/app/addons/documents/templates/all_docs_layout.html
index 6b4a31b..2862e16 100644
--- a/app/addons/documents/templates/all_docs_layout.html
+++ b/app/addons/documents/templates/all_docs_layout.html
@@ -12,7 +12,8 @@ License for the specific language governing permissions and limitations under
 the License.
 -->
 <ul class="nav nav-tabs window-resizeable" id="db-views-tabs-nav">
-  <li><a id="toggle-query" class="fonticon-plus fonticon" href="#query" data-bypass="true" data-toggle="tab">Query Options</a></li>
+  <li><a id="toggle-query" href="#query" data-bypass="true" data-toggle="tab">
+    <i class="fonticon fonticon-plus"></i> Query Options</a></li>
 </ul>
 <div class="tab-content">
   <div class="tab-pane" id="query">

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/247b61cd/app/addons/documents/templates/all_docs_list.html
----------------------------------------------------------------------
diff --git a/app/addons/documents/templates/all_docs_list.html b/app/addons/documents/templates/all_docs_list.html
index 335b040..cdec81e 100644
--- a/app/addons/documents/templates/all_docs_list.html
+++ b/app/addons/documents/templates/all_docs_list.html
@@ -12,16 +12,16 @@ License for the specific language governing permissions and limitations under
 the License.
 -->
 
-<div class="view show">
+<div class="view">
   <% if (!viewList) { %>
     <div class="row">
       <div class="btn-toolbar span6">
-        <button type="button" class="btn all" data-toggle="button">✓ All</button>
+        <button type="button" class="btn btn-small all" data-toggle="button">✓ All</button>
         <button class="btn btn-small disabled bulk-delete"><i class="icon-trash"></i></button>
         <% if (expandDocs) { %>
-        <button id="collapse" class="btn"><i class="icon-minus"></i> Collapse</button>
+        <button id="collapse" class="btn btn-small"><i class="icon-minus"></i> Collapse</button>
         <% } else { %>
-        <button id="collapse" class="btn"><i class="icon-plus"></i> Expand</button>
+        <button id="collapse" class="btn btn-small"><i class="icon-plus"></i> Expand</button>
         <% } %>
       </div>
     </div>
@@ -31,7 +31,7 @@ the License.
   <div id="item-numbers"> </div>
 
   <% if (requestDuration) { %>
-    <span class="view-request-duration">
+    <span class="view-request-duration pull-right">
     View request duration: <strong> <%= requestDuration %> </strong> 
     </span>
   <% } %>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/247b61cd/app/addons/documents/templates/doc.html
----------------------------------------------------------------------
diff --git a/app/addons/documents/templates/doc.html b/app/addons/documents/templates/doc.html
index 10bbf8b..5ef70fe 100644
--- a/app/addons/documents/templates/doc.html
+++ b/app/addons/documents/templates/doc.html
@@ -15,19 +15,19 @@ the License.
 <div id="doc">
   <div class="errors-container"></div>
    
-<div class="row doc-editor-buttons"> 
+<div class="nav">
   <div class="span3">
-    <button class="save-doc button green btn-medium save fonticon-circle-check" type="button">Save</button>
-    <button class="button cancel-button gray btn-medium">Back to _all_docs</button>
+    <button class="save-doc btn btn-success save" type="button"><i class="icon fonticon-circle-check"></i> Save</button>
+    <button class="btn cancel-button">Back to _all_docs</button>
   </div>
 
   <div class="span7">
     <% if (attachments) { %>
     <div class="btn-group">
-      <a class="button gray btn-medium dropdown-toggle btn" data-bypass="true" data-toggle="dropdown" href="#">
+      <button class="dropdown-toggle btn" data-bypass="true" data-toggle="dropdown">
         View Attachments
         <span class="caret"></span>
-      </a>
+      </button>
       <ul class="dropdown-menu">
         <%_.each(attachments, function (att) { %>
         <li>
@@ -39,11 +39,11 @@ the License.
       </ul>
     </div>
     <% } %> 
-    <button class="button gray btn-medium  upload"><i class="icon-circle-arrow-up"></i> Upload Attachment</button>
-    <button class="button gray btn-medium duplicate"><i class="icon-repeat"></i> Duplicate document</button>
+    <button class="btn upload"><i class="icon icon-circle-arrow-up"></i> Upload Attachment</button>
+    <button class="btn duplicate"><i class="icon icon-repeat"></i> Duplicate document</button>
   </div>
 
-  <button class="button red btn-medium delete"><i class="icon-trash"></i></button>
+  <button class="btn btn-danger delete"><i class="icon icon-trash"></i></button>
   </ul>
 
 <div id="upload-modal"> </div>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/247b61cd/app/addons/documents/templates/doc_field_editor.html
----------------------------------------------------------------------
diff --git a/app/addons/documents/templates/doc_field_editor.html b/app/addons/documents/templates/doc_field_editor.html
index 77d9278..3ad9484 100644
--- a/app/addons/documents/templates/doc_field_editor.html
+++ b/app/addons/documents/templates/doc_field_editor.html
@@ -21,8 +21,8 @@ the License.
       <button class="btn btn-small new" style="margin-left: 64px"><i class="icon-plus"></i> New field</button>
     </div>
     <div class="btn-toolbar pull-right">
-      <button class="btn btn-small cancel button cancel-button outlineGray fonticon-circle-x">Cancel</button>
-      <button class="btn btn-small save button green fonticon-circle-check">Save</button>
+      <button class="btn btn-small cancel cancel-button"><i class="icon fonticon-circle-x"></i> Cancel</button>
+      <button class="btn btn-small btn-success save"><i class="icon fonticon-circle-check"></i> Save</button>
     </div>
   </div>
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/247b61cd/app/addons/documents/templates/duplicate_doc_modal.html
----------------------------------------------------------------------
diff --git a/app/addons/documents/templates/duplicate_doc_modal.html b/app/addons/documents/templates/duplicate_doc_modal.html
index dbb25bc..7616300 100644
--- a/app/addons/documents/templates/duplicate_doc_modal.html
+++ b/app/addons/documents/templates/duplicate_doc_modal.html
@@ -28,8 +28,8 @@ the License.
 
   </div>
   <div class="modal-footer">
-    <a href="#" data-dismiss="modal" class="btn button cancel-button outlineGray fonticon-circle-x">Cancel</a>
-    <a href="#" id="duplicate-btn" class="btn btn-primary button green save fonticon-circle-check">Duplicate</a>
+    <button data-dismiss="modal" class="btn cancel-button"><i class="icon fonticon-circle-x"></i> Cancel</button>
+    <button id="duplicate-btn" class="btn btn-success save"><i class="fonticon-circle-check"></i> Duplicate</button>
   </div>
 </div>
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/247b61cd/app/addons/documents/templates/jumpdoc.html
----------------------------------------------------------------------
diff --git a/app/addons/documents/templates/jumpdoc.html b/app/addons/documents/templates/jumpdoc.html
index 43fdb9c..1ad3de9 100644
--- a/app/addons/documents/templates/jumpdoc.html
+++ b/app/addons/documents/templates/jumpdoc.html
@@ -12,8 +12,9 @@ License for the specific language governing permissions and limitations under
 the License.
 -->
 
-<form id="jump-to-doc" class="form-inline input-append" >
-  <input type="text" id="jump-to-doc-id" class="input-large" placeholder="Document ID"></input>
-
-  <button class="fonticon-search btn button red " type="submit"></button>
+<form id="jump-to-doc" class="pull-right">
+  <div class="input-append">
+    <input type="text" id="jump-to-doc-id" class="input-large" placeholder="Document ID"></input>
+    <button class="btn btn-primary" type="submit"><i class="icon icon-search"></i></button>
+  </div>
 </form>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/247b61cd/app/addons/documents/templates/sidebar.html
----------------------------------------------------------------------
diff --git a/app/addons/documents/templates/sidebar.html b/app/addons/documents/templates/sidebar.html
index c8ce511..7358960 100644
--- a/app/addons/documents/templates/sidebar.html
+++ b/app/addons/documents/templates/sidebar.html
@@ -22,11 +22,11 @@ the License.
         </button>
         <ul class="dropdown-menu">
           <!-- dropdown menu links -->
-          <li><a class="icon-file" href="<%= db_url %>">Docs</a></li>
-          <li><a class="icon-lock" href="<%= permissions_url %>">Permissions</a></li>
-          <li><a class="icon-forward" href="<%= changes_url %>">Changes</a></li>
+          <li><a href="<%= db_url %>"><i class="icon icon-file"></i> Docs</a></li>
+          <li><a href="<%= permissions_url %>"><i class="icon icon-lock"></i> Permissions</a></li>
+          <li><a href="<%= changes_url %>"><i class="icon icon-forward"></i> Changes</a></li>
           <% _.each(docLinks, function (link) { %>
-          <li><a class="<%= link.icon %>" href="<%= database_url + '/' + link.url %>"><%= link.title %></a></li>
+          <li><a href="<%= database_url + '/' + link.url %>"><i class="icon <%= link.icon %>"></i> <%= link.title %></a></li>
           <% }); %>
         </ul>
       </div>
@@ -49,7 +49,7 @@ the License.
           </li>
         </ul>
       </div>
-        <button id="delete-database" class="btn"><i class="icon-trash"></i> Database</button>
+        <button id="delete-database" class="btn pull-right"><i class="icon-trash"></i> Database</button>
     </div>
   </header>
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/247b61cd/app/addons/documents/templates/upload_modal.html
----------------------------------------------------------------------
diff --git a/app/addons/documents/templates/upload_modal.html b/app/addons/documents/templates/upload_modal.html
index 9a5c5cd..b71cd1e 100644
--- a/app/addons/documents/templates/upload_modal.html
+++ b/app/addons/documents/templates/upload_modal.html
@@ -35,8 +35,8 @@ the License.
     </div>
   </div>
   <div class="modal-footer">
-    <a href="#" data-dismiss="modal" data-bypass="true" class="btn button cancel-button outlineGray fonticon-circle-x">Cancel</a>
-    <a href="#" id="upload-btn" data-bypass="true" class="btn btn-primary button green save fonticon-circle-check">Upload</a>
+    <button href="#" data-dismiss="modal" data-bypass="true" class="btn"><i class="icon fonticon-circle-x"></i> Cancel</button>
+    <button href="#" id="upload-btn" data-bypass="true" class="btn btn-success save"><i class="icon fonticon-circle-check"></i> Upload</button>
   </div>
 </div>
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/247b61cd/app/addons/documents/templates/view_editor.html
----------------------------------------------------------------------
diff --git a/app/addons/documents/templates/view_editor.html b/app/addons/documents/templates/view_editor.html
index d02971e..be60090 100644
--- a/app/addons/documents/templates/view_editor.html
+++ b/app/addons/documents/templates/view_editor.html
@@ -13,9 +13,12 @@ the License.
 -->
 <div class="row">
   <ul class="nav nav-tabs" id="db-views-tabs-nav">
-    <li class="active"> <a data-bypass="true" id="index-nav" class="fonticon-wrench fonticon" data-toggle="tab" href="#index"><% if (newView) { %>Create Index <% } else { %>Edit Index <% } %></a></li>
+    <li class="active"> <a data-bypass="true" id="index-nav" data-toggle="tab" href="#index">
+      <i class="fonticon-wrench fonticon"></i>
+      <% if (newView) { %>Create Index <% } else { %>Edit Index <% } %></a></li>
     <% if (!newView) { %>
-    <li><a data-bypass="true" id="query-nav" class="fonticon-plus fonticon" href="#query" data-toggle="tab">Query Options</a></li>
+    <li><a data-bypass="true" id="query-nav" href="#query" data-toggle="tab">
+      <i class="fonticon-plus fonticon"></i> Query Options</a></li>
     <li><a data-bypass="true" id="meta-nav" href="#metadata" data-toggle="tab">Design Doc Metadata</a></li>
     <% } %>
   </ul>
@@ -69,10 +72,10 @@ the License.
           </div>
 
           <div class="control-group">
-            <button class="button green save fonticon-circle-check">Save &amp; Build Index</button>
-            <button class="button btn-info preview">Preview</button>
+            <button class="btn btn-success save"><i class="icon fonticon-circle-check"></i> Save &amp; Build Index</button>
+            <button class="btn btn-info preview">Preview</button>
             <% if (!newView) { %>
-            <button class="button delete outlineGray fonticon-circle-x">Delete</button>
+            <button class="btn btn-danger delete"><i class="icon fonticon-circle-x"></i> Delete</button>
             <% } %>
           </div>
           <div class="clearfix"></div>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/247b61cd/app/addons/documents/views.js
----------------------------------------------------------------------
diff --git a/app/addons/documents/views.js b/app/addons/documents/views.js
index 8ddf46f..298cfb4 100644
--- a/app/addons/documents/views.js
+++ b/app/addons/documents/views.js
@@ -156,7 +156,7 @@ function(app, FauxtonAPI, Components, Documents, Databases, pouchdb, resizeColum
     template: "addons/documents/templates/upload_modal",
 
     events: {
-      "click a#upload-btn": "uploadFile"
+      "click #upload-btn": "uploadFile"
     },
 
     uploadFile: function (event) {

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/247b61cd/app/addons/fauxton/templates/api_bar.html
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/templates/api_bar.html b/app/addons/fauxton/templates/api_bar.html
index 1f03a2c..4fb5971 100644
--- a/app/addons/fauxton/templates/api_bar.html
+++ b/app/addons/fauxton/templates/api_bar.html
@@ -12,9 +12,9 @@ License for the specific language governing permissions and limitations under
 the License.
 -->
 
-<button class="button api-url-btn">
+<button class="btn btn-primary pull-right api-url-btn">
   API URL 
-  <span class="fonticon-plus icon"></span>
+  <i class="fonticon-plus icon"></i>
 </button>
 <div class="api-navbar" style="display: none">
     <div class="input-prepend input-append">

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/247b61cd/app/addons/fauxton/templates/nav_bar.html
----------------------------------------------------------------------
diff --git a/app/addons/fauxton/templates/nav_bar.html b/app/addons/fauxton/templates/nav_bar.html
index da030d6..9ba24f4 100644
--- a/app/addons/fauxton/templates/nav_bar.html
+++ b/app/addons/fauxton/templates/nav_bar.html
@@ -27,7 +27,7 @@ the License.
     <% if (link.view) {return;}  %>
         <li data-nav-name= "<%= link.title %>" >
           <a href="<%= link.href %>">
-            <span class="<%= link.icon %> fonticon"></span>
+            <i class="<%= link.icon %> fonticon"></i>
             <%= link.title %>
           </a>
         </li>
@@ -39,7 +39,7 @@ the License.
     <ul id="bottom-nav-links" class="nav">
         <li data-nav-name= "Documentation">
             <a href="<%=getDocUrl('docs')%>" target="_blank">
-              <span class="fonticon-bookmark fonticon"></span>
+              <i class="fonticon-bookmark fonticon"></i>
                 Documentation
             </a>
         </li>
@@ -49,7 +49,7 @@ the License.
       <% if (link.view) {return;}  %>
         <li data-nav-name= "<%= link.title %>">
             <a href="<%= link.href %>">
-              <span class="<%= link.icon %> fonticon"></span>
+              <i class="<%= link.icon %> fonticon"></i>
               <%= link.title %>
             </a>
         </li>
@@ -61,7 +61,7 @@ the License.
       <% if (link.view) {return;}  %>
         <li data-nav-name= "<%= link.title %>">
             <a href="<%= link.href %>">
-              <span class="<%= link.icon %> fonticon"></span>
+              <i class="<%= link.icon %> fonticon"></i>
               <%= link.title %>
             </a>
         </li>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/247b61cd/app/addons/permissions/assets/less/permissions.less
----------------------------------------------------------------------
diff --git a/app/addons/permissions/assets/less/permissions.less b/app/addons/permissions/assets/less/permissions.less
index 7ce4d10..83f270c 100644
--- a/app/addons/permissions/assets/less/permissions.less
+++ b/app/addons/permissions/assets/less/permissions.less
@@ -10,35 +10,18 @@
 // License for the specific language governing permissions and limitations under
 // the License.
 
-.border-hdr {
-  border-bottom: 1px solid #E3E3E3;
-  margin-bottom: 10px;
-  .help{
-
-  }
-  h3{
-    text-transform: capitalize;
-    margin-bottom: 0;
-  }
-}
-
-
-.permission-items.unstyled{
-	margin-left: 0px;
-	li {
-		padding: 5px;
-		border-bottom: 1px solid #E3E3E3;
-		border-right: 1px solid #E3E3E3;
-		border-left: 3px solid #E3E3E3;
-		&:first-child{
-			border-top: 1px solid #E3E3E3;
-		}
-		&:nth-child(odd){
-      border-left: 3px solid red;
+.permission-items.unstyled {
+  margin-left: 0px;
+  li {
+    padding: 5px;
+    border-bottom: 1px solid #E3E3E3;
+    border-right: 1px solid #E3E3E3;
+    border-left: 3px solid #E3E3E3;
+    &:first-child {
+      border-top: 1px solid #E3E3E3;
     }
-    button {
-    	float: right;
-    	margin-bottom: 6px;
+    &:nth-child(odd){
+      border-left: 3px solid red;
     }
   }
 }

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/247b61cd/app/addons/permissions/templates/item.html
----------------------------------------------------------------------
diff --git a/app/addons/permissions/templates/item.html b/app/addons/permissions/templates/item.html
index 616ffd6..490cff4 100644
--- a/app/addons/permissions/templates/item.html
+++ b/app/addons/permissions/templates/item.html
@@ -13,5 +13,5 @@ the License.
 -->
 
 <span> <%= item %> </span>
-<button type="button" class="close">&times;</button>
+<button type="button" class="pull-right close">&times;</button>
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/247b61cd/app/addons/permissions/templates/section.html
----------------------------------------------------------------------
diff --git a/app/addons/permissions/templates/section.html b/app/addons/permissions/templates/section.html
index 3360308..8f4d552 100644
--- a/app/addons/permissions/templates/section.html
+++ b/app/addons/permissions/templates/section.html
@@ -11,9 +11,9 @@ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 License for the specific language governing permissions and limitations under
 the License.
 -->
-<header class="border-hdr">
+<header class="page-header">
 <h3> <%= (section) %> </h3>
-<p id="help"> <%= help %> <a href="<%=getDocUrl('database_permission')%>" target="_blank"><i class="icon-question-sign"> </i> </a></p>
+<p class="help"> <%= help %> <a href="<%=getDocUrl('database_permission')%>" target="_blank"><i class="icon-question-sign"> </i> </a></p>
 </header>
 
 <div class="row">
@@ -24,7 +24,7 @@ the License.
     </header>
     <form class="permission-item-form form-inline">
       <input data-section="<%= section %>" data-type="names" type="text" class="item input-small" placeholder="Add Name">
-      <button type="submit" class="button btn green fonticon-circle-plus">Add Name</button>
+      <button type="submit" class="btn btn-success"><i class="icon fonticon-circle-plus"></i> Add Name</button>
     </form>
     <ul class="clearfix unstyled permission-items span10" id="<%= (section) %>-items-names">
     </ul>
@@ -38,7 +38,7 @@ the License.
 
     <form class="permission-item-form form-inline">
       <input data-section="<%= section %>" data-type="roles" type="text" class="item input-small" placeholder="Add Role">
-      <button type="submit" class="button btn green fonticon-circle-plus">Add Role</button>
+      <button type="submit" class="btn btn-success"><i class="icon fonticon-circle-plus"></i> Add Role</button>
     </form>
     <ul class="unstyled permission-items span10" id="<%= (section) %>-items-roles">
     </ul>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/247b61cd/app/addons/replication/assets/less/replication.less
----------------------------------------------------------------------
diff --git a/app/addons/replication/assets/less/replication.less b/app/addons/replication/assets/less/replication.less
index a301966..0f8a8f5 100644
--- a/app/addons/replication/assets/less/replication.less
+++ b/app/addons/replication/assets/less/replication.less
@@ -10,187 +10,179 @@
 // License for the specific language governing permissions and limitations under
 // the License.
 
+@import "../../../../../assets/less/variables.less";
 
-@brown: #3A2C2B;
-@red: #E33F3B;
-@darkRed: #AF2D24;
-@linkRed: #DA4F49;
-@greyBrown: #A59D9D;
-@fontGrey: #808080;
-@secondarySidebar: #E4DFDC;
+#replication {
+  position: relative;
+  max-width: none;
+  width: auto;
 
+  .form_set {
+    width: 350px;
+    display: inline-block;
+    border: 1px solid @greyBrownLighter;
+    padding: 15px 10px 0;
+    margin-bottom: 20px;
+    &.middle {
+      width: 100px;
+      border: none;
+      position: relative;
+      height: 100px;
+      margin: 0;
+    }
+    input, select {
+      margin: 0 0 16px 5px;
+      height: 40px;
+      width: 318px;
+    }
+    .btn-group {
+      margin: 0 0 16px 5px;
+      .btn {
+        padding: 10px 57px;
+      }
+    }
+    &.local {
+      .local_option {
+        display: block;
+      }
+      .remote_option {
+        display: none;
+      }
+      .local-btn {
+        background-color: @red;
+        color: #fff;
+      }
+      .remote-btn {
+        background-color: #f5f5f5;
+        color: @fontGrey;
+      }
+    }
+    .local_option {
+      display: none;
+    }
+    .remote-btn {
+      background-color: @red;
+      color: #fff;
+    }
+  }
 
-form#replication {
-	position: relative;
-	max-width: none;
-	width: auto;
 
-	.form_set{
-		width: 350px;
-		display: inline-block;
-		border: 1px solid @greyBrown;
-		padding: 15px 10px 0;
-		margin-bottom: 20px;
-		&.middle{
-			width: 100px;
-			border: none;
-			position: relative;
-			height: 100px;
-			margin: 0;
-		}
-		input, select {
-			margin: 0 0 16px 5px;
-			height: 40px;
-			width: 318px;
-		}
-		.btn-group{
-			margin: 0 0 16px 5px;
-			.btn {
-				padding: 10px 57px;
-			}
-		}
-		&.local{
-			.local_option{
-				display: block;
-			}
-			.remote_option{
-				display: none;
-			}
-			.local-btn{
-				background-color: @red;
-				color: #fff;
-			}
-			.remote-btn{
-				background-color: #f5f5f5;
-				color: @fontGrey;
-			}
-		}
-		.local_option{
-			display: none;
-		}
-		.remote-btn{
-			background-color: @red;
-			color: #fff;
-		}
-	}
+  .options {
+    position: relative;
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      right: -16px;
+      top: 9px;
+      width: 0;
+      height: 0;
+      border-left: 5px solid transparent;
+      border-right: 5px solid transparent;
+      border-bottom: 5px solid black;
+      border-top: none;
+    }
+    &.off {
+      &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      right: -16px;
+      top: 9px;
+      width: 0;
+      height: 0;
+      border-left: 5px solid transparent;
+      border-right: 5px solid transparent;
+      border-bottom: none;
+      border-top: 5px solid black;
+      }
+    }
+  }
+  .control-group {
+    label {
+      float: left;
+      min-height: 30px;
+      vertical-align: top;
+      padding-right: 5px;
+      min-width: 130px;
+      padding-left: 0px;
+    }
+    input[type=radio],
+    input[type=checkbox] {
+      margin: 0 0 2px 0;
+    }
+  }
 
+  .circle {
+    z-index: 0;
+    position: absolute;
+    top: 20px;
+    left: 15px;
 
-	.options {
-		position: relative;
-		&:after{
-			content: '';
-			display: block;
-			position: absolute;
-			right: -16px;
-			top: 9px;
-			width: 0; 
-			height: 0; 
-			border-left: 5px solid transparent;
-			border-right: 5px solid transparent;
-			border-bottom: 5px solid black;
-			border-top: none;
-		}
-		&.off {
-			&:after{
-			content: '';
-			display: block;
-			position: absolute;
-			right: -16px;
-			top: 9px;
-			width: 0; 
-			height: 0; 
-			border-left: 5px solid transparent;
-			border-right: 5px solid transparent;
-			border-bottom: none;
-			border-top: 5px solid black;
-			}
-		}
-	}
-	.control-group{
-		label{
-			float: left;
-			min-height: 30px;
-			vertical-align: top;
-			padding-right: 5px;
-			min-width: 130px;
-			padding-left: 0px;
-		}
-		input[type=radio],
-		input[type=checkbox]{
-			margin: 0 0 2px 0;
-		}
-	}
-
-	.circle{
-		z-index: 0;
-		position: absolute;
-		top: 20px;
-		left: 15px;
-
-		&:after {
-			width: 70px;
-			height: 70px;
-			content: '';
-			display: block;
-			position: relative;
-			margin: 0 auto;
-			border: 1px solid @greyBrown;
-			-webkit-border-radius: 40px;
-			-moz-border-radius: 40px;
-			border-radius:40px;
-		}
-	}
-	.swap {
-		text-decoration: none;
-		z-index: 30;
-		cursor: pointer;
-		position: absolute;
-		font-size: 40px;
-		width: 27px;
-		height: 12px;
-		top: 31px;
-		left: 30px;
-		&:hover {
-			color: @greyBrown;
-		}
-	}
-
+    &:after {
+      width: 70px;
+      height: 70px;
+      content: '';
+      display: block;
+      position: relative;
+      margin: 0 auto;
+      border: 1px solid @greyBrownLighter;
+      -webkit-border-radius: 40px;
+      -moz-border-radius: 40px;
+      border-radius:40px;
+    }
+  }
+  .swap {
+    text-decoration: none;
+    z-index: 30;
+    cursor: pointer;
+    position: absolute;
+    font-size: 40px;
+    width: 27px;
+    height: 12px;
+    top: 31px;
+    left: 30px;
+    &:hover {
+      color: @greyBrownLighter;
+    }
+  }
 }
-#replicationStatus{
-	&.showHeader{
-		li.header{
-			display: block;
-			border: none;
-		}
-		ul {
-			border:1px solid @greyBrown;
-		}
-	}
-	li.header{
-		display: none;
-	}
-	ul{
-		margin: 0;
-		li{
-			.progress,
-			p{
-				margin: 0px;
-				vertical-align: bottom;
-				&.break {
-					-ms-word-break: break-all;
-					word-break: break-all;
 
-					/* Non standard for webkit */
-					word-break: break-word;
-					-webkit-hyphens: auto;
-					-moz-hyphens: auto;
-					hyphens: auto;
-				}
-			}
-			padding: 10px 10px;
-			margin: 0;
-			list-style: none;
-			border-top: 1px solid @greyBrown;
-		}
-	}
+#replicationStatus {
+  &.showHeader {
+    li.header {
+      display: block;
+      border: none;
+    }
+    ul {
+      border:1px solid @greyBrownLighter;
+    }
+  }
+  li.header {
+    display: none;
+  }
+  ul {
+    margin: 0;
+    li {
+      .progress,
+      p {
+        margin: 0px;
+        vertical-align: bottom;
+        &.break {
+          -ms-word-break: break-all;
+          word-break: break-all;
+
+          /* Non standard for webkit */
+          word-break: break-word;
+          -webkit-hyphens: auto;
+          -moz-hyphens: auto;
+          hyphens: auto;
+        }
+      }
+      padding: 10px 10px;
+      margin: 0;
+      list-style: none;
+      border-top: 1px solid @greyBrownLighter;
+    }
+  }
 }

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/247b61cd/app/addons/stats/assets/less/stats.less
----------------------------------------------------------------------
diff --git a/app/addons/stats/assets/less/stats.less b/app/addons/stats/assets/less/stats.less
index cfa7679..7ec88b9 100644
--- a/app/addons/stats/assets/less/stats.less
+++ b/app/addons/stats/assets/less/stats.less
@@ -11,9 +11,5 @@
 // the License.
 
 .datatypes {
-  border: #d3d3d3 1px solid;
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  border-radius: 5px;
-  padding: 15px;
+  padding: 0 15px;
 }

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/247b61cd/app/addons/styletests/base.js
----------------------------------------------------------------------
diff --git a/app/addons/styletests/base.js b/app/addons/styletests/base.js
new file mode 100644
index 0000000..fae6d11
--- /dev/null
+++ b/app/addons/styletests/base.js
@@ -0,0 +1,33 @@
+// Licensed under the Apache License, Version 2.0 (the "License"); you may not
+// use this file except in compliance with the License. You may obtain a copy of
+// the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+// License for the specific language governing permissions and limitations under
+// the License.
+
+define([
+  "app",
+  "api",
+  "addons/styletests/routes"
+],
+
+function(app, FauxtonAPI, tests) {
+
+	tests.initialize = function() {
+
+		FauxtonAPI.addHeaderLink({
+			title: "Tests", 
+			href: '#/tests',
+			bottomNav: true,
+			icon: "fonticon-wrench"
+		});
+		
+	};
+
+	return tests;
+});

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/247b61cd/app/addons/styletests/resources.js
----------------------------------------------------------------------
diff --git a/app/addons/styletests/resources.js b/app/addons/styletests/resources.js
new file mode 100644
index 0000000..0309d8e
--- /dev/null
+++ b/app/addons/styletests/resources.js
@@ -0,0 +1,22 @@
+// Licensed under the Apache License, Version 2.0 (the "License"); you may not
+// use this file except in compliance with the License. You may obtain a copy of
+// the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+// License for the specific language governing permissions and limitations under
+// the License.
+
+define([
+  "app",
+  "api"
+],
+
+function (app, FauxtonAPI) {
+  var resources = {};
+
+  return resources;
+});

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/247b61cd/app/addons/styletests/routes.js
----------------------------------------------------------------------
diff --git a/app/addons/styletests/routes.js b/app/addons/styletests/routes.js
new file mode 100644
index 0000000..cafd9f2
--- /dev/null
+++ b/app/addons/styletests/routes.js
@@ -0,0 +1,40 @@
+// Licensed under the Apache License, Version 2.0 (the "License"); you may not
+// use this file except in compliance with the License. You may obtain a copy of
+// the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+// License for the specific language governing permissions and limitations under
+// the License.
+
+define([
+  "app",
+  "api",
+  "addons/styletests/views"
+],
+
+function(app, FauxtonAPI, Views) {
+
+	var TestRouteObject = FauxtonAPI.RouteObject.extend({
+		layout: "one_pane",
+		routes: {
+			"tests": "initialize"
+		},
+		selectedHeader: 'theme tests',
+		crumbs:[],
+    apiUrl: function(){
+      return false;
+    },
+    initialize: function(){
+			this.setView("#dashboard-content", new Views.tests({}));
+    }
+	});
+
+	Views.RouteObjects = [TestRouteObject];
+
+	return Views;
+ 
+});

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/247b61cd/app/addons/styletests/templates/theme.html
----------------------------------------------------------------------
diff --git a/app/addons/styletests/templates/theme.html b/app/addons/styletests/templates/theme.html
new file mode 100644
index 0000000..f05bad1
--- /dev/null
+++ b/app/addons/styletests/templates/theme.html
@@ -0,0 +1,496 @@
+// Licensed under the Apache License, Version 2.0 (the "License"); you may not
+// use this file except in compliance with the License. You may obtain a copy of
+// the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+// License for the specific language governing permissions and limitations under
+// the License.
+
+<div class="container theme-showcase">
+
+  <!-- Main jumbotron for a primary marketing message or call to action -->
+  <div class="jumbotron">
+    <h1>Fauxton Style Guide <small>mostly made of Bootstrap 2.x</small></h1>
+    <p>(Mostly) Standard Bootstrap styles customized for Fauxton.</p>
+  </div>
+
+  <div class="page-header">
+    <h1>Typography</h1>
+  </div>
+  <h1>h1. Heading 1</h1>
+  <h2>h2. Heading 2</h2>
+  <h3>h3. Heading 3</h3>
+  <h4>h4. Heading 4</h4>
+  <h5>h5. Heading 5</h5>
+  <h6>h6. Heading 6</h6>
+
+  <div class="page-header">
+    <h1>Buttons</h1>
+  </div>
+
+  <h4>Bootstrap Standard Button class names</h4>
+  <p>.btn.btn-large.btn-*<br />
+    <button type="button" class="btn btn-large btn-default">Default</button>
+    <button type="button" class="btn btn-large btn-primary">Primary</button>
+    <button type="button" class="btn btn-large btn-success">Success</button>
+    <button type="button" class="btn btn-large btn-info">Info</button>
+    <button type="button" class="btn btn-large btn-warning">Warning</button>
+    <button type="button" class="btn btn-large btn-danger">Danger</button>
+    <button type="button" class="btn btn-large btn-link">Link</button>
+  </p>
+  <p>.btn.btn-*<br />
+    <button type="button" class="btn btn-default">Default</button>
+    <button type="button" class="btn btn-primary">Primary</button>
+    <button type="button" class="btn btn-success">Success</button>
+    <button type="button" class="btn btn-info">Info</button>
+    <button type="button" class="btn btn-warning">Warning</button>
+    <button type="button" class="btn btn-danger">Danger</button>
+    <button type="button" class="btn btn-link">Link</button>
+  </p>
+  <p>.btn.btn-small.btn-*<br />
+    <button type="button" class="btn btn-small btn-default">Default</button>
+    <button type="button" class="btn btn-small btn-primary">Primary</button>
+    <button type="button" class="btn btn-small btn-success">Success</button>
+    <button type="button" class="btn btn-small btn-info">Info</button>
+    <button type="button" class="btn btn-small btn-warning">Warning</button>
+    <button type="button" class="btn btn-small btn-danger">Danger</button>
+    <button type="button" class="btn btn-small btn-link">Link</button>
+  </p>
+  <p>.btn.btn-mini.btn-*<br />
+    <button type="button" class="btn btn-mini btn-default">Default</button>
+    <button type="button" class="btn btn-mini btn-primary">Primary</button>
+    <button type="button" class="btn btn-mini btn-success">Success</button>
+    <button type="button" class="btn btn-mini btn-info">Info</button>
+    <button type="button" class="btn btn-mini btn-warning">Warning</button>
+    <button type="button" class="btn btn-mini btn-danger">Danger</button>
+    <button type="button" class="btn btn-mini btn-link">Link</button>
+  </p>
+
+  <h4>with Icons</h4>
+  <p>.btn.btn-large.btn-*<br />
+    <button type="button" class="btn btn-large btn-default"><i class="icon fonticon-new-database"></i> Default</button>
+    <button type="button" class="btn btn-large btn-primary"><i class="icon fonticon-new-database"></i> Primary</button>
+    <button type="button" class="btn btn-large btn-success"><i class="icon fonticon-new-database"></i> Success</button>
+    <button type="button" class="btn btn-large btn-info"><i class="icon fonticon-new-database"></i> Info</button>
+    <button type="button" class="btn btn-large btn-warning"><i class="icon fonticon-new-database"></i> Warning</button>
+    <button type="button" class="btn btn-large btn-danger"><i class="icon fonticon-new-database"></i> Danger</button>
+    <button type="button" class="btn btn-large btn-link"><i class="icon fonticon-new-database"></i> Link</button>
+  </p>
+
+  <p>.btn.btn-*<br />
+    <button type="button" class="btn btn-default"><i class="icon fonticon-new-database"></i> Default</button>
+    <button type="button" class="btn btn-primary"><i class="icon fonticon-new-database"></i> Primary</button>
+    <button type="button" class="btn btn-success"><i class="icon fonticon-new-database"></i> Success</button>
+    <button type="button" class="btn btn-info"><i class="icon fonticon-new-database"></i> Info</button>
+    <button type="button" class="btn btn-warning"><i class="icon fonticon-new-database"></i> Warning</button>
+    <button type="button" class="btn btn-danger"><i class="icon fonticon-new-database"></i> Danger</button>
+    <button type="button" class="btn btn-link"><i class="icon fonticon-new-database"></i> Link</button>
+  </p>
+  <p>.btn.btn-small.btn-*<br />
+    <button type="button" class="btn btn-small btn-default"><i class="icon fonticon-new-database"></i> Default</button>
+    <button type="button" class="btn btn-small btn-primary"><i class="icon fonticon-new-database"></i> Primary</button>
+    <button type="button" class="btn btn-small btn-success"><i class="icon fonticon-new-database"></i> Success</button>
+    <button type="button" class="btn btn-small btn-info"><i class="icon fonticon-new-database"></i> Info</button>
+    <button type="button" class="btn btn-small btn-warning"><i class="icon fonticon-new-database"></i> Warning</button>
+    <button type="button" class="btn btn-small btn-danger"><i class="icon fonticon-new-database"></i> Danger</button>
+    <button type="button" class="btn btn-small btn-link"><i class="icon fonticon-new-database"></i> Link</button>
+  </p>
+  <p>.btn.btn-mini.btn-*<br />
+    <button type="button" class="btn btn-mini btn-default"><i class="icon fonticon-new-database"></i> Default</button>
+    <button type="button" class="btn btn-mini btn-primary"><i class="icon fonticon-new-database"></i> Primary</button>
+    <button type="button" class="btn btn-mini btn-success"><i class="icon fonticon-new-database"></i> Success</button>
+    <button type="button" class="btn btn-mini btn-info"><i class="icon fonticon-new-database"></i> Info</button>
+    <button type="button" class="btn btn-mini btn-warning"><i class="icon fonticon-new-database"></i> Warning</button>
+    <button type="button" class="btn btn-mini btn-danger"><i class="icon fonticon-new-database"></i> Danger</button>
+    <button type="button" class="btn btn-mini btn-link"><i class="icon fonticon-new-database"></i> Link</button>
+  </p>
+
+  <h4>just Icons</h4>
+  <p>.btn.btn-large.btn-*<br />
+    <button type="button" class="btn btn-large btn-default"><i class="icon fonticon-new-database"></i></button>
+    <button type="button" class="btn btn-large btn-primary"><i class="icon fonticon-new-database"></i></button>
+    <button type="button" class="btn btn-large btn-success"><i class="icon fonticon-new-database"></i></button>
+    <button type="button" class="btn btn-large btn-info"><i class="icon fonticon-new-database"></i></button>
+    <button type="button" class="btn btn-large btn-warning"><i class="icon fonticon-new-database"></i></button>
+    <button type="button" class="btn btn-large btn-danger"><i class="icon fonticon-new-database"></i></button>
+    <button type="button" class="btn btn-large btn-link"><i class="icon fonticon-new-database"></i></button>
+  </p>
+
+  <p>.btn.btn-*<br />
+    <button type="button" class="btn btn-default"><i class="icon fonticon-new-database"></i></button>
+    <button type="button" class="btn btn-primary"><i class="icon fonticon-new-database"></i></button>
+    <button type="button" class="btn btn-success"><i class="icon fonticon-new-database"></i></button>
+    <button type="button" class="btn btn-info"><i class="icon fonticon-new-database"></i></button>
+    <button type="button" class="btn btn-warning"><i class="icon fonticon-new-database"></i></button>
+    <button type="button" class="btn btn-danger"><i class="icon fonticon-new-database"></i></button>
+    <button type="button" class="btn btn-link"><i class="icon fonticon-new-database"></i></button>
+  </p>
+  <p>.btn.btn-small.btn-*<br />
+    <button type="button" class="btn btn-small btn-default"><i class="icon fonticon-new-database"></i></button>
+    <button type="button" class="btn btn-small btn-primary"><i class="icon fonticon-new-database"></i></button>
+    <button type="button" class="btn btn-small btn-success"><i class="icon fonticon-new-database"></i></button>
+    <button type="button" class="btn btn-small btn-info"><i class="icon fonticon-new-database"></i></button>
+    <button type="button" class="btn btn-small btn-warning"><i class="icon fonticon-new-database"></i></button>
+    <button type="button" class="btn btn-small btn-danger"><i class="icon fonticon-new-database"></i></button>
+    <button type="button" class="btn btn-small btn-link"><i class="icon fonticon-new-database"></i></button>
+  </p>
+  <p>.btn.btn-mini.btn-*<br />
+    <button type="button" class="btn btn-mini btn-default"><i class="icon fonticon-new-database"></i></button>
+    <button type="button" class="btn btn-mini btn-primary"><i class="icon fonticon-new-database"></i></button>
+    <button type="button" class="btn btn-mini btn-success"><i class="icon fonticon-new-database"></i></button>
+    <button type="button" class="btn btn-mini btn-info"><i class="icon fonticon-new-database"></i></button>
+    <button type="button" class="btn btn-mini btn-warning"><i class="icon fonticon-new-database"></i></button>
+    <button type="button" class="btn btn-mini btn-danger"><i class="icon fonticon-new-database"></i></button>
+    <button type="button" class="btn btn-mini btn-link"><i class="icon fonticon-new-database"></i></button>
+  </p>
+  <p>.btn-group<br />
+    <div class="btn-group">
+      <a href="#" class="btn btn-small edits">Edit design doc</a>
+      <button href="#" class="btn btn-small btn-danger delete" title="Delete this document."><i class="icon icon-trash"></i></button>
+    </div>
+  </p>
+
+  <h4>disabled</h4>
+  <p>.btn.btn-*<br />
+    <button type="button" disabled="disabled" class="btn btn-default"><i class="icon fonticon-new-database"></i> Default</button>
+    <button type="button" disabled="disabled" class="btn btn-primary"><i class="icon fonticon-new-database"></i> Primary</button>
+    <button type="button" disabled="disabled" class="btn btn-success"><i class="icon fonticon-new-database"></i> Success</button>
+    <button type="button" disabled="disabled" class="btn btn-info"><i class="icon fonticon-new-database"></i> Info</button>
+    <button type="button" disabled="disabled" class="btn btn-warning"><i class="icon fonticon-new-database"></i> Warning</button>
+    <button type="button" disabled="disabled" class="btn btn-danger"><i class="icon fonticon-new-database"></i> Danger</button>
+    <button type="button" disabled="disabled" class="btn btn-link"><i class="icon fonticon-new-database"></i> Link</button>
+  </p>
+  <p>.btn.btn-*<br />
+    <button type="button" disabled="disabled" class="btn btn-default">Default</button>
+    <button type="button" disabled="disabled" class="btn btn-primary">Primary</button>
+    <button type="button" disabled="disabled" class="btn btn-success">Success</button>
+    <button type="button" disabled="disabled" class="btn btn-info">Info</button>
+    <button type="button" disabled="disabled" class="btn btn-warning">Warning</button>
+    <button type="button" disabled="disabled" class="btn btn-danger">Danger</button>
+    <button type="button" disabled="disabled" class="btn btn-link">Link</button>
+  </p>
+
+  <div class="page-header">
+    <h1>Forms</h1>
+  </div>
+
+  <form class="navbar-form database-search">
+    <div class="input-append">
+      <input class="search-autocomplete" name="search-query" placeholder="Database name" type="text">
+      <button class="btn btn-primary" type="submit"><i class="icon icon-search"></i></button>
+    </div>
+  </form>
+
+  <form class="navbar-form database-search">
+    <div class="input-append">
+      <input class="search-autocomplete" name="search-query" placeholder="Database name" type="text">
+      <button class="btn btn-primary" type="submit"><i class="icon icon-search"></i> Search</button>
+    </div>
+  </form>
+
+  <form class="navbar-form">
+    <div class="input-append">
+      <input name="search-query" placeholder="Database name" type="text">
+      <button class="btn btn-primary" type="submit">Search</button>
+    </div>
+  </form>
+
+  <form>
+    <fieldset>
+      <legend>Legend</legend>
+      <label>Label name</label>
+      <input type="text" placeholder="Type something…">
+      <span class="help-block">Example block-level help text here.</span>
+      <label class="checkbox">
+        <input type="checkbox"> Check me out
+      </label>
+      <button type="submit" class="btn">Submit</button>
+    </fieldset>
+  </form>
+
+  <p>Search</p>
+  <form class="form-search">
+    <input type="text" class="input-medium search-query">
+    <button type="submit" class="btn">Search</button>
+  </form>
+
+  <p>Sign in</p>
+  <form class="form-inline">
+    <input type="text" class="input-small" placeholder="Email">
+    <input type="password" class="input-small" placeholder="Password">
+    <label class="checkbox">
+      <input type="checkbox"> Remember me
+    </label>
+    <button type="submit" class="btn">Sign in</button>
+  </form>
+
+  <p>Whole form</p>
+  <form class="form-horizontal">
+  <div class="control-group">
+    <label class="control-label" for="inputEmail">Email</label>
+    <div class="controls">
+      <input type="text" id="inputEmail" placeholder="Email">
+    </div>
+  </div>
+  <div class="control-group">
+    <label class="control-label" for="inputPassword">Password</label>
+    <div class="controls">
+      <input type="password" id="inputPassword" placeholder="Password">
+    </div>
+  </div>
+  <div class="control-group">
+    <div class="controls">
+      <label class="checkbox">
+        <input type="checkbox"> Remember me
+      </label>
+      <button type="submit" class="btn">Sign in</button>
+    </div>
+  </div>
+  </form>
+
+  <p>Selects</p>
+  <select>
+    <option>1</option>
+    <option>2</option>
+    <option>3</option>
+    <option>4</option>
+    <option>5</option>
+  </select>
+   
+  <select multiple="multiple">
+    <option>1</option>
+    <option>2</option>
+    <option>3</option>
+    <option>4</option>
+    <option>5</option>
+  </select>
+
+  <p>Inputs with pre</p>
+  <div class="input-prepend">
+    <span class="add-on">@</span>
+    <input class="span2" id="prependedInput" type="text" placeholder="Username">
+  </div>
+  <p>Inputs with post</p>
+  <div class="input-append">
+    <input class="span2" id="appendedInput" type="text">
+    <span class="add-on">.00</span>
+  </div>
+  <p>Inputs with pre and post</p>
+  <div class="input-prepend input-append">
+    <span class="add-on">$</span>
+    <input class="span2" id="appendedPrependedInput" type="text">
+    <span class="add-on">.00</span>
+  </div>
+  <p>Inputs with button</p>
+<div class="input-append">
+  <input class="span2" id="appendedInputButton" type="text">
+  <button class="btn" type="button">Go!</button>
+</div>
+  <p>Inputs with two buttons</p>
+<div class="input-append">
+  <input class="span2" id="appendedInputButtons" type="text">
+  <button class="btn" type="button">Search</button>
+  <button class="btn" type="button">Options</button>
+</div>
+<p>Inputs with dropdown button</p>
+<div class="input-append">
+  <input class="span2" id="appendedDropdownButton" type="text">
+  <div class="btn-group">
+    <button class="btn dropdown-toggle" data-toggle="dropdown">
+      Action
+      <span class="caret"></span>
+    </button>
+    <ul class="dropdown-menu">
+      ...
+    </ul>
+  </div>
+</div>
+<p>Inputs sizes</p>
+<input class="input-mini" type="text" placeholder=".input-mini">
+<input class="input-small" type="text" placeholder=".input-small">
+<input class="input-medium" type="text" placeholder=".input-medium">
+<input class="input-large" type="text" placeholder=".input-large">
+<input class="input-xlarge" type="text" placeholder=".input-xlarge">
+<input class="input-xxlarge" type="text" placeholder=".input-xxlarge">
+
+
+  <div class="page-header">
+    <h1>Thumbnails</h1>
+  </div>
+<img src="https://dl.dropboxusercontent.com/u/44146427/ripley.jpeg" class="img-rounded">
+<img src="https://dl.dropboxusercontent.com/u/44146427/ripley.jpeg" class="img-circle">
+<img src="https://dl.dropboxusercontent.com/u/44146427/ripley.jpeg" class="img-polaroid">
+
+
+  <div class="page-header">
+    <h1>Dropdown menus</h1>
+  </div>
+  <div class="dropdown theme-dropdown clearfix">
+    <a id="dropdownMenu1" href="#" role="button" class="sr-only dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
+      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
+      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
+      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
+      <li role="presentation" class="divider"></li>
+      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
+    </ul>
+  </div>
+
+
+
+
+  <div class="page-header">
+    <h1>Navbars</h1>
+  </div>
+
+  <div class="navbar navbar-default">
+    <div class="container">
+      <div class="navbar-header">
+        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+        </button>
+        <a class="navbar-brand" href="#">Project name</a>
+      </div>
+      <div class="navbar-collapse collapse">
+        <ul class="nav navbar-nav">
+          <li class="active"><a href="#">Home</a></li>
+          <li><a href="#about">About</a></li>
+          <li><a href="#contact">Contact</a></li>
+        </ul>
+        <ul class="nav navbar-nav navbar-right">
+          <li><a href="../navbar/">Default</a></li>
+          <li><a href="../navbar-static-top/">Static top</a></li>
+          <li class="active"><a href="./">Fixed top</a></li>
+        </ul>
+      </div><!--/.nav-collapse -->
+    </div>
+  </div>
+
+  <div class="navbar navbar-inverse">
+    <div class="container">
+      <div class="navbar-header">
+        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+        </button>
+        <a class="navbar-brand" href="#">Project name</a>
+      </div>
+      <div class="navbar-collapse collapse">
+        <ul class="nav navbar-nav">
+          <li class="active"><a href="#">Home</a></li>
+          <li><a href="#about">About</a></li>
+          <li><a href="#contact">Contact</a></li>
+        </ul>
+        <ul class="nav navbar-nav navbar-right">
+          <li><a href="../navbar/">Default</a></li>
+          <li><a href="../navbar-static-top/">Static top</a></li>
+          <li class="active"><a href="./">Fixed top</a></li>
+        </ul>
+      </div><!--/.nav-collapse -->
+    </div>
+  </div>
+
+
+
+  <div class="page-header">
+    <h1>Alerts</h1>
+  </div>
+  <div class="alert alert-success">
+    <strong>Well done!</strong> You successfully read this important alert message.
+  </div>
+  <div class="alert alert-info">
+    <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
+  </div>
+  <div class="alert alert-warning">
+    <strong>Warning!</strong> Best check yo self, you're not looking too good.
+  </div>
+  <div class="alert alert-danger">
+    <strong>Oh snap!</strong> Change a few things up and try submitting again.
+  </div>
+
+
+
+  <div class="page-header">
+    <h1>Progresss</h1>
+  </div>
+  <div class="progress">
+    <div class="bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"><span class="sr-only">60% Complete</span></div>
+  </div>
+  <div class="progress">
+    <div class="bar bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"><span class="sr-only">40% Complete (success)</span></div>
+  </div>
+  <div class="progress">
+    <div class="bar bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"><span class="sr-only">20% Complete</span></div>
+  </div>
+  <div class="progress">
+    <div class="bar bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"><span class="sr-only">60% Complete (warning)</span></div>
+  </div>
+  <div class="progress">
+    <div class="bar bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"><span class="sr-only">80% Complete (danger)</span></div>
+  </div>
+  <div class="progress">
+    <div class="bar bar-success" style="width: 35%"><span class="sr-only">35% Complete (success)</span></div>
+    <div class="bar bar-warning" style="width: 20%"><span class="sr-only">20% Complete (warning)</span></div>
+    <div class="bar bar-danger" style="width: 10%"><span class='sr-only'>10% Complete (danger)</span></div>
+  </div>
+
+
+
+  <div class="page-header">
+    <h1>List groups</h1>
+  </div>
+  <div class="row">
+    <div class="col-sm-4">
+      <ul class="nav nav-tabs nav-stacked">
+        <li class="list-group-item">Cras justo odio</li>
+        <li class="list-group-item">Dapibus ac facilisis in</li>
+        <li class="list-group-item">Morbi leo risus</li>
+        <li class="list-group-item">Porta ac consectetur ac</li>
+        <li class="list-group-item">Vestibulum at eros</li>
+      </ul>
+    </div><!-- /.col-sm-4 -->
+    <div class="col-sm-4">
+      <div class="nav nav-tabs nav-stacked">
+        <a href="#" class="list-group-item active">
+          Cras justo odio
+        </a>
+        <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
+        <a href="#" class="list-group-item">Morbi leo risus</a>
+        <a href="#" class="list-group-item">Porta ac consectetur ac</a>
+        <a href="#" class="list-group-item">Vestibulum at eros</a>
+      </div>
+    </div><!-- /.col-sm-4 -->
+    <div class="col-sm-4">
+      <div class="nav nav-tabs nav-stacked">
+        <a href="#" class="list-group-item active">
+          <h4 class="list-group-item-heading">List group item heading</h4>
+          <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
+        </a>
+        <a href="#" class="list-group-item">
+          <h4 class="list-group-item-heading">List group item heading</h4>
+          <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
+        </a>
+        <a href="#" class="list-group-item">
+          <h4 class="list-group-item-heading">List group item heading</h4>
+          <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
+        </a>
+      </div>
+    </div><!-- /.col-sm-4 -->
+  </div>
+
+  <div class="page-header">
+    <h1>Wells</h1>
+  </div>
+  <div class="well">
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p>
+  </div>
+
+
+</div> <!-- /container -->

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/247b61cd/app/addons/styletests/views.js
----------------------------------------------------------------------
diff --git a/app/addons/styletests/views.js b/app/addons/styletests/views.js
new file mode 100644
index 0000000..f3e8bbb
--- /dev/null
+++ b/app/addons/styletests/views.js
@@ -0,0 +1,29 @@
+// Licensed under the Apache License, Version 2.0 (the "License"); you may not
+// use this file except in compliance with the License. You may obtain a copy of
+// the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+// License for the specific language governing permissions and limitations under
+// the License.
+
+define([
+  "app",
+  "api"
+],
+
+
+function (app, FauxtonAPI) {
+  var Views= {};
+
+  Views.tests = FauxtonAPI.View.extend({
+    template: "addons/styletests/templates/theme"
+  });
+
+  return Views;
+});
+
+

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/247b61cd/app/addons/verifyinstall/routes.js
----------------------------------------------------------------------
diff --git a/app/addons/verifyinstall/routes.js b/app/addons/verifyinstall/routes.js
index e5024ba..df00736 100644
--- a/app/addons/verifyinstall/routes.js
+++ b/app/addons/verifyinstall/routes.js
@@ -29,7 +29,7 @@ function(app, FauxtonAPI, VerifyInstall) {
       this.setView('#dashboard-content', new VerifyInstall.Main({}));
     },
 
-    crumbs: [{name: 'Verify Couchdb Installation', link: '#'}]
+    crumbs: [{name: 'Verify CouchDB Installation', link: '#'}]
   });
 
   VerifyInstall.RouteObjects = [VerifyRouteObject];

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/247b61cd/app/addons/verifyinstall/views.js
----------------------------------------------------------------------
diff --git a/app/addons/verifyinstall/views.js b/app/addons/verifyinstall/views.js
index eb6dac4..1e7e6f5 100644
--- a/app/addons/verifyinstall/views.js
+++ b/app/addons/verifyinstall/views.js
@@ -43,7 +43,7 @@ function(app, FauxtonAPI, VerifyInstall) {
 
     complete: function () {
       FauxtonAPI.addNotification({
-        msg: 'Success! You Couchdb install is working. Time to Relax',
+        msg: 'Success! You CouchDB install is working. Time to Relax',
         type: 'success',
         selector: '#error'
       });

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/247b61cd/app/templates/fauxton/api_bar.html
----------------------------------------------------------------------
diff --git a/app/templates/fauxton/api_bar.html b/app/templates/fauxton/api_bar.html
index 1f03a2c..4fb5971 100644
--- a/app/templates/fauxton/api_bar.html
+++ b/app/templates/fauxton/api_bar.html
@@ -12,9 +12,9 @@ License for the specific language governing permissions and limitations under
 the License.
 -->
 
-<button class="button api-url-btn">
+<button class="btn btn-primary pull-right api-url-btn">
   API URL 
-  <span class="fonticon-plus icon"></span>
+  <i class="fonticon-plus icon"></i>
 </button>
 <div class="api-navbar" style="display: none">
     <div class="input-prepend input-append">

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/247b61cd/app/templates/fauxton/breadcrumbs.html
----------------------------------------------------------------------
diff --git a/app/templates/fauxton/breadcrumbs.html b/app/templates/fauxton/breadcrumbs.html
index 026db89..34c4136 100644
--- a/app/templates/fauxton/breadcrumbs.html
+++ b/app/templates/fauxton/breadcrumbs.html
@@ -16,7 +16,7 @@ the License.
   <% _.each(_.initial(crumbs), function(crumb) { %>
     <li>
       <a href="#<%= crumb.link %>"><%= crumb.name %></a>
-      <span class="divider fonticon fonticon-carrot"> </span>
+      <i class="divider fonticon fonticon-carrot"> </i>
     </li>
   <% }); %>
   <% var last = _.last(crumbs) || {name: ''} %>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/247b61cd/app/templates/fauxton/nav_bar.html
----------------------------------------------------------------------
diff --git a/app/templates/fauxton/nav_bar.html b/app/templates/fauxton/nav_bar.html
index da030d6..9ba24f4 100644
--- a/app/templates/fauxton/nav_bar.html
+++ b/app/templates/fauxton/nav_bar.html
@@ -27,7 +27,7 @@ the License.
     <% if (link.view) {return;}  %>
         <li data-nav-name= "<%= link.title %>" >
           <a href="<%= link.href %>">
-            <span class="<%= link.icon %> fonticon"></span>
+            <i class="<%= link.icon %> fonticon"></i>
             <%= link.title %>
           </a>
         </li>
@@ -39,7 +39,7 @@ the License.
     <ul id="bottom-nav-links" class="nav">
         <li data-nav-name= "Documentation">
             <a href="<%=getDocUrl('docs')%>" target="_blank">
-              <span class="fonticon-bookmark fonticon"></span>
+              <i class="fonticon-bookmark fonticon"></i>
                 Documentation
             </a>
         </li>
@@ -49,7 +49,7 @@ the License.
       <% if (link.view) {return;}  %>
         <li data-nav-name= "<%= link.title %>">
             <a href="<%= link.href %>">
-              <span class="<%= link.icon %> fonticon"></span>
+              <i class="<%= link.icon %> fonticon"></i>
               <%= link.title %>
             </a>
         </li>
@@ -61,7 +61,7 @@ the License.
       <% if (link.view) {return;}  %>
         <li data-nav-name= "<%= link.title %>">
             <a href="<%= link.href %>">
-              <span class="<%= link.icon %> fonticon"></span>
+              <i class="<%= link.icon %> fonticon"></i>
               <%= link.title %>
             </a>
         </li>

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/247b61cd/assets/less/fauxton.less
----------------------------------------------------------------------
diff --git a/assets/less/fauxton.less b/assets/less/fauxton.less
index e1cfa06..ec3ff55 100644
--- a/assets/less/fauxton.less
+++ b/assets/less/fauxton.less
@@ -65,7 +65,7 @@ body {
   /* OVERRIDE BOOTSTRAP BTN STYLES */
   .btn{
     .box-shadow(none);
-    .border-radius(0);
+    .border-radius(@baseBorderRadius);
     background-image: none;
     text-shadow: none;
     background-repeat: no-repeat;
@@ -125,11 +125,19 @@ a:hover{
   }
 }
 
-/* bootstrap override */
+/* bootstrap overrides */
 .container-fluid {
   padding-right: 0px;
   padding-left: 0px;
 }
+.page-header {
+  border-bottom: 1px solid #E3E3E3;
+  margin-bottom: 10px;
+  h3 {
+    text-transform: capitalize;
+    margin-bottom: 0;
+  }
+}
 
 /* Fixed side navigation */
 #primary-navbar {
@@ -209,11 +217,11 @@ a:hover{
             }
             background-color: @red;
           }
-          &:hover a.fonticon:before{
+          &:hover .fonticon:before{
             color: @white;
           }
-          &.active a.fonticon:before,
-          &:hover a.fonticon:before,
+          &.active .fonticon:before,
+          &:hover .fonticon:before,
           {
             text-shadow: @boxShadow;
             color: @NavIconActive;
@@ -226,7 +234,7 @@ a:hover{
             &.closeMenu{
               color: transparent;
             }
-            & span.fonticon {
+            .fonticon {
               position: relative;
               &:before {
                 position: absolute;
@@ -459,6 +467,11 @@ footer#mainFooter{
         padding: 10px 5px 10px 15px;
         color: #333333;
         border-bottom: 1px solid #989898;
+        .divider {
+          background: none;
+          color: #ccc;
+          padding: 0 2px;
+        }
       }
       .nav-header{
         background-color: #B2B2B2;
@@ -499,14 +512,6 @@ footer#mainFooter{
   margin-bottom: 10px;
 }
 
-.navbar-form.pull-right.database-search {
-  margin: -10px 50px 12px 0;
-  padding: 11px;
-    input[type=text]{
-      margin-top: 0px;
-    }
-}
-
 #db-views-tabs-nav{
   position: fixed;
   z-index: 12;
@@ -600,84 +605,27 @@ tbody {padding-top: 10px;}
 }
 
 .btn {
-  padding-top: 12px;
-  padding-bottom: 12px;
-  margin-top: 0px;
-}
-
-.button{
-  .button-style;
-  .transition(all @transitionSpeed @transitionEaseType);
-  border: none;
-  background-color: @redButton;
-  color: #fff;
   padding: 10px;
+  margin-top: 0px;
   .icon {
-    margin-right: 10px;
-    font-size: 20px;
-  }
-  &:hover {
-    color: #fff;
-    text-decoration: none;
-  }
-}
-
-
-.button-style{
-  background-color: @redButton;
-  color: #fff;
-  padding: 10px 15px;
-  cursor: pointer;
-  &:before{
-    padding-right: 5px;
+    margin-right: 0.2em;
   }
-  &.outlineGray{
-    border: 1px solid @grayLight;
-    background-color: transparent;
-    color: @grayDark;
-    &:hover{
-      border: 1px solid @orange;
+  &.btn-small {
+    padding: 5px 10px;
+    .icon {
+      margin-right: 0;
+      font-size: inherit;
     }
   }
-  &.gray{
-    background-color: #ddd;
-    color: @grayDark;
-  }
-  &.green{
-    background-color: @green;
-  }
-
-  &.round-btn {
-    .border-radius(@radius);
-  }
-  .icon {
-    margin-right: 10px;
-    font-size: 20px;
-  }
-  &:hover {
-    color: #fff;
-    text-decoration: none;
-    background-color: @orange;
-  }
-  a&,
-  a&:visited,
-  a&:active{
-    color: #fff;
-  }
-  &:disabled {
-    opacity: 0.5;
+  &.btn-mini {
+    padding: 3px 8px;
+    .icon {
+      margin-right: 0;
+      font-size: inherit;
+    }
   }
 }
 
-
-
-
-a.button, 
-a.button:visited, 
-a.button:active {
-  .button-style;
-}
-
 .select{
   > a{
     display: block;
@@ -883,15 +831,12 @@ form.view-query-update, form.view-query-save {
     font-size: 18px;
     padding: 14px 5px 30px;
   }
+  .btn .icon{
+    font-size: 21.5px;
+    margin-right: 0;
+  }
 }
 
-.input-append .btn:last-child, 
-.input-append .btn-group:last-child > .dropdown-toggle {
-  padding: 10px 5px 14px;
-}
-.input-append .btn{
-  padding: 10px 5px 14px;
-}
 .row-fluid .input-append [class*="span"],
 .input-prepend input[class*="span"]{
   width: auto;
@@ -936,6 +881,10 @@ div.spinner {
   border: solid 1px #ddd;
 }
 
+.btn-primary {
+  background: @redButton;
+}
+
 .btn-primary a:visited {
   color: #fff;
 }
@@ -944,11 +893,11 @@ div.spinner {
   position: relative;
 }
 
-.button.api-url-btn {
+.api-url-btn {
   position: absolute;
   right: 15px;
   top: -50px;
-  span.icon {
+  .icon {
     font-size: 11px;
   }
 }
@@ -975,17 +924,6 @@ div.spinner {
   }
 }
 
-#jump-to-doc,
-#jump-to-db
- {
-  width: auto;
-  float:right;
-  button{
-    padding-left: 20px;
-    padding-right: 10px;
-  }
-}
-
 #map-function, #reduce-function{
     width: 100%;
     font-size: 16px;
@@ -996,7 +934,3 @@ div.spinner {
     height: 688px;
     font-size: 16px;
 }
-
-#delete-database {
-  float: right;
-}

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/247b61cd/assets/less/variables.less
----------------------------------------------------------------------
diff --git a/assets/less/variables.less b/assets/less/variables.less
index bf97b5d..34f8b90 100644
--- a/assets/less/variables.less
+++ b/assets/less/variables.less
@@ -18,6 +18,7 @@
 @darkRed: #AF2D24;
 @linkRed: #DA4F49;
 @greyBrown: #554D4C;
+@greyBrownLighter: #A59D9D;
 @fontGrey: #808080;
 @secondarySidebar: #E4DFDC;
 
@@ -77,6 +78,7 @@
 @textShadowOff: 1px 2px rgba(0,0,0,0);
 
 @radius: 4px;
+@baseBorderRadius: 0;
 @transitionSpeed: .25s;
 @transitionEaseType: linear;
 

http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/247b61cd/readme.md
----------------------------------------------------------------------
diff --git a/readme.md b/readme.md
index a0c7702..bb81095 100644
--- a/readme.md
+++ b/readme.md
@@ -21,7 +21,7 @@ A recent of [node.js](http://nodejs.org/) and npm is required.
 
 ### CouchDB Setup ###
 
-    1. Clone the Couchdb repo: https://github.com/apache/couchdb.git or http://git-wip-us.apache.org/repos/asf/couchdb.git
+    1. Clone the CouchDB repo: https://github.com/apache/couchdb.git or http://git-wip-us.apache.org/repos/asf/couchdb.git
     cd couchdb
 
 ### Fauxton Setup ###
@@ -32,7 +32,11 @@ A recent of [node.js](http://nodejs.org/) and npm is required.
     npm install
 
 ### Dev Server
-    Using the dev server is the easiest way to use fauxton, specially when developing for it.
+Using the dev server is the easiest way to use fauxton, specially when
+developing for it. Copy or symlink the `settings.json.default` (or the
+`settings.json.dev` file if you'd like to see the `styletests` addon).
+
+And then...
 
     grunt dev
 
@@ -63,7 +67,7 @@ A recent of [node.js](http://nodejs.org/) and npm is required.
 
 ### To Deploy Fauxton
 
-    ./bin/grunt couchapp_deploy - to deploy to your local [Couchdb instance] (http://localhost:5984/fauxton/_design/fauxton/index.html)
+    ./bin/grunt couchapp_deploy - to deploy to your local [CouchDB instance] (http://localhost:5984/fauxton/_design/fauxton/index.html)
 
 ## Understang Fauxton Code layout