[refs #380] Switch to flexbox

objects/_objects.layout.scss

@@ -10,9 +10,9 @@
  * with width utilities, for example:
  *
  *   <div class="o-layout">
- *     <div class="o-layout__item  u-1/2">
+ *     <div class="u-1/2">
  *     </div>
- *     <div class="o-layout__item  u-1/2">
+ *     <div class="u-1/2">
  *     </div>
  *   </div>
  *
@@ -21,11 +21,11 @@
  * systems:
  *
  *   <div class="o-layout">
- *     <div class="o-layout__item  u-1/1  u-1/3@medium">
+ *     <div class="u-1/1  u-1/3@medium">
  *     </div>
- *     <div class="o-layout__item  u-1/2  u-1/3@medium">
+ *     <div class="u-1/2  u-1/3@medium">
  *     </div>
- *     <div class="o-layout__item  u-1/2  u-1/3@medium">
+ *     <div class="u-1/2  u-1/3@medium">
  *     </div>
  *   </div>
  *
@@ -50,10 +50,6 @@
  * There are plenty more options available to us: explore them below.
  */
 
-// By default we use the `font-size: 0;` trick to remove whitespace between
-// items. Set this to true in order to use a markup-based strategy like
-// commenting out whitespace or minifying HTML.
-$inuit-use-markup-fix: false !default;
 
 
 
@@ -70,40 +66,28 @@ $inuit-use-markup-fix: false !default;
  */
 
 .o-layout {
-  display: block; /* [1] */
+  display: flex; /* [1] */
+  flex-wrap: wrap;
   margin:  0; /* [2] */
   padding: 0; /* [2] */
   list-style: none; /* [1] */
   margin-left: -$inuit-global-spacing-unit; /* [3] */
-
-  @if ($inuit-use-markup-fix == false) {
-    font-size: 0;
-  }
-
 }
 
   /**
    * 1. Required in order to combine fluid widths with fixed gutters.
-   * 2. Allows us to manipulate grids vertically, with text-level properties,
-   *    etc.
-   * 3. Default item alignment is with the tops of each other, like most
-   *    traditional grid/layout systems.
-   * 4. By default, all layout items are full-width (mobile first).
-   * 5. Gutters provided by left padding:
+   * 2. By default, all layout items are full-width (mobile first).
+   * 3. Gutters provided by left padding:
    *    http://csswizardry.com/2011/08/building-better-grid-systems/
-   * 6. Fallback for old IEs not supporting `rem` values.
    */
 
-  .o-layout__item {
-    box-sizing: border-box; /* [1] */
-    display: inline-block; /* [2] */
-    vertical-align: top; /* [3] */
-    width: 100%; /* [4] */
-    padding-left: $inuit-global-spacing-unit; /* [5] */
+  .o-layout {
 
-    @if ($inuit-use-markup-fix == false) {
-      font-size: $inuit-global-font-size; /* [6] */
-      font-size: 1rem;
+    > * {
+      box-sizing: border-box; /* [1] */
+      flex-basis: auto;
+      padding-left: $inuit-global-spacing-unit; /* [3] */
+      width: 100%; /* [2] */
     }
 
   }
@@ -118,7 +102,7 @@ $inuit-use-markup-fix: false !default;
 .o-layout--flush {
   margin-left: 0;
 
-  > .o-layout__item {
+  > * {
     padding-left: 0;
   }
 
@@ -128,7 +112,7 @@ $inuit-use-markup-fix: false !default;
 .o-layout--tiny {
   margin-left: -$inuit-global-spacing-unit-tiny;
 
-  > .o-layout__item {
+  > * {
     padding-left: $inuit-global-spacing-unit-tiny;
   }
 
@@ -138,7 +122,7 @@ $inuit-use-markup-fix: false !default;
 .o-layout--small {
   margin-left: -$inuit-global-spacing-unit-small;
 
-  > .o-layout__item {
+  > * {
     padding-left: $inuit-global-spacing-unit-small;
   }
 
@@ -148,7 +132,7 @@ $inuit-use-markup-fix: false !default;
 .o-layout--large {
   margin-left: -$inuit-global-spacing-unit-large;
 
-  > .o-layout__item {
+  > * {
     padding-left: $inuit-global-spacing-unit-large;
   }
 
@@ -158,7 +142,7 @@ $inuit-use-markup-fix: false !default;
 .o-layout--huge {
   margin-left: -$inuit-global-spacing-unit-huge;
 
-  > .o-layout__item {
+  > * {
     padding-left: $inuit-global-spacing-unit-huge;
   }
 
@@ -176,11 +160,7 @@ $inuit-use-markup-fix: false !default;
  */
 
 .o-layout--middle {
-
-  > .o-layout__item {
-    vertical-align: middle;
-  }
-
+  align-items: center;
 }
 
 
@@ -189,11 +169,7 @@ $inuit-use-markup-fix: false !default;
  */
 
 .o-layout--bottom {
-
-  > .o-layout__item {
-    vertical-align: bottom;
-  }
-
+  align-items: flex-end;
 }
 
 
@@ -203,7 +179,7 @@ $inuit-use-markup-fix: false !default;
  * below and other older browsers due to the lack of `display: flex` support.
  */
 
-.o-layout--stretch {
+ .o-layout--stretch {
   display: flex;
   flex-wrap: wrap;
 
@@ -229,20 +205,15 @@ $inuit-use-markup-fix: false !default;
 
 
 
-/* Fill order modifiers
+/* Horizontal alignment modifiers.
    ========================================================================== */
 
 /**
  * Fill up the layout system from the centre.
  */
 
 .o-layout--center {
-  text-align: center;
-
-  > .o-layout__item {
-    text-align: left;
-  }
-
+  justify-content: center;
 }
 
 
@@ -251,12 +222,7 @@ $inuit-use-markup-fix: false !default;
  */
 
 .o-layout--right {
-  text-align: right;
-
-  > .o-layout__item {
-    text-align: left;
-  }
-
+  justify-content: flex-end;
 }
 
 
@@ -266,26 +232,22 @@ $inuit-use-markup-fix: false !default;
  */
 
 .o-layout--left {
-  text-align: left;
+  justify-content: flex-start;
+}
+
 
-  > .o-layout__item {
-    text-align: left;
-  }
 
-}
 
 
+/* Reverse modifiers.
+   ========================================================================== */
+
 /**
  * Reverse the rendered order of the grid system.
  */
 
 .o-layout--reverse {
-  direction: rtl;
-
-  > .o-layout__item {
-    direction: ltr;
-  }
-
+  flex-direction: row-reverse;
 }