Merge pull request #7 from suitcss/flex-shrink

Add flex-shrink, flex-basis and flex shorthand utilities

Author: simonsmith

.travis.yml

@@ -1,5 +1,4 @@
 language: node_js
 sudo: false
 node_js:
-  - "4"
-  - "5"
+  - "stable"

CHANGELOG.md

@@ -1,7 +1,9 @@
 ### HEAD
 
-* Enable BEM linter reporting in tests
-* Update stylelint-config-suitcss to `4.0.0`
+* Add utils for `flex-basis` and `flex` shorthand (initial, auto, none)
+* Add `flex-shrink` utility
+* Remove IE10 hack for applying `flex-shrink` to all children
+* Update suitcss-preprocessor to `3.0.1`
 * Move custom media below imports to fix warning
 
 ### 1.1.1 (February 08, 2016)

README.md

@@ -77,6 +77,29 @@ SUIT CSS flexbox utilities
 
 `X` can be any of the following numbers: `1`, `2`, `3`, `4`, `5`.
 
+**`flex-shrink`**
+
+* `u-flexShrinkX` - Specify how much the flex item will shrink relatively
+
+`X` can be any of the following numbers: `0`, `1`, `2`, `3`, `4`, `5`.
+
+**`flex-basis`**
+
+Used to override other utilities and tweak [how space is
+distributed](https://www.w3.org/TR/css-flexbox-1/images/rel-vs-abs-flex.svg).
+
+* `u-flexBasisAuto`
+* `u-flexBasis0`
+
+**`flex` shorthand**
+
+* `u-flexInitial` - Sizes the item based on the width/height properties
+* `u-flexAuto` - Sizes the item based on the width/height properties, but makes
+  them fully flexible, so that they absorb any free space along the main axis.
+* `u-flexNone` - Sizes the item according to the width/height properties, but
+  makes the flex item fully inflexible. Similar to initial, except that flex
+  items are not allowed to shrink, even in overflow situations.
+
 **Aligning with `auto` margins**
 
 * `u-flexExpand` - Expand all margins to fill remaining space
@@ -160,6 +183,25 @@ Note: The `Grid` component already sets `display: flex` on the root element.
 
 Please refer to the README for [SUIT CSS utils](https://github.com/suitcss/utils/)
 
+## Setting `flex-shrink` in IE10
+
+In IE10 it is required to [explicitly set `flex-shrink` on flex
+items](https://github.com/philipwalton/flexbugs#6-the-default-flex-value-has-changed),
+or use the longhand `flex` declaration.
+
+In prior versions of `utils-flex` this was set automatically on all flex items.
+Due to issues with specificity this has been removed.
+
+Should you need to apply the fix for IE10 then add a `u-flexShrink` class
+manually:
+
+```html
+<div class="u-flex u-flexNoWrap">
+  <div class="FlexItem u-flexShrink1">Content</div>
+  <div class="FlexItem u-flexShrink1">Content</div>
+</div>
+```
+
 ## Testing
 
 Install [Node](http://nodejs.org) (comes with npm).

lib/flex-lg.css

@@ -140,17 +140,6 @@
     align-content: space-around !important;
   }
 
-  /**
-   * 1. Set the flex-shrink default explicitly to fix IE10 - http://git.io/vllC7
-   */
-
-  /* postcss-bem-linter: ignore */
-
-  .u-lg-flex > *,
-  .u-lg-flexInline > * {
-    flex-shrink: 1; /* 1 */
-  }
-
   /* Applies to flex items
      ======================================================================== */
 
@@ -231,6 +220,35 @@
     flex: 5 1 0% !important;
   }
 
+  /**
+   * Specify the flex shrink factor, which determines how much the flex item
+   * will shrink relative to the rest of the flex items in the flex container.
+   */
+
+  .u-lg-flexShrink0 {
+    flex-shrink: 0 !important;
+  }
+
+  .u-lg-flexShrink1 {
+    flex-shrink: 1 !important;
+  }
+
+  .u-lg-flexShrink2 {
+    flex-shrink: 2 !important;
+  }
+
+  .u-lg-flexShrink3 {
+    flex-shrink: 3 !important;
+  }
+
+  .u-lg-flexShrink4 {
+    flex-shrink: 4 !important;
+  }
+
+  .u-lg-flexShrink5 {
+    flex-shrink: 5 !important;
+  }
+
   /**
    * Aligning with `auto` margins
    * http://www.w3.org/TR/css-flexbox-1/#auto-margins
@@ -256,5 +274,56 @@
     margin-bottom: auto !important;
   }
 
-}
+  /**
+   * Basis
+   */
+
+  .u-lg-flexBasisAuto {
+    flex-basis: auto !important;
+  }
+
+  .u-lg-flexBasis0 {
+    flex-basis: 0 !important;
+  }
+
+  /*
+   * Shorthand
+   *
+   * Declares all values instead of keywords like 'initial' to work around IE10
+   * https://www.w3.org/TR/css-flexbox-1/#flex-common
+   *
+   * 1. Fixes issue in IE 10 where flex-basis is ignored - https://git.io/vllMt
+   *    This ensures it overrides flex-basis set in other utilities.
+   */
+
+  /*
+   * Sizes the item based on the width/height properties
+   */
 
+  .u-lg-flexInitial {
+    flex: 0 1 auto !important;
+    flex-basis: auto !important; /* 1 */
+  }
+
+  /*
+   * Sizes the item based on the width/height properties, but makes them fully
+   * flexible, so that they absorb any free space along the main axis.
+   */
+
+  .u-lg-flexAuto {
+    flex: 1 1 auto !important;
+    flex-basis: auto !important; /* 1 */
+  }
+
+  /*
+   * Sizes the item according to the width/height properties, but makes the flex
+   * item fully inflexible. Similar to initial, except that flex items are
+   * not allowed to shrink, even in overflow situations.
+   */
+
+  .u-lg-flexNone {
+    flex: 0 0 auto !important;
+    flex-basis: auto !important; /* 1 */
+  }
+
+}

lib/flex-md.css

@@ -140,17 +140,6 @@
     align-content: space-around !important;
   }
 
