do away with attribute selector

components.html

@@ -43,7 +43,7 @@ base_url: "../"
       <div class="device">
         <div class="device-content">
           <div id="iwindow">
-            <header class="bar-nav">
+            <header class="bar bar-nav">
               <h1 class="title">Title</h1>
             </header>
           </div>
@@ -58,13 +58,13 @@ base_url: "../"
         <p class="component-description">Title bars are full width and docked to the top of the viewport.</p>
 
         <div class="component-example component-example-fullbleed">
-          <header class="bar-nav">
+          <header class="bar bar-nav">
             <h1 class="title">Title</h1>
           </header>
         </div>
 
 {% highlight html %}
-<header class="bar-nav">
+<header class="bar bar-nav">
   <h1 class="title">Title</h1>
 </header>
 {% endhighlight %}
@@ -76,7 +76,7 @@ base_url: "../"
       <p class="component-description">Buttons in a title bar are left or right aligned and should be used for actions.</p>
 
       <div class="component-example component-example-fullbleed">
-        <header class="bar-nav">
+        <header class="bar bar-nav">
           <a class="btn pull-left">
             Left
           </a>
@@ -88,7 +88,7 @@ base_url: "../"
       </div>
 
 {% highlight html %}
-<header class="bar-nav">
+<header class="bar bar-nav">
   <a class="btn pull-left">
     Left
   </a>
@@ -104,7 +104,7 @@ base_url: "../"
       <h3 class="component-title">Title bar with link buttons</h3>
 
       <div class="component-example component-example-fullbleed">
-        <header class="bar-nav">
+        <header class="bar bar-nav">
           <a class="btn btn-link pull-left">
             Previous
           </a>
@@ -116,7 +116,7 @@ base_url: "../"
       </div>
 
 {% highlight html %}
-<header class="bar-nav">
+<header class="bar bar-nav">
   <a class="btn btn-link pull-left">
     Previous
   </a>
@@ -134,7 +134,7 @@ base_url: "../"
       <p class="component-description">Title bars can also house segmented controllers. Feel free to add accompanying buttons too. The control will automatically layout itself out correctly.</p>
 
       <div class="component-example component-example-fullbleed">
-        <header class="bar-nav">
+        <header class="bar bar-nav">
           <a class="btn pull-left">
             Left
           </a>
@@ -156,7 +156,7 @@ base_url: "../"
       </div>
 
 {% highlight html %}
-<header class="bar-nav">
+<header class="bar bar-nav">
   <a class="btn pull-left">
     Left
   </a>
@@ -184,7 +184,7 @@ base_url: "../"
       <p class="component-description">Use Ratchicons in the tab bar to represent different sections of your app.</p>
 
       <div class="component-example component-example-fullbleed">
-        <nav class="bar-tab">
+        <nav class="bar bar-tab">
           <a class="tab-item active" href="#">
             <span class="icon icon-share"></span>
             <div class="tab-label">Label</div>
@@ -209,7 +209,7 @@ base_url: "../"
       </div>
 
 {% highlight html %}
-<nav class="bar-tab">
+<nav class="bar bar-tab">
   <a class="tab-item active" href="#">
     <span class="icon icon-share"></span>
     <div class="tab-label">Label</div>
@@ -242,7 +242,7 @@ base_url: "../"
 
       <div class="component-example component-example-fullbleed">
         <!-- Segmented controller in standard bar fixed to top -->
-        <nav class="bar-standard">
+        <nav class="bar bar-standard">
           <ul class="segmented-control">
             <li class="active">
               <a>Thing one</a>
@@ -257,14 +257,14 @@ base_url: "../"
         </nav>
 
         <!-- Block button in standard bar fixed below top bar -->
-        <div class="bar-standard bar-header-secondary">
+        <div class="bar bar-standard bar-header-secondary">
           <a class="btn btn-block">Block level button</a>
         </div>
       </div>
 
 {% highlight html %}
 <!-- Segmented controller in standard bar fixed to top -->
-<nav class="bar-standard">
+<nav class="bar bar-standard">
   <ul class="segmented-control">
     <li class="active">
       <a>Thing one</a>
@@ -279,7 +279,7 @@ base_url: "../"
 </nav>
 
 <!-- Block button in standard bar fixed below top bar -->
