Merge pull request #111 from twbs/flex

$enable-flex

6 files changed, 181 insertions, 43 deletions

diff --git a/scss/_grid.scss b/scss/_grid.scss
index ed9f232af..583c00eac 100644
--- a/scss/_grid.scss
+++ b/scss/_grid.scss
@@ -44,3 +44,87 @@
 
 @include make-grid-columns();
 
+
+// Flex variation
+//
+// Custom styles for additional flex alignment options.
+
+@if $enable-flex {
+
+  // Flex column reordering
+
+  .col-xs-first { order: -1; }
+  .col-xs-last { order: 1; }
+
+  @include media-breakpoint-up(sm) {
+    .col-sm-first { order: -1; }
+    .col-sm-last { order: 1; }
+  }
+  @include media-breakpoint-up(md) {
+    .col-md-first { order: -1; }
+    .col-md-last { order: 1; }
+  }
+  @include media-breakpoint-up(lg) {
+    .col-lg-first { order: -1; }
+    .col-lg-last { order: 1; }
+  }
+  @include media-breakpoint-up(xl) {
+    .col-xl-first { order: -1; }
+    .col-xl-last { order: 1; }
+  }
+
+  // Alignment for every column in row
+
+  .row-xs-top    { align-items: flex-start; }
+  .row-xs-center { align-items: center; }
+  .row-xs-bottom { align-items: flex-end; }
+
+  @include media-breakpoint-up(sm) {
+    .row-sm-top    { align-items: flex-start; }
+    .row-sm-center { align-items: center; }
+    .row-sm-bottom { align-items: flex-end; }
+  }
+  @include media-breakpoint-up(md) {
+    .row-md-top    { align-items: flex-start; }
+    .row-md-center { align-items: center; }
+    .row-md-bottom { align-items: flex-end; }
+  }
+  @include media-breakpoint-up(lg) {
+    .row-lg-top    { align-items: flex-start; }
+    .row-lg-center { align-items: center; }
+    .row-lg-bottom { align-items: flex-end; }
+  }
+  @include media-breakpoint-up(xl) {
+    .row-xl-top    { align-items: flex-start; }
+    .row-xl-center { align-items: center; }
+    .row-xl-bottom { align-items: flex-end; }
+  }
+
+  // Alignment per column
+
+  .col-xs-top    { align-self: flex-start; }
+  .col-xs-center { align-self: center; }
+  .col-xs-bottom { align-self: flex-end; }
+
+  @include media-breakpoint-up(sm) {
+    .col-sm-top    { align-self: flex-start; }
+    .col-sm-center { align-self: center; }
+    .col-sm-bottom { align-self: flex-end; }
+  }
+  @include media-breakpoint-up(md) {
+    .col-md-top    { align-self: flex-start; }
+    .col-md-center { align-self: center; }
+    .col-md-bottom { align-self: flex-end; }
+  }
+  @include media-breakpoint-up(lg) {
+    .col-lg-top    { align-self: flex-start; }
+    .col-lg-center { align-self: center; }
+    .col-lg-bottom { align-self: flex-end; }
+  }
+  @include media-breakpoint-up(xl) {
+    .col-xl-top    { align-self: flex-start; }
+    .col-xl-center { align-self: center; }
+    .col-xl-bottom { align-self: flex-end; }
+  }
+
+}
\ No newline at end of file
diff --git a/scss/_input-group.scss b/scss/_input-group.scss
index 46da71a9e..30786ae01 100644
--- a/scss/_input-group.scss
+++ b/scss/_input-group.scss
@@ -8,22 +8,31 @@
 //
 
 .input-group {
-  position: relative; // For dropdowns
-  display: table;
-  border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
+  position: relative;
+
+  @if $enable-flex {
+    display: flex;
+  } @else {
+    display: table;
+    // Prevent input groups from inheriting border styles from table cells when
+    // placed within a table.
+    border-collapse: separate;
+  }
 
   .form-control {
     // Ensure that the input is always above the *appended* addon button for
     // proper border colors.
     position: relative;
     z-index: 2;
-
-    // IE9 fubars the placeholder attribute in text inputs and the arrows on
-    // select elements in input groups. To fix it, we float the input. Details:
-    // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
-    float: left;
-
-    width: 100%;
+    @if $enable-flex {
+      flex: 1;
+    } @else {
+      // IE9 fubars the placeholder attribute in text inputs and the arrows on
+      // select elements in input groups. To fix it, we float the input. Details:
+      // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
+      float: left;
+      width: 100%;
+    }
     margin-bottom: 0;
   }
 }
