how about we don't use flex-box. awww yis

assets/css/docs.css

@@ -314,6 +314,14 @@ h6 {
   height: 548px;
   overflow: hidden;
   background-color: #efeff4;
+  /*background: rgb(0,0,0);
+  background: -moz-linear-gradient(top,  rgba(0,0,0,1) 0%, rgba(34,34,34,1) 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(34,34,34,1)));
+  background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(34,34,34,1) 100%);
+  background: -o-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(34,34,34,1) 100%);
+  background: -ms-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(34,34,34,1) 100%);
+  background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(34,34,34,1) 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#222222',GradientType=0 );*/
 }
 
 .iphone .content,

dist/android-theme.css

@@ -34,10 +34,6 @@
   bottom: 71px;
 }
 
-.bar-nav {
-  display: block;
-}
-
 .bar-tab {
   height: 70px;
   border-top: 1px solid #565656;

dist/ratchet.css

@@ -311,10 +311,6 @@ strong {
 
 .bar-nav {
   top: 0;
-  display: -webkit-box;
-  display: box;
-  -webkit-box-orient: horizontal;
-  box-orient: horizontal;
 }
 
 .title {
@@ -702,22 +698,15 @@ select {
   color: #428bca;
   background-color: transparent;
   border: 0;
-  -webkit-box-flex: 0;
-  box-flex: 0;
 }
-.bar-nav .title + [class*="button"]:last-child,
-.bar-nav .button + [class*="button"]:last-child,
 .bar-nav [class*="button"].pull-right {
-  position: absolute;
-  top: 5px;
-  right: 10px;
+  margin-left: 10px;
+}
+.bar-nav [class*="button"].pull-left {
+  margin-right: 10px;
 }
 .bar-nav .button:active,
 .bar-nav .button.active,
-.bar-nav .button-prev:active,
-.bar-nav .button-prev.active,
-.bar-nav .button-next:active,
-.bar-nav .button-next.active,
 .bar-nav .button-primary:active,
 .bar-nav .button-primary.active {
   color: #428bca;
@@ -826,10 +815,8 @@ input[type="button"] {
 }
 
 .segmented-controller {
-  display: -webkit-box;
-  display: box;
+  display: table;
   padding: 0;
-  margin: 0 0 10px 0;
   overflow: hidden;
   font-size: 12px;
   font-weight: 400;
@@ -837,20 +824,19 @@ input[type="button"] {
   background-color: white;
   border: 1px solid #428bca;
   border-radius: 4px;
-  -webkit-box-orient: horizontal;
-  box-orient: horizontal;
 }
 .segmented-controller li {
+  display: table-cell;
   overflow: hidden;
+  width: 1%;
   text-align: center;
   white-space: nowrap;
   border-left: 1px solid #428bca;
-  -webkit-box-flex: 1;
-  box-flex: 1;
 }
 .segmented-controller li > a {
   display: block;
-  padding: 6px 16px 7px;
+  padding-top: 6px;
+  padding-bottom: 7px;
   overflow: hidden;
   line-height: 1;
   color: #428bca;
@@ -877,18 +863,9 @@ input[type="button"] {
 }
 
 [class*="bar-"] .segmented-controller {
-  margin: 3px 0;
-  -webkit-box-flex: 1;
-  box-flex: 1;
-}
-
-.bar-nav .segmented-controller {
-  margin-bottom: 4px;
-}
-
-[class*="bar-"] .segmented-controller + [class*="button"],
-[class*="bar-"] [class*="button"] + .segmented-controller {
-  margin-left: 10px;
+  margin-top: 3px;
+  margin-right: auto;
+  margin-left: auto;
 }
 
 .popover {

index.html

@@ -90,54 +90,54 @@ layout: default
 
         <div class="component-example component-example-fullbleed">
           <header class="bar-nav">
-            <a class="button">
+            <a class="button pull-left">
               Left
             </a>
-            <h1 class="title">Title</h1>
-            <a class="button">
+            <a class="button pull-right">
               Right
             </a>
+            <h1 class="title">Title</h1>
           </header>
         </div>
 
 {% highlight html %}
 <header class="bar-nav">
-  <a class="button">
+  <a class="button pull-left">
     Left
   </a>
-  <h1 class="title">Title</h1>
-  <a class="button">
+  <a class="button pull-right">
     Right
   </a>
+  <h1 class="title">Title</h1>
 </header>
 {% endhighlight %}
 
       </article>
       <article class="component">
-        <h3 class="component-title">Title bar with directional buttons</h3>
+        <h3 class="component-title">Title bar with icons</h3>
         <p class="component-description">Directional buttons in a title bar should be used for navigational purposes.</p>
 
         <div class="component-example component-example-fullbleed">
           <header class="bar-nav">
-            <a class="button-prev">
-              Previous
+            <a class="button pull-left">
+              Left
             </a>
-            <h1 class="title">Title</h1>
-            <a class="button-next">
-              Next
+            <a class="button pull-right">
+              Right
             </a>
+            <h1 class="title">Title</h1>
           </header>
         </div>
 
 {% highlight html %}
 <header class="bar-nav">
-  <a class="button-prev">
-    Previous
+  <a class="button pull-left">
+    Left
   </a>
-  <h1 class="title">Title</h1>
-  <a class="button-next">
-    Next
+  <a class="button pull-right">
+    Right
   </a>
+  <h1 class="title">Title</h1>
 </header>
 {% endhighlight %}
 
@@ -149,9 +149,12 @@ layout: default
 
         <div class="component-example component-example-fullbleed">
           <header class="bar-nav">
-            <a class="button">
+            <a class="button pull-left">
               Left
             </a>
+            <a class="button pull-right">
+              Right
+            </a>
             <ul class="segmented-controller">
               <li class="selected">
                 <a>One</a>
@@ -162,18 +165,21 @@ layout: default
               <li>
                 <a>Three</a>
               </li>
+              <li>
+                <a>Four</a>
+              </li>
             </ul>
-            <a class="button">
-              Right
-            </a>
           </header>
         </div>
 
 {% highlight html %}
 <header class="bar-nav">
-  <a class="button">
+  <a class="button pull-left">
     Left
   </a>
+  <a class="button pull-right">
+    Right
+  </a>
   <ul class="segmented-controller">
     <li class="selected">
       <a>One</a>
@@ -185,9 +191,6 @@ layout: default
       <a>Three</a>
     </li>
   </ul>
-  <a class="button">
-    Right
-  </a>
 </header>
 {% endhighlight %}
 
@@ -871,13 +874,12 @@ document
       <div class="component-example">
         <div id="myPopover" class="popover">  
           <header class="bar-nav">
-            <a class="button">
+            <a class="button pull-left">
               Left
-            </a>
-            <h3 class="title">Popover title</h3>
-            <a class="button">
+            </a><a class="button pull-right">
               Right
             </a>
+            <h3 class="title">Popover title</h3>
           </header>
           <ul class="table-view">
             <li class="table-view-cell">Item1</li>
@@ -895,13 +897,13 @@ document
 {% highlight html %}
 <div id="popover" class="popover">  
   <header class="bar-nav">
-    <a class="button">
+    <a class="button pull-left">
       Left
     </a>
-    <h3 class="title">Popover title</h3>
-    <a class="button">
+    <a class="button pull-right">
       Right
     </a>
+    <h3 class="title">Popover title</h3>
   </header>
   <ul class="table-view">
     <li class="table-view-cell">Item1</li>

lib/sass/bars.scss

@@ -41,9 +41,6 @@
 // Bar docked to top of viewport for showing page title and actions
 .bar-nav {
   top: 0;
-  display: -webkit-box;
-  display: box;
-  @include box-orient(horizontal);
 }
 
 // Centered text in the .bar-nav 

lib/sass/buttons.scss

@@ -117,26 +117,18 @@
     color: $primary-color;
     background-color: transparent;
     border: 0;
-    @include box-flex(0);
-  }
-
-  // Hacky way to right align buttons outside of flex-box system
-  // Note: is only absolutely positioned button, would be better if flex-box had an "align right" option
-  .title + [class*="button"]:last-child,
-  .button + [class*="button"]:last-child,
-  [class*="button"].pull-right {
-    position: absolute;
-    top: 5px; // Offsets the bar's vertical padding
-    right: $bar-side-spacing;
+    
+    &.pull-right { 
+      margin-left: $bar-side-spacing; 
+    }
+    &.pull-left { 
+      margin-right: $bar-side-spacing; 
+    }
   }
 
   // Override standard button active states
   .button:active,
   .button.active,
-  .button-prev:active,
-  .button-prev.active,
-  .button-next:active,
-  .button-next.active,
   .button-primary:active,
   .button-primary.active {
     color: $primary-color;

lib/sass/segmented-controllers.scss

@@ -3,10 +3,8 @@
 // --------------------------------------------------
 
 .segmented-controller {
-  display: -webkit-box;
-  display: box;
+  display: table;
   padding: 0;
-  margin: 0 0 10px 0;
   overflow: hidden;
   font-size: 12px;
   font-weight: $font-weight-light;
@@ -14,20 +12,21 @@
   background-color: $chrome-color;
   border: 1px solid $primary-color;
   border-radius: 4px;
-  @include box-orient(horizontal);
 
   // Section within controller
   li {
+    display: table-cell;
     overflow: hidden;
+    width: 1%;
     text-align: center;
     white-space: nowrap;
     border-left: 1px solid $primary-color;
-    @include box-flex(1);
     
     // Link that fills each section
     > a {
       display: block;
-      padding: 6px 16px 7px;
+      padding-top: 6px;
+      padding-bottom: 7px;
       overflow: hidden;
       line-height: 1;
       color: $primary-color;
@@ -70,15 +69,7 @@
 
 // Remove standard segmented bottom margin
 [class*="bar-"] .segmented-controller {
-  margin: 3px 0;
-  @include box-flex(1);
-}
-.bar-nav .segmented-controller {
-  margin-bottom: 4px;
-}
-
-// Add margins between segmented controllers and buttons
-[class*="bar-"] .segmented-controller + [class*="button"],
-[class*="bar-"] [class*="button"] + .segmented-controller {
-  margin-left: $bar-side-spacing; // Equal to the right and left padding on buttons & icons
+  margin-top: 3px;
+  margin-right: auto;
+  margin-left: auto;
 }

lib/sass/theme-android.scss

@@ -66,9 +66,6 @@ $border-radius: 0;
     bottom: $bar-tab-height + 1;
   }
 }
-.bar-nav {
-  display: block;
-}
 .bar-tab {
   height: $bar-tab-height;
   border-top: $border-default;