diff --git a/components.html b/components.html
index e6ea6e2..643038f 100644
--- a/components.html
+++ b/components.html
@@ -994,7 +994,7 @@ document
 
       <div class="component-example component-example-fullbleed">
         <div class="slider" id="mySlider">
-          <div class="slides">
+          <div class="slide-group">
             <div class="slide">
               <img src="{{ page.base_url }}docs-assets/img/slide-1.jpg">
               <span class="slide-text">&larr; Slide me</span>
@@ -1011,7 +1011,7 @@ document
 
 {% highlight html %}
 <div class="slider" id="mySlider">
-  <div class="slides">
+  <div class="slide-group">
     <div class="slide">
       <img src="{{ page.base_url }}docs-assets/img/slide-1.jpg">
       <span class="slide-text">&larr; Slide me</span>
diff --git a/dist/ratchet.css b/dist/ratchet.css
index 2ac0159..2dfe40e 100644
--- a/dist/ratchet.css
+++ b/dist/ratchet.css
@@ -424,6 +424,75 @@ p {
   box-shadow: none;
 }
 
+.bar-nav .btn {
+  position: relative;
+  z-index: 10;
+  padding: 6px 12px;
+  margin-top: 8px;
+  font-weight: 400;
+}
+.bar-nav .btn.pull-right {
+  margin-left: 10px;
+}
+.bar-nav .btn.pull-left {
+  margin-right: 10px;
+}
+
+.bar-nav .btn-link {
+  padding: 0;
+  margin-top: 0;
+  font-size: 16px;
+  color: #428bca;
+  line-height: 44px;
+  border: none;
+  background-color: transparent;
+}
+.bar-nav .btn-link:active, .bar-nav .btn-link.active {
+  color: #3071a9;
+}
+.bar-nav .btn-link.pull-left {
+  margin-left: 5px;
+}
+.bar-nav .btn-link.pull-left .icon {
+  margin-right: -3px;
+  margin-left: -8px;
+}
+.bar-nav .btn-link.pull-right {
+  margin-right: 5px;
+}
+.bar-nav .btn-link.pull-right .icon {
+  margin-right: -8px;
+  margin-left: -3px;
+}
+
+.bar .btn-block {
+  padding: 7px 0 6px;
+  margin-top: 5px;
+  margin-bottom: 0;
+  font-size: 16px;
+}
+
+.bar input[type="search"] {
+  height: 29px;
+  margin: 6px 0;
+}
+
+.bar .segmented-control {
+  top: 8px;
+  margin: 0 auto;
+}
+
+.bar .icon {
+  font-size: 24px;
+  margin-top: 11px;
+}
+.bar .icon.pull-left {
+  margin-left: -3px;
+}
+.bar .icon.pull-right {
+  margin-right: -3px;
+}
+
 .card {
   width: auto;
   overflow: hidden;
@@ -438,6 +507,10 @@ p {
   color: inherit;
 }
 
+.card .table-view li:last-child {
+  border: 0;
+}
+
 .table-view {
   padding: 0;
   margin: 0;
@@ -499,20 +572,36 @@ p {
   z-index: 1;
 }
 
-.card .table-view li:last-child {
-  border: 0;
+.table-view .btn {
+  margin-top: -1px;
 }
 
-.popover .table-view {
-  width: auto;
-  max-height: 300px;
-  margin-right: 0;
-  margin-bottom: 0;
-  margin-left: 0;
-  overflow: auto;
-  background-color: #fff;
-  border-radius: 6px;
-  -webkit-overflow-scrolling: touch;
+.table-view .badge {
+  margin-top: 2px;
+}
+.table-view .badge.pull-left {
+  margin-right: 5px;
+}
+.table-view .badge.pull-right {
+  margin-left: 5px;
+}
+
+.table-view .toggle {
+  margin-top: -4px;
+}
+
+.table-view .icon {
+  margin-top: 3px;
+  font-size: inherit;
+}
+.table-view .icon.icon-left, .table-view .icon.icon-right {
+  color: #bbb;
+}
+.table-view .icon.pull-left {
+  margin-right: 5px;
+}
+.table-view .icon.pull-right {
+  margin-left: 5px;
 }
 
 input,
@@ -625,11 +714,6 @@ select {
   border: 0;
 }
 
-.bar input[type="search"] {
-  height: 29px;
-  margin: 6px 0;
-}
-
 .btn {
   position: relative;
   display: inline-block;
@@ -724,63 +808,33 @@ input[type="button"] {
   width: 100%;
 }
 
-.bar-nav .btn {
-  position: relative;
-  z-index: 10;
-  padding: 6px 12px;
-  margin-top: 8px;
-  font-weight: 400;
-}
-.bar-nav .btn.pull-right {
-  margin-left: 10px;
-}
-.bar-nav .btn.pull-left {
-  margin-right: 10px;
-}
-.bar-nav .btn.btn-link {
-  padding: 0;
-  margin-top: 0;
-  font-size: 16px;
-  color: #428bca;
-  line-height: 44px;
-  border: none;
-  background-color: transparent;
-}
-.bar-nav .btn.btn-link:active, .bar-nav .btn.btn-link.active {
-  color: #3071a9;
+.btn .badge {
+  font-size: 12px;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  margin: -2px -4px -2px 4px;
+  background-color: rgba(0, 0, 0, 0.15);
 }
 
-.bar .btn-block {
-  padding: 7px 0 6px;
-  margin-top: 5px;
-  margin-bottom: 0;
-  font-size: 16px;
+.btn .badge-inverted,
+.btn:active .badge-inverted {
+  background-color: transparent;
 }
 
-.popover .btn-block {
-  margin-bottom: 5px;
-}
-.popover .btn-block:last-child {
-  margin-bottom: 0;
+.btn-primary:active .badge-inverted,
+.btn-positive:active .badge-inverted,
+.btn-negative:active .badge-inverted {
+  color: #fff;
 }
 
-.bar-nav .btn-link.pull-left {
-  margin-left: 5px;
-}
-.bar-nav .btn-link.pull-left .icon {
-  margin-right: -3px;
-  margin-left: -8px;
-}
-.bar-nav .btn-link.pull-right {
-  margin-right: 5px;
-}
-.bar-nav .btn-link.pull-right .icon {
-  margin-right: -8px;
-  margin-left: -3px;
+.btn-block .badge {
+  position: absolute;
+  right: 0;
+  margin-right: 10px;
 }
 
-.table-view .btn {
-  margin-top: -1px;
+.btn .icon {
+  font-size: inherit;
 }
 
 .badge {
@@ -821,41 +875,6 @@ input[type="button"] {
   color: #d9534f;
 }
 
-.btn .badge {
-  font-size: 12px;
-  padding-top: 2px;
-  padding-bottom: 2px;
-  margin: -2px -4px -2px 4px;
-  background-color: rgba(0, 0, 0, 0.15);
-}
-
-.btn .badge-inverted,
-.btn:active .badge-inverted {
-  background-color: transparent;
-}
-
-.btn-primary:active .badge-inverted,
-.btn-positive:active .badge-inverted,
-.btn-negative:active .badge-inverted {
-  color: #fff;
-}
-
-.btn-block .badge {
-  position: absolute;
-  right: 0;
-  margin-right: 10px;
-}
-
-.table-view .badge {
-  margin-top: 2px;
-}
-.table-view .badge.pull-left {
-  margin-right: 5px;
-}
-.table-view .badge.pull-right {
-  margin-left: 5px;
-}
-
 .segmented-control {
   position: relative;
   display: table;
@@ -959,11 +978,6 @@ input[type="button"] {
   display: block;
 }
 
-.bar .segmented-control {
-  top: 8px;
-  margin: 0 auto;
-}
-
 .popover {
   position: fixed;
   top: 55px;
@@ -1010,6 +1024,25 @@ input[type="button"] {
   background-color: rgba(0, 0, 0, 0.15);
 }
 
+.popover .btn-block {
+  margin-bottom: 5px;
+}
+.popover .btn-block:last-child {
+  margin-bottom: 0;
+}
+
+.popover .table-view {
+  width: auto;
+  max-height: 300px;
+  margin-right: 0;
+  margin-bottom: 0;
+  margin-left: 0;
+  overflow: auto;
+  background-color: #fff;
+  border-radius: 6px;
+  -webkit-overflow-scrolling: touch;
+}
+
 .modal {
   position: fixed;
   top: 0;
@@ -1042,7 +1075,7 @@ input[type="button"] {
   overflow: hidden;
   background-color: #000;
 }
-.slider .slides {
+.slider .slide-group {
   position: relative;
   padding: 0;
   font-size: 0;
@@ -1050,13 +1083,13 @@ input[type="button"] {
   -webkit-transition: all 0 linear;
   transition: all 0 linear;
 }
-.slider .slides .slide {
+.slider .slide-group .slide {
   display: inline-block;
   vertical-align: top;
   width: 100%;
   height: 100%;
 }
-.slider .slides .slide > * {
+.slider .slide-group .slide > * {
   font-size: 14px;
 }
 
@@ -1116,10 +1149,6 @@ input[type="button"] {
   display: none;
 }
 
-.table-view .toggle {
-  margin-top: -4px;
-}
-
 .content.fade {
   left: 0;
   opacity: 0;
@@ -1238,32 +1267,3 @@ input[type="button"] {
 .icon-up:before {
   content: '\e802';
 }
-
-.btn .icon {
-  font-size: inherit;
-}
-
-.bar .icon {
-  font-size: 24px;
-  margin-top: 11px;
-}
-.bar .icon.pull-left {
-  margin-left: -3px;
-}
-.bar .icon.pull-right {
-  margin-right: -3px;
-}
-
-.table-view .icon {
-  margin-top: 3px;
-  font-size: inherit;
-}
-.table-view .icon.icon-left, .table-view .icon.icon-right {
-  color: #bbb;
-}
-.table-view .icon.pull-left {
-  margin-right: 5px;
-}
-.table-view .icon.pull-right {
-  margin-left: 5px;
-}
diff --git a/dist/ratchet.js b/dist/ratchet.js
index 65fa1be..3be794a 100644
--- a/dist/ratchet.js
+++ b/dist/ratchet.js
@@ -600,7 +600,7 @@
   var scrollableArea;
 
   var getSlider = function (target) {
-    var i, sliders = document.querySelectorAll('.slider > .slides');
+    var i, sliders = document.querySelectorAll('.slider > .slide-group');
     for (; target && target !== document; target = target.parentNode) {
       for (i = sliders.length; i--;) { if (sliders[i] === target) return target; }
     }
diff --git a/docs-assets/css/docs.css b/docs-assets/css/docs.css
index 69c1c8a..4ebf4b2 100644
--- a/docs-assets/css/docs.css
+++ b/docs-assets/css/docs.css
@@ -600,7 +600,7 @@ hr {
     display: block;
   }
 
-  .slider .slides .slide-text {
+  .slider .slide-group .slide-text {
     position: absolute;
     top: 45%;
     left: 0;
diff --git a/lib/js/sliders.js b/lib/js/sliders.js
index 7f8dfcd..b87931e 100644
--- a/lib/js/sliders.js
+++ b/lib/js/sliders.js
@@ -22,7 +22,7 @@
   var scrollableArea;
 
   var getSlider = function (target) {
-    var i, sliders = document.querySelectorAll('.slider > .slides');
+    var i, sliders = document.querySelectorAll('.slider > .slide-group');
     for (; target && target !== document; target = target.parentNode) {
       for (i = sliders.length; i--;) { if (sliders[i] === target) return target; }
     }
diff --git a/lib/sass/badges.scss b/lib/sass/badges.scss
index ac23dab..31f0a43 100644
--- a/lib/sass/badges.scss
+++ b/lib/sass/badges.scss
@@ -50,48 +50,3 @@
     color: $negative-color;
   }
 }
-
-
-// Badges in buttons
-// --------------------------------------------------
-
-// Generic styles for all badges within default buttons
-.btn .badge {
-  font-size: 12px;
-  padding-top: 2px;
-  padding-bottom: 2px;
-  margin: -2px -4px -2px 4px;
-  background-color: rgba(0,0,0,.15);
-}
-
-// Styles for filled badges within default buttons
-.btn .badge-inverted,
-.btn:active .badge-inverted {
-  background-color: transparent;
-}
-.btn-primary:active .badge-inverted,
-.btn-positive:active .badge-inverted,
-.btn-negative:active .badge-inverted {
-  color: #fff;
-}
-
-// Position badges within block level buttons
-// Note: These are absolutely positioned so that text of button isn't "pushed" by badge and always
-// stays at the center of button
-.btn-block .badge {
-  position: absolute;
-  right: 0;
-  margin-right: 10px;
-}
-
-// Badges in table-views
-.table-view .badge {
-  margin-top: 2px;
-
-  &.pull-left {
-    margin-right: 5px;
-  }
-  &.pull-right {
-    margin-left: 5px;
-  }
-}
diff --git a/lib/sass/bars.scss b/lib/sass/bars.scss
index 3781302..ff29916 100644
--- a/lib/sass/bars.scss
+++ b/lib/sass/bars.scss
@@ -132,3 +132,103 @@
   border-radius: 12px 12px 0 0;
   @include box-shadow(none);
 }
+
+
+// Nav bars with buttons
+// --------------------------------------------------
+
+.bar-nav .btn {
+  position: relative;
+  z-index: 10; // Position the buttons on top of .title
+  padding: 6px 12px;
+  margin-top: 8px;
+  font-weight: $font-weight-light;
+
+  &.pull-right { 
+    margin-left: $bar-side-spacing; 
+  }
+  &.pull-left { 
+    margin-right: $bar-side-spacing;
+  }
+}
+
+// Nav bars with link buttons (Line the text up with content)
+.bar-nav .btn-link {
+  padding: 0;
+  margin-top: 0;
+  font-size: 16px;
+  color: $primary-color;
+  line-height: $bar-base-height;
+  border: none;
+  background-color: transparent;
+
+  &:active,
+  &.active {
+    color: darken($primary-color, 10%);
+  }
+
+  &.pull-left {
+    margin-left: 5px;
+
+    .icon {
+      margin-right: -3px;
+      margin-left: -8px;
+    }
+  }
+  &.pull-right {
+    margin-right: 5px;
+
+    .icon {
+      margin-right: -8px;
+      margin-left: -3px;
+    }
+  }
+}
+
+
+// Bars with block buttons
+// --------------------------------------------------
+
+// Add proper padding
+.bar .btn-block {
+  padding: 7px 0 6px;
+  margin-top: 5px;
+  margin-bottom: 0;
+  font-size: 16px; // Scale down font size to fit in bar.
+}
+
+
+// Search forms in standard bar
+// --------------------------------------------------
+
+// Position/size search bar within the bar
+.bar input[type="search"] {
+  height: 29px;
+  margin: 6px 0;
+}
+
+
+// Segmented controller in all bars
+// --------------------------------------------------
+
+// Remove standard segmented bottom margin
+.bar .segmented-control {
+  top: 8px;
+  margin: 0 auto;
+}
+
+
+// Nav bars with Ratchicons
+// --------------------------------------------------
+
+.bar .icon {
+  font-size: 24px;
+  margin-top: 11px;
+
+  &.pull-left {
+    margin-left: -3px;
+  }
+  &.pull-right {
+    margin-right: -3px;
+  }
+}
diff --git a/lib/sass/buttons.scss b/lib/sass/buttons.scss
index 5087e7a..e4d5f50 100644
--- a/lib/sass/buttons.scss
+++ b/lib/sass/buttons.scss
@@ -118,93 +118,53 @@
   font-size: 18px;
 }
 
+
 // Button overrides
 // --------------------------------------------------
+
 input[type="submit"],
 input[type="reset"],
 input[type="button"] {
   width: 100%;
 }
 
-// Buttons in nav bars
-// --------------------------------------------------
-
-.bar-nav .btn {
-  position: relative;
-  z-index: 10; // Position the buttons on top of .title
-  padding: 6px 12px;
-  margin-top: 8px;
-  font-weight: $font-weight-light;
-
-  &.pull-right { 
-    margin-left: $bar-side-spacing; 
-  }
-  &.pull-left { 
-    margin-right: $bar-side-spacing;
-  }
 
-  // Link button (Buttons that look like links)
-  &.btn-link {
-    padding: 0;
-    margin-top: 0;
-    font-size: 16px;
-    color: $primary-color;
-    line-height: $bar-base-height;
-    border: none;
-    background-color: transparent;
-
-    &:active,
-    &.active {
-      color: darken($primary-color, 10%);
-    }
-  }
-}
-
-
-// Block buttons in all bars
+// Buttons with badges
 // --------------------------------------------------
 
-// Add proper padding
-.bar .btn-block {
-  padding: 7px 0 6px;
-  margin-top: 5px;
-  margin-bottom: 0;
-  font-size: 16px; // Scale down font size to fit in bar.
+// Generic styles for all badges within default buttons
+.btn .badge {
+  font-size: 12px;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  margin: -2px -4px -2px 4px;
+  background-color: rgba(0,0,0,.15);
 }
 
-
-// Block level buttons in popovers
-// --------------------------------------------------
-
-.popover .btn-block {
-  margin-bottom: 5px;
-  // Remove extra margin on bottom of last button
-  &:last-child {
-    margin-bottom: 0;
-  }
+// Buttons with inverted badges
+.btn .badge-inverted,
+.btn:active .badge-inverted {
+  background-color: transparent;
+}
+.btn-primary:active .badge-inverted,
+.btn-positive:active .badge-inverted,
+.btn-negative:active .badge-inverted {
+  color: #fff;
 }
-// Line the button text up with content's text
-.bar-nav .btn-link {
-  &.pull-left {
-    margin-left: 5px;
-
-    .icon {
-      margin-right: -3px;
-      margin-left: -8px;
-    }
-  }
-  &.pull-right {
-    margin-right: 5px;
 
-    .icon {
-      margin-right: -8px;
-      margin-left: -3px;
-    }
-  }
+// Position badges within block level buttons
+// Note: These are absolutely positioned so that text of button isn't "pushed" by badge and always
+// stays at the center of button
+.btn-block .badge {
+  position: absolute;
+  right: 0;
+  margin-right: 10px;
 }
 
-// Buttons in table-views
+
+// Buttons with Ratchicons
 // --------------------------------------------------
-.table-view .btn {
-  margin-top: -1px; // Center the btn inside the cell
+
+.btn .icon {
+  font-size: inherit;
 }
diff --git a/lib/sass/cards.scss b/lib/sass/cards.scss
index 11035bf..88f1b79 100644
--- a/lib/sass/cards.scss
+++ b/lib/sass/cards.scss
@@ -16,3 +16,11 @@
   	color: inherit;
   }
 }
+
+
+// Cards with table-views
+// --------------------------------------------------
+
+.card .table-view li:last-child {
+  border: 0;
+}
\ No newline at end of file
diff --git a/lib/sass/docs.scss b/lib/sass/docs.scss
index f213cc5..3ffc797 100644
--- a/lib/sass/docs.scss
+++ b/lib/sass/docs.scss
@@ -638,7 +638,7 @@ hr {
     height: 570px; // Fullscreen fun times
     display: block;
   }
-  .slider .slides .slide-text {
+  .slider .slide-group .slide-text {
     position: absolute;
     top: 45%;
     left: 0;
diff --git a/lib/sass/forms.scss b/lib/sass/forms.scss
index dbc821b..c67b7cb 100644
--- a/lib/sass/forms.scss
+++ b/lib/sass/forms.scss
@@ -127,13 +127,3 @@ select {
   margin-bottom: 0;
   border: 0;
 }
-
-
-// Search forms in standard bar
-// --------------------------------------------------
-
-// Position/size search bar within the bar
-.bar input[type="search"] {
-  height: 29px;
-  margin: 6px 0;
-}
diff --git a/lib/sass/popovers.scss b/lib/sass/popovers.scss
index 839bfdb..fd8ccd9 100644
--- a/lib/sass/popovers.scss
+++ b/lib/sass/popovers.scss
@@ -55,3 +55,31 @@
   z-index: 10;
   background-color: rgba(0,0,0,.15);
 }
+
+// Block level buttons in popovers
+// --------------------------------------------------
+
+.popover .btn-block {
+  margin-bottom: 5px;
+  
+  // Remove extra margin on bottom of last button
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+
+// Table views in popovers
+// --------------------------------------------------
+
+.popover .table-view {
+  width: auto;
+  max-height: 300px;
+  margin-right: 0;
+  margin-bottom: 0;
+  margin-left: 0;
+  overflow: auto;
+  background-color: #fff;
+  border-radius: $border-radius;
+  -webkit-overflow-scrolling: touch;
+}
diff --git a/lib/sass/ratchicons.scss b/lib/sass/ratchicons.scss
index eb0aa13..9c4ae91 100644
--- a/lib/sass/ratchicons.scss
+++ b/lib/sass/ratchicons.scss
@@ -40,42 +40,3 @@
 .icon-sound4:before { content: '\f004'; }
 .icon-sound:before { content: '\f001'; }
 .icon-up:before { content: '\e802'; }
-
-// Ratchicons in buttons
-.btn {
-  .icon {
-    font-size: inherit;
-  }
-}
-
-// Ratchicons in nav bars
-.bar .icon {
-  font-size: 24px;
-  margin-top: 11px;
-
-  &.pull-left {
-    margin-left: -3px;
-  }
-  &.pull-right {
-    margin-right: -3px;
-  }
-}
-
-// Ratchicons in table-views
-.table-view {
-  .icon {
-    margin-top: 3px;
-    font-size: inherit;
-
-    &.icon-left,
-    &.icon-right {
-      color: #bbb;
-    }
-    &.pull-left {
-      margin-right: 5px;
-    }
-    &.pull-right {
-      margin-left: 5px;
-    }
-  }
-}
\ No newline at end of file
diff --git a/lib/sass/segmented-controls.scss b/lib/sass/segmented-controls.scss
index ddf9e22..3acf461 100644
--- a/lib/sass/segmented-controls.scss
+++ b/lib/sass/segmented-controls.scss
@@ -128,13 +128,3 @@
     display: block;
   }
 }
-
-
-// Segmented controller in all bars
-// --------------------------------------------------
-
-// Remove standard segmented bottom margin
-.bar .segmented-control {
-  top: 8px;
-  margin: 0 auto;
-}
diff --git a/lib/sass/sliders.scss b/lib/sass/sliders.scss
index 09aff4b..e77cddd 100644
--- a/lib/sass/sliders.scss
+++ b/lib/sass/sliders.scss
@@ -14,7 +14,7 @@
   background-color: #000;
 
   // Inner wrapper for slider (width of all slides together)
-  .slides {
+  .slide-group {
     position: relative;
     padding: 0;
     font-size: 0; // Remove spaces from inline-block children
diff --git a/lib/sass/table-views.scss b/lib/sass/table-views.scss
index 93c27cc..143f26e 100644
--- a/lib/sass/table-views.scss
+++ b/lib/sass/table-views.scss
@@ -84,25 +84,50 @@
 }
 
 
-// Table views in cards
+// Table-views with buttons
 // --------------------------------------------------
 
-.card .table-view li:last-child {
-  border: 0;
+.table-view .btn {
+  margin-top: -1px; // Center the btn inside the cell
 }
 
 
-// Table views in popovers
+// Table-views with badges
 // --------------------------------------------------
+.table-view .badge {
+  margin-top: 2px;
 
-.popover .table-view {
-  width: auto;
-  max-height: 300px;
-  margin-right: 0;
-  margin-bottom: 0;
-  margin-left: 0;
-  overflow: auto;
-  background-color: #fff;
-  border-radius: $border-radius;
-  -webkit-overflow-scrolling: touch;
+  &.pull-left {
+    margin-right: 5px;
+  }
+  &.pull-right {
+    margin-left: 5px;
+  }
+}
+
+
+// Table-views with toggles
+// --------------------------------------------------
+
+.table-view .toggle {
+  margin-top: -4px; // Center the toggle inside the cell
+}
+
+
+// Table-views with Ratchicons
+// --------------------------------------------------
+.table-view .icon {
+  margin-top: 3px;
+  font-size: inherit;
+
+  &.icon-left,
+  &.icon-right {
+    color: #bbb;
+  }
+  &.pull-left {
+    margin-right: 5px;
+  }
+  &.pull-right {
+    margin-left: 5px;
+  }
 }
diff --git a/lib/sass/toggles.scss b/lib/sass/toggles.scss
index 95341a1..c87a528 100644
--- a/lib/sass/toggles.scss
+++ b/lib/sass/toggles.scss
@@ -58,10 +58,3 @@
     display: none;
   }
 }
-
-
-// Toggles in table-views
-// --------------------------------------------------
-.table-view .toggle {
-  margin-top: -4px; // Center the toggle inside the cell
-}