@@ -31,7 +40,11 @@
 .input-group-addon,
 .input-group-btn,
 .input-group .form-control {
-  display: table-cell;
+  @if $enable-flex {
+    // do nothing
+  } @else {
+    display: table-cell;
+  }
 
   &:not(:first-child):not(:last-child) {
     @include border-radius(0);
@@ -40,7 +53,11 @@
 
 .input-group-addon,
 .input-group-btn {
-  width: 1%;
+  @if $enable-flex {
+    // do nothing
+  } @else {
+    width: 1%;
+  }
   white-space: nowrap;
   vertical-align: middle; // Match the inputs
 }
diff --git a/scss/_media.scss b/scss/_media.scss
index e5eb7aba3..a1c26f2ac 100644
--- a/scss/_media.scss
+++ b/scss/_media.scss
@@ -2,29 +2,58 @@
 // Media
 // --------------------------------------------------
 
-.media {
-  // Proper spacing between instances of .media
-  margin-top: 15px;
+@if $enable-flex {
+  .media {
+    display: flex;
+    margin-bottom: $spacer;
+  }
+  .media-body {
+    flex: 1;
+  }
+} @else {
+  .media {
+    margin-top: 15px;
 
-  &:first-child {
-    margin-top: 0;
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+  .media,
+  .media-body {
+    overflow: hidden;
+    zoom: 1;
+  }
+  .media-body {
+    width: 10000px;
+  }
+  .media-left,
+  .media-right,
+  .media-body {
+    display: table-cell;
+    vertical-align: top;
+  }
+  .media-middle {
+    vertical-align: middle;
+  }
+  .media-bottom {
+    vertical-align: bottom;
   }
 }
 
-.media,
-.media-body {
-  overflow: hidden;
-  zoom: 1;
-}
 
-.media-body {
-  width: 10000px;
-}
+//
+// Images/elements as the media anchor
+//
 
 .media-object {
   display: block;
 }
 
+
+//
+// Alignment
+//
+
 .media-right,
 .media > .pull-right {
   padding-left: 10px;
@@ -35,30 +64,21 @@
   padding-right: 10px;
 }
 
-.media-left,
-.media-right,
-.media-body {
-  display: table-cell;
-  vertical-align: top;
-}
-
-.media-middle {
-  vertical-align: middle;
-}
 
-.media-bottom {
-  vertical-align: bottom;
-}
+//
+// Headings
+//
 
-// Reset margins on headings for tighter default spacing
 .media-heading {
   margin-top: 0;
   margin-bottom: 5px;
 }
 
+
+//
 // Media list variation
 //
-// Undo default ul/ol styles
+
 .media-list {
   padding-left: 0;
   list-style: none;
diff --git a/scss/_variables.scss b/scss/_variables.scss
index b4479386e..35a898216 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -37,6 +37,7 @@ $link-hover-decoration:      underline !default;
 //
 // Quickly modify global styling by enabling or disabling features.
 
+$enable-flex:                true !default;
 $enable-rounded:             true !default;
 $enable-shadows:             false !default;
 $enable-gradients:           false !default;
diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss
index 32705025e..ad2060cbf 100644
--- a/scss/mixins/_grid-framework.scss
+++ b/scss/mixins/_grid-framework.scss
@@ -22,7 +22,11 @@
     @include media-breakpoint-up($breakpoint) {
       // Work around cross-media @extend (https://github.com/sass/sass/issues/1050)
       %grid-column-float-#{$breakpoint} {
-        float: left;
+        @if $enable-flex {
+          // Do nothing
+        } @else {
+          float: left;
+        }
       }
       @for $i from 1 through $columns {
         .col-#{$breakpoint}-#{$i} {
diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index 29af269aa..17998affb 100644
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -11,6 +11,10 @@
 }
 
 @mixin make-row($gutter: $grid-gutter-width) {
+  @if $enable-flex {
+    display: flex;
+    flex-wrap: wrap;
+  }
   margin-left:  ($gutter / -2);
   margin-right: ($gutter / -2);
   @include clearfix();
@@ -18,14 +22,22 @@
 
 @mixin make-col($gutter: $grid-gutter-width) {
   position: relative;
-  float: left;
+  @if $enable-flex {
+    // Do nothing
+  } @else {
+    float: left;
+  }
   min-height: 1px;
   padding-left:  ($gutter / 2);
   padding-right: ($gutter / 2);
 }
 
 @mixin make-col-span($size, $columns: $grid-columns) {
-  width: percentage($size / $columns);
+  @if $enable-flex {
+    flex: 0 0 percentage($size / $columns);
+  } @else {
+    width: percentage($size / $columns);
+  }
 }
 
 @mixin make-col-offset($size, $columns: $grid-columns) {