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

author: BigBlueHat <byoung@bigbluehat.com> 2014-01-30 13:32:45 -0500
committer: suelockwood <deathbear@apache.org> 2014-01-31 15:33:47 -0500
commit: 6ea2b081bccb77acd04b59dc392be74c26714f82 (patch)
tree: 4b22f14791b96b568b2628ea35960d794afb6d84
parent: be3bd20b2fd665d42bb49c66be52eb693f7f5109 (diff)
download: couchdb-6ea2b081bccb77acd04b59dc392be74c26714f82.tar.gz
44 files changed, 1055 insertions, 637 deletions
diff --git a/.gitignore b/.gitignore
index 784444df9..5e4d22006 100644
--- a/.gitignore
+++ b/.gitignore
@@ -107,8 +107,10 @@ src/fauxton/app/addons/*
 !src/fauxton/app/addons/pouchdb
 !src/fauxton/app/addons/databases
 !src/fauxton/app/addons/documents
+!src/fauxton/app/addons/styletests
 src/fauxton/settings.json*
 !src/fauxton/settings.json.default
+!src/fauxton/settings.json.dev
 src/ibrowse/ibrowse.app
 src/ibrowse/ibrowse.app
 src/mochiweb/mochiweb.app
diff --git a/src/Makefile.am b/src/Makefile.am
index 17c3623e2..e7efd4cfc 100644
--- a/src/Makefile.am
+++ b/src/Makefile.am
@@ -49,7 +49,6 @@ FAUXTON_FILES = \
     fauxton/app/addons/activetasks/templates/tabs.html \
     fauxton/app/addons/activetasks/tests/viewsSpec.js \
     fauxton/app/addons/activetasks/views.js \
-    fauxton/app/addons/auth/assets/less/auth.less \
     fauxton/app/addons/auth/base.js \
     fauxton/app/addons/auth/resources.js \
     fauxton/app/addons/auth/routes.js \
@@ -112,6 +111,11 @@ FAUXTON_FILES = \
     fauxton/app/addons/stats/templates/stats.html \
     fauxton/app/addons/stats/templates/statselect.html \
     fauxton/app/addons/stats/views.js \
+    fauxton/app/addons/styletests/base.js \
+    fauxton/app/addons/styletests/resources.js \
+    fauxton/app/addons/styletests/routes.js \
+    fauxton/app/addons/styletests/views.js \
+    fauxton/app/addons/styletests/templates/theme.html \
     fauxton/app/addons/verifyinstall/views.js \
     fauxton/app/addons/verifyinstall/resources.js \
     fauxton/app/addons/verifyinstall/base.js \
diff --git a/src/fauxton/app/addons/activetasks/assets/less/activetasks.less b/src/fauxton/app/addons/activetasks/assets/less/activetasks.less
index 743917d2e..b06f5502f 100644
--- a/src/fauxton/app/addons/activetasks/assets/less/activetasks.less
+++ b/src/fauxton/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;
-}
diff --git a/src/fauxton/app/addons/auth/resources.js b/src/fauxton/app/addons/auth/resources.js
index 321d3026d..0c9b1f5df 100644
--- a/src/fauxton/app/addons/auth/resources.js
+++ b/src/fauxton/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);
     },
diff --git a/src/fauxton/app/addons/compaction/views.js b/src/fauxton/app/addons/compaction/views.js
index f5469cf8c..a68daef7c 100644
--- a/src/fauxton/app/addons/compaction/views.js
+++ b/src/fauxton/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 () {
diff --git a/src/fauxton/app/addons/config/assets/less/config.less b/src/fauxton/app/addons/config/assets/less/config.less
index 737beb422..88bbc6641 100644
--- a/src/fauxton/app/addons/config/assets/less/config.less
+++ b/src/fauxton/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%;
 }
diff --git a/src/fauxton/app/addons/config/templates/dashboard.html b/src/fauxton/app/addons/config/templates/dashboard.html
index ffbeb3712..b7dbc55f4 100644
--- a/src/fauxton/app/addons/config/templates/dashboard.html
+++ b/src/fauxton/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>
diff --git a/src/fauxton/app/addons/config/templates/item.html b/src/fauxton/app/addons/config/templates/item.html
index 1c808b943..502c9b35a 100644
--- a/src/fauxton/app/addons/config/templates/item.html
+++ b/src/fauxton/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>
diff --git a/src/fauxton/app/addons/databases/assets/less/databases.less b/src/fauxton/app/addons/databases/assets/less/databases.less
index 3d86d8192..7b7cf6a5a 100644
--- a/src/fauxton/app/addons/databases/assets/less/databases.less
+++ b/src/fauxton/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;
-    }
-}
diff --git a/src/fauxton/app/addons/databases/templates/list.html b/src/fauxton/app/addons/databases/templates/list.html
index 31c097796..1503c32cc 100644
--- a/src/fauxton/app/addons/databases/templates/list.html
+++ b/src/fauxton/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>
 
 
diff --git a/src/fauxton/app/addons/databases/templates/newdatabase.html b/src/fauxton/app/addons/databases/templates/newdatabase.html
index b357e0b15..1376ad57b 100644
--- a/src/fauxton/app/addons/databases/templates/newdatabase.html
+++ b/src/fauxton/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>
 
diff --git a/src/fauxton/app/addons/documents/assets/less/documents.less b/src/fauxton/app/addons/documents/assets/less/documents.less
index 68fc58daa..6f462ef75 100644
--- a/src/fauxton/app/addons/documents/assets/less/documents.less
+++ b/src/fauxton/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%;
+  }
+}
diff --git a/src/fauxton/app/addons/documents/templates/advanced_options.html b/src/fauxton/app/addons/documents/templates/advanced_options.html
index e2563253f..bea256a93 100644
--- a/src/fauxton/app/addons/documents/templates/advanced_options.html
+++ b/src/fauxton/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>
diff --git a/src/fauxton/app/addons/documents/templates/all_docs_layout.html b/src/fauxton/app/addons/documents/templates/all_docs_layout.html
index 6b4a31bc4..2862e169c 100644
--- a/src/fauxton/app/addons/documents/templates/all_docs_layout.html
+++ b/src/fauxton/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">
diff --git a/src/fauxton/app/addons/documents/templates/all_docs_list.html b/src/fauxton/app/addons/documents/templates/all_docs_list.html
index 335b040b8..cdec81e32 100644
--- a/src/fauxton/app/addons/documents/templates/all_docs_list.html
+++ b/src/fauxton/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>
   <% } %>
diff --git a/src/fauxton/app/addons/documents/templates/doc.html b/src/fauxton/app/addons/documents/templates/doc.html
index 10bbf8b88..5ef70fe15 100644
--- a/src/fauxton/app/addons/documents/templates/doc.html
+++ b/src/fauxton/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>
diff --git a/src/fauxton/app/addons/documents/templates/doc_field_editor.html b/src/fauxton/app/addons/documents/templates/doc_field_editor.html
index 77d92781c..3ad94848c 100644
--- a/src/fauxton/app/addons/documents/templates/doc_field_editor.html
+++ b/src/fauxton/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>
 
diff --git a/src/fauxton/app/addons/documents/templates/duplicate_doc_modal.html b/src/fauxton/app/addons/documents/templates/duplicate_doc_modal.html
index dbb25bc07..76163005d 100644
--- a/src/fauxton/app/addons/documents/templates/duplicate_doc_modal.html
+++ b/src/fauxton/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>
 
diff --git a/src/fauxton/app/addons/documents/templates/jumpdoc.html b/src/fauxton/app/addons/documents/templates/jumpdoc.html
index 43fdb9c3a..1ad3de901 100644
--- a/src/fauxton/app/addons/documents/templates/jumpdoc.html
+++ b/src/fauxton/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>
diff --git a/src/fauxton/app/addons/documents/templates/sidebar.html b/src/fauxton/app/addons/documents/templates/sidebar.html
index c8ce511c2..73589604e 100644
--- a/src/fauxton/app/addons/documents/templates/sidebar.html
+++ b/src/fauxton/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>
 
diff --git a/src/fauxton/app/addons/documents/templates/upload_modal.html b/src/fauxton/app/addons/documents/templates/upload_modal.html
index 9a5c5cd82..b71cd1eab 100644
--- a/src/fauxton/app/addons/documents/templates/upload_modal.html
+++ b/src/fauxton/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>
 
diff --git a/src/fauxton/app/addons/documents/templates/view_editor.html b/src/fauxton/app/addons/documents/templates/view_editor.html
index d02971e38..be6009065 100644
--- a/src/fauxton/app/addons/documents/templates/view_editor.html
+++ b/src/fauxton/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>
diff --git a/src/fauxton/app/addons/documents/views.js b/src/fauxton/app/addons/documents/views.js
index 8ddf46f04..298cfb4d7 100644
--- a/src/fauxton/app/addons/documents/views.js
+++ b/src/fauxton/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) {
diff --git a/src/fauxton/app/addons/fauxton/templates/api_bar.html b/src/fauxton/app/addons/fauxton/templates/api_bar.html
index 1f03a2c08..4fb597172 100644
--- a/src/fauxton/app/addons/fauxton/templates/api_bar.html
+++ b/src/fauxton/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">
diff --git a/src/fauxton/app/addons/fauxton/templates/nav_bar.html b/src/fauxton/app/addons/fauxton/templates/nav_bar.html
index da030d6f7..9ba24f4ab 100644
--- a/src/fauxton/app/addons/fauxton/templates/nav_bar.html
+++ b/src/fauxton/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>
diff --git a/src/fauxton/app/addons/permissions/assets/less/permissions.less b/src/fauxton/app/addons/permissions/assets/less/permissions.less
index 7ce4d10b9..83f270c20 100644
--- a/src/fauxton/app/addons/permissions/assets/less/permissions.less
+++ b/src/fauxton/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;
     }
   }
 }
diff --git a/src/fauxton/app/addons/permissions/templates/item.html b/src/fauxton/app/addons/permissions/templates/item.html
index 616ffd61d..490cff481 100644
--- a/src/fauxton/app/addons/permissions/templates/item.html
+++ b/src/fauxton/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>
 
diff --git a/src/fauxton/app/addons/permissions/templates/section.html b/src/fauxton/app/addons/permissions/templates/section.html
index 33603088b..8f4d55200 100644
--- a/src/fauxton/app/addons/permissions/templates/section.html
+++ b/src/fauxton/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>
diff --git a/src/fauxton/app/addons/replication/assets/less/replication.less b/src/fauxton/app/addons/replication/assets/less/replication.less
index a30196654..0f8a8f505 100644
--- a/src/fauxton/app/addons/replication/assets/less/replication.less
+++ b/src/fauxton/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;
+    }
+  }
 }
diff --git a/src/fauxton/app/addons/stats/assets/less/stats.less b/src/fauxton/app/addons/stats/assets/less/stats.less
index cfa7679dd..7ec88b95b 100644
--- a/src/fauxton/app/addons/stats/assets/less/stats.less
+++ b/src/fauxton/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;
 }
diff --git a/src/fauxton/app/addons/styletests/base.js b/src/fauxton/app/addons/styletests/base.js
new file mode 100644
index 000000000..fae6d11de
--- /dev/null
+++ b/src/fauxton/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;
+});
diff --git a/src/fauxton/app/addons/auth/assets/less/auth.less b/src/fauxton/app/addons/styletests/resources.js
index 598da1047..0309d8e76 100644
--- a/src/fauxton/app/addons/auth/assets/less/auth.less
+++ b/src/fauxton/app/addons/styletests/resources.js
@@ -10,6 +10,13 @@
 // License for the specific language governing permissions and limitations under
 // the License.
 
-.menuDropdown {
-  display: none;
-}
+define([
+  "app",
+  "api"
+],
+
+function (app, FauxtonAPI) {
+  var resources = {};
+
+  return resources;
+});
diff --git a/src/fauxton/app/addons/styletests/routes.js b/src/fauxton/app/addons/styletests/routes.js
new file mode 100644
index 000000000..cafd9f235
--- /dev/null
+++ b/src/fauxton/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;
+ 
+});
diff --git a/src/fauxton/app/addons/styletests/templates/theme.html b/src/fauxton/app/addons/styletests/templates/theme.html
new file mode 100644
index 000000000..f05bad182
--- /dev/null
+++ b/src/fauxton/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 -->
diff --git a/src/fauxton/app/addons/styletests/views.js b/src/fauxton/app/addons/styletests/views.js
new file mode 100644
index 000000000..f3e8bbb9b
--- /dev/null
+++ b/src/fauxton/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;
+});
+
+
diff --git a/src/fauxton/app/addons/verifyinstall/routes.js b/src/fauxton/app/addons/verifyinstall/routes.js
index e5024ba87..df0073653 100644
--- a/src/fauxton/app/addons/verifyinstall/routes.js
+++ b/src/fauxton/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];
diff --git a/src/fauxton/app/addons/verifyinstall/views.js b/src/fauxton/app/addons/verifyinstall/views.js
index eb6dac41a..1e7e6f5f1 100644
--- a/src/fauxton/app/addons/verifyinstall/views.js
+++ b/src/fauxton/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'
       });
diff --git a/src/fauxton/app/templates/fauxton/api_bar.html b/src/fauxton/app/templates/fauxton/api_bar.html
index 1f03a2c08..4fb597172 100644
--- a/src/fauxton/app/templates/fauxton/api_bar.html
+++ b/src/fauxton/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">
diff --git a/src/fauxton/app/templates/fauxton/breadcrumbs.html b/src/fauxton/app/templates/fauxton/breadcrumbs.html
index 026db89fb..34c413613 100644
--- a/src/fauxton/app/templates/fauxton/breadcrumbs.html
+++ b/src/fauxton/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: ''} %>
diff --git a/src/fauxton/app/templates/fauxton/nav_bar.html b/src/fauxton/app/templates/fauxton/nav_bar.html
index da030d6f7..9ba24f4ab 100644
--- a/src/fauxton/app/templates/fauxton/nav_bar.html
+++ b/src/fauxton/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>
diff --git a/src/fauxton/assets/less/fauxton.less b/src/fauxton/assets/less/fauxton.less
index e1cfa06d9..ec3ff5592 100644
--- a/src/fauxton/assets/less/fauxton.less
+++ b/src/fauxton/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;
-}
diff --git a/src/fauxton/assets/less/variables.less b/src/fauxton/assets/less/variables.less
index bf97b5d7f..34f8b9054 100644
--- a/src/fauxton/assets/less/variables.less
+++ b/src/fauxton/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;
 
diff --git a/src/fauxton/readme.md b/src/fauxton/readme.md
index a0c7702e8..bb810956e 100644
--- a/src/fauxton/readme.md
+++ b/src/fauxton/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
 
diff --git a/src/fauxton/settings.json.dev b/src/fauxton/settings.json.dev
new file mode 100644
index 000000000..e2df66ba8
--- /dev/null
+++ b/src/fauxton/settings.json.dev
@@ -0,0 +1,59 @@
+{
+  "deps": [
+  { "name": "databases" },
+  { "name": "documents" },
+  { "name": "pouchdb" },
+  { "name": "activetasks" },
+  { "name": "config" },
+  { "name": "logs" },
+  { "name": "stats" },
+  { "name": "replication" },
+  { "name": "plugins" },
+  { "name": "contribute" },
+  { "name": "permissions" },
+  { "name": "compaction" },
+  { "name": "auth" },
+  { "name": "verifyinstall" },
+  { "name": "styletests" }
+  ],
+    "template": {
+      "development": {
+        "src": "assets/index.underscore",
+        "dest": "dist/debug/index.html",
+        "variables": {
+          "requirejs": "/assets/js/libs/require.js",
+          "css": "./css/index.css",
+          "base": null
+        },
+        "app": {
+          "root": "/",
+          "host": "../..",
+          "version": "1.0.dev"
+        }
+      },
+      "release": {
+        "src": "assets/index.underscore",
+        "dest": "dist/debug/index.html",
+        "variables": {
+          "requirejs": "./js/require.js",
+          "css": "./css/index.css",
+          "base": null
+        },
+        "app": {
+          "root": "/_utils/fauxton/",
+          "host": "../..",
+          "version": "1.0"
+        }
+      }
+    },
+
+    "couch_config": {
+      "fauxton": {
+        "db": "http://localhost:5984/fauxton",
+        "app": "./couchapp.js",
+        "options": {
+          "okay_if_missing": true
+        }
+      }
+    }
+}
author	BigBlueHat <byoung@bigbluehat.com>	2014-01-30 13:32:45 -0500
committer	suelockwood <deathbear@apache.org>	2014-01-31 15:33:47 -0500
commit	6ea2b081bccb77acd04b59dc392be74c26714f82 (patch)
tree	4b22f14791b96b568b2628ea35960d794afb6d84
parent	be3bd20b2fd665d42bb49c66be52eb693f7f5109 (diff)
download	couchdb-6ea2b081bccb77acd04b59dc392be74c26714f82.tar.gz