-<div class="bar-standard bar-header-secondary">
+<div class="bar bar-standard bar-header-secondary">
   <a class="btn btn-block">Block level button</a>
 </div>
 {% endhighlight %}
@@ -822,7 +822,7 @@ document
 
     <div class="component-example">
       <div id="popover" class="popover">  
-        <header class="bar-nav">
+        <header class="bar bar-nav">
           <a class="btn btn-link pull-left">
             Left
           </a>
@@ -846,7 +846,7 @@ document
 
 {% highlight html %}
 <div id="popover" class="popover">  
-  <header class="bar-nav">
+  <header class="bar bar-nav">
     <a class="btn btn-link pull-left">
       Left
     </a>
@@ -871,7 +871,7 @@ document
     <p class="component-description">Popovers are designed to only fire from <a href="#bars">title bars</a>. Set the value of the title href to the id of a popover, like so:</p>
 
 {% highlight html %}
-<header class="bar-nav">
+<header class="bar bar-nav">
   <a href="#myPopover"> 
     <h1 class="title">Popover title</h3>
   </a>
@@ -887,7 +887,7 @@ document
     <div class="component-example">
       <a href="#myModalexample" class="btn">Open modal</a>
       <div id="myModalexample" class="modal">
-        <header class="bar-nav">
+        <header class="bar bar-nav">
           <a class="btn pull-right" href="#myModalexample">
             Close
           </a>
@@ -905,7 +905,7 @@ document
 {% highlight html %}
 <a href="#myModalexample" class="btn">Open modal</a>
 <div id="myModalexample" class="modal">
-  <header class="bar-nav">
+  <header class="bar bar-nav">
     <a class="btn pull-right" href="#myModalexample">
       Close
     </a>
@@ -996,7 +996,7 @@ document
       <p class="component-description">A working version of push:</p>
 
       <div class="component-example component-example-fullbleed">
-        <header class="bar-nav">
+        <header class="bar bar-nav">
           <h1 class="title">Push</h1>
         </header>
         <div class="content">
@@ -1014,7 +1014,7 @@ document
       </div>
 
 {% highlight html %}
-<header class="bar-nav">
+<header class="bar bar-nav">
   <h1 class="title">Push</h1>
 </header>
 <div class="content">

dist/android-theme.css

@@ -19,12 +19,12 @@
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$color-form', endColorstr='$color-to',GradientType=0 );
 }
 