-  /**
-   * 1. Set the flex-shrink default explicitly to fix IE10 - http://git.io/vllC7
-   */
-
-  /* postcss-bem-linter: ignore */
-
-  .u-md-flex > *,
-  .u-md-flexInline > * {
-    flex-shrink: 1; /* 1 */
-  }
-
   /* Applies to flex items
      ======================================================================== */
 
@@ -231,6 +220,35 @@
     flex: 5 1 0% !important;
   }
 
+  /**
+   * Specify the flex shrink factor, which determines how much the flex item
+   * will shrink relative to the rest of the flex items in the flex container.
+   */
+
+  .u-md-flexShrink0 {
+    flex-shrink: 0 !important;
+  }
+
+  .u-md-flexShrink1 {
+    flex-shrink: 1 !important;
+  }
+
+  .u-md-flexShrink2 {
+    flex-shrink: 2 !important;
+  }
+
+  .u-md-flexShrink3 {
+    flex-shrink: 3 !important;
+  }
+
+  .u-md-flexShrink4 {
+    flex-shrink: 4 !important;
+  }
+
+  .u-md-flexShrink5 {
+    flex-shrink: 5 !important;
+  }
+
   /**
    * Aligning with `auto` margins
    * http://www.w3.org/TR/css-flexbox-1/#auto-margins
@@ -256,4 +274,56 @@
     margin-bottom: auto !important;
   }
 
+  /**
+   * Basis
+   */
+
+  .u-md-flexBasisAuto {
+    flex-basis: auto !important;
+  }
+
+  .u-md-flexBasis0 {
+    flex-basis: 0 !important;
+  }
+
+  /*
+   * Shorthand
+   *
+   * Declares all values instead of keywords like 'initial' to work around IE10
+   * https://www.w3.org/TR/css-flexbox-1/#flex-common
+   *
+   * 1. Fixes issue in IE 10 where flex-basis is ignored - https://git.io/vllMt
+   *    This ensures it overrides flex-basis set in other utilities.
+   */
+
+  /*
+   * Sizes the item based on the width/height properties
+   */
+
+  .u-md-flexInitial {
+    flex: 0 1 auto !important;
+    flex-basis: auto !important; /* 1 */
+  }
+
+  /*
+   * Sizes the item based on the width/height properties, but makes them fully
+   * flexible, so that they absorb any free space along the main axis.
+   */
+
+  .u-md-flexAuto {
+    flex: 1 1 auto !important;
+    flex-basis: auto !important; /* 1 */
+  }
+
+  /*
+   * Sizes the item according to the width/height properties, but makes the flex
+   * item fully inflexible. Similar to initial, except that flex items are
+   * not allowed to shrink, even in overflow situations.
+   */
+
+  .u-md-flexNone {
+    flex: 0 0 auto !important;
+    flex-basis: auto !important; /* 1 */
+  }
+
 }