-[class*="bar-"] {
+.bar {
   height: 50px;
   background-color: #111111;
   border-bottom: 1px solid #565656;
 }
-[class*="bar-"].bar-header-secondary {
+.bar.bar-header-secondary {
   top: 51px;
 }
 
@@ -133,16 +133,16 @@ textarea,
   background-color: white;
 }
 
-[class*="bar-"] .btn {
+.bar .btn {
   padding-top: 9px;
   padding-bottom: 9px;
 }
-[class*="bar-"] .btn-link {
+.bar .btn-link {
   padding: 0;
   color: #33b5e5;
   line-height: 50px;
 }
-[class*="bar-"] .btn-link:active, [class*="bar-"] .btn-link.active {
+.bar .btn-link:active, .bar .btn-link.active {
   color: #1a9bcb;
 }
 

dist/ios-theme.css

@@ -12,19 +12,19 @@
   background-color: #efeff4;
 }
 
-[class*="bar-"] {
+.bar {
   border-bottom: 0;
   background-color: rgba(247, 247, 247, 0.98);
   -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
   box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
 }
-[class*="bar-"].bar-header-secondary {
+.bar.bar-header-secondary {
   top: 44px;
 }
-[class*="bar-"].bar-footer-secondary {
+.bar.bar-footer-secondary {
   bottom: 44px;
 }
-[class*="bar-"].bar-footer-secondary-tab {
+.bar.bar-footer-secondary-tab {
   bottom: 50px;
 }
 

dist/ratchet-theme.css

@@ -12,10 +12,10 @@
   padding-top: 108px;
 }
 
-[class*="bar-"] {
+.bar {
   background-color: rgba(30, 176, 233, 0.98);
 }
-[class*="bar-"].bar-standard, [class*="bar-"].bar-footer-secondary {
+.bar.bar-standard, .bar.bar-footer-secondary {
   background-color: rgba(245, 245, 245, 0.98);
 }
 
@@ -25,7 +25,7 @@
   box-shadow: 0 -20px 0 rgba(30, 176, 233, 0.98), 0 0 1px rgba(0, 0, 0, 0.85);
 }
 
-[class*="bar-"].bar-header-secondary {
+.bar.bar-header-secondary {
   top: 64px;
 }
 

dist/ratchet.css

@@ -282,7 +282,7 @@ strong {
   float: right;
 }
 
-[class*="bar-"] {
+.bar {
   position: fixed;
   right: 0;
   left: 0;
@@ -293,16 +293,16 @@ strong {
   border-bottom: 1px solid #dddddd;
   background-color: white;
 }
-[class*="bar-"].bar-header-secondary {
+.bar.bar-header-secondary {
   top: 44px;
 }
-[class*="bar-"].bar-footer {
+.bar.bar-footer {
   bottom: 0;
 }
-[class*="bar-"].bar-footer-secondary {
+.bar.bar-footer-secondary {
   bottom: 44px;
 }
-[class*="bar-"].bar-footer-secondary-tab {
+.bar.bar-footer-secondary-tab {
   bottom: 50px;
 }
 
@@ -602,7 +602,7 @@ select {
   border: 0;
 }
 
-[class*="bar-"] input[type=search] {
+.bar input[type=search] {
   height: 29px;
   margin: 6px 0;
 }
@@ -727,7 +727,7 @@ input[type="button"] {
   color: #3071a9;
 }
 
-[class*="bar"] .btn-block {
+.bar .btn-block {
   padding: 7px 0;
   margin-top: 4px;
   margin-bottom: 5px;
@@ -936,7 +936,7 @@ input[type="button"] {
   display: block;
 }
 
-[class*="bar-"] .segmented-control {
+.bar .segmented-control {
   top: 8px;
   margin: 0 auto;
 }

docs-assets/css/docs.css

@@ -344,7 +344,7 @@ body {
 }
 
 .component-example,
-.component-example [class*="bar"],
+.component-example .bar,
 .component-example .content {
   position: relative;
 }
@@ -560,7 +560,7 @@ hr {
   }
 
   .device .content,
-  .device [class*="bar"],
+  .device .bar,
   .device .modal {
     position: absolute;
   }
@@ -806,19 +806,19 @@ hr {
 .platform-ios .content {
   background-color: #efeff4;
 }
-.platform-ios [class*="bar-"] {
+.platform-ios .bar {
   border-bottom: 0;
   background-color: rgba(247, 247, 247, 0.98);
   -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
   box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
 }
-.platform-ios [class*="bar-"].bar-header-secondary {
+.platform-ios .bar.bar-header-secondary {
   top: 44px;
 }
-.platform-ios [class*="bar-"].bar-footer-secondary {
+.platform-ios .bar.bar-footer-secondary {
   bottom: 44px;
 }
-.platform-ios [class*="bar-"].bar-footer-secondary-tab {
+.platform-ios .bar.bar-footer-secondary-tab {
   bottom: 50px;
 }
 .platform-ios .bar-tab {
@@ -1180,12 +1180,12 @@ hr {
   background: linear-gradient(to bottom, #111111 0%, #2b2b2b 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$color-form', endColorstr='$color-to',GradientType=0 );
 }
-.platform-android [class*="bar-"] {
+.platform-android .bar {
   height: 50px;
   background-color: #111111;
   border-bottom: 1px solid #565656;
 }
-.platform-android [class*="bar-"].bar-header-secondary {
+.platform-android .bar.bar-header-secondary {
   top: 51px;
 }
 .platform-android .bar-tab {
@@ -1278,16 +1278,16 @@ hr {
   color: #fff;
   background-color: white;
 }
-.platform-android [class*="bar-"] .btn {
+.platform-android .bar .btn {
   padding-top: 9px;
   padding-bottom: 9px;
 }
-.platform-android [class*="bar-"] .btn-link {
+.platform-android .bar .btn-link {
   padding: 0;
   color: #33b5e5;
   line-height: 50px;
 }
-.platform-android [class*="bar-"] .btn-link:active, .platform-android [class*="bar-"] .btn-link.active {
+.platform-android .bar .btn-link:active, .platform-android .bar .btn-link.active {
   color: #1a9bcb;
 }
 .platform-android .btn-primary {

examples/app-default/choose-theater.html

@@ -18,20 +18,20 @@
   </head>
   <body>
 
-    <header class="bar-nav">
+    <header class="bar bar-nav">
       <a class="btn pull-left" href="index.html" data-transition="slide-out">
         Back
       </a>
       <h1 class="title">Argo</h1>
     </header>
     
-    <nav class="bar-standard bar-header-secondary">
+    <nav class="bar bar-standard bar-header-secondary">
       <form>
         <input type="search" placeholder="Search theaters">
       </form>
     </nav>
 
-    <nav class="bar-tab">
+    <nav class="bar bar-tab">
       <a class="tab-item selected" href="index.html" data-transition="fade">
         <span class="icon icon-share"></span>
         <div class="tab-label">Movies</div>

examples/app-default/index.html

@@ -17,17 +17,17 @@
 
   </head>
   <body>
-    <header class="bar-nav">
+    <header class="bar bar-nav">
       <h1 class="title">Movie finder</h1>
     </header>
     
-    <nav class="bar-standard bar-header-secondary">
+    <nav class="bar bar-standard bar-header-secondary">
       <form>
         <input type="search" placeholder="Search">
       </form>
     </nav>
 
-    <nav class="bar-tab">
+    <nav class="bar bar-tab">
       <a class="tab-item selected" href="index.html" data-transition="fade">
         <span class="icon icon-share"></span>
         <div class="tab-label">Movies</div>

lib/sass/bars.scss

@@ -2,7 +2,7 @@
 // Bars
 // --------------------------------------------------
 
-[class*="bar-"] {
+.bar {
   position: fixed;
   right: 0;
   left: 0;

lib/sass/buttons.scss

@@ -168,7 +168,7 @@ input[type="button"] {
 // --------------------------------------------------
 
 // Add proper padding
-[class*="bar"] .btn-block {
+.bar .btn-block {
   padding: 7px 0;
   margin-top: 4px;
   margin-bottom: 5px;

lib/sass/docs.scss

@@ -364,7 +364,7 @@ body {
   line-height: $line-height-default;
 }
 .component-example,
-.component-example [class*="bar"],
+.component-example .bar,
 .component-example .content {
   position: relative;
 }
@@ -605,7 +605,7 @@ hr {
     background-color: #fff;
   }
   .device .content,
-  .device [class*="bar"],
+  .device .bar,
   .device .modal {
     position: absolute;
   }

lib/sass/forms.scss

@@ -133,7 +133,7 @@ select {
 // --------------------------------------------------
 
 // Position/size search bar within the bar
-[class*="bar-"] input[type=search] {
+.bar input[type=search] {
   height: 29px;
   margin: 6px 0;
 }

lib/sass/segmented-controllers.scss

@@ -134,7 +134,7 @@
 // --------------------------------------------------
 
 // Remove standard segmented bottom margin
-[class*="bar-"] .segmented-control {
+.bar .segmented-control {
   top: 8px;
   margin: 0 auto;
 }

lib/sass/theme-android.scss

@@ -46,7 +46,7 @@ $border-radius: 0;
 // Bars
 // --------------------------------------------------
 
-[class*="bar-"] {
+.bar {
   height: $bar-base-height;
   background-color: $chrome-color;
   border-bottom: $border-default;
@@ -188,7 +188,7 @@ textarea,
     background-color: $default-color;
   }
 }
-[class*="bar-"] {
+.bar {
   .btn {
     padding-top: 9px;
     padding-bottom: 9px;

lib/sass/theme-classic.scss

@@ -26,7 +26,7 @@ $negative-color: #e71e1e;
 
 // Bars
 // --------------------------------------------------
-[class*="bar-"] {
+.bar {
   background-color: $chrome-color;
 
   &.bar-standard,
@@ -38,7 +38,7 @@ $negative-color: #e71e1e;
   top: 20px;
   @include box-shadow(0 -20px 0 rgba(30,176,233,.98), 0 0 1px rgba(0, 0, 0, 0.85));
 }
-[class*="bar-"].bar-header-secondary {
+.bar.bar-header-secondary {
   top: 64px;
 }
 .title {

lib/sass/theme-ios.scss

@@ -39,7 +39,7 @@ $timing-fuction: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods
 // Bars
 // --------------------------------------------------
 
-[class*="bar-"] {
+.bar {
   border-bottom: 0;
   background-color: $chrome-color;
   @include box-shadow(0 0 1px rgba(0,0,0,.85));