Add flex-grid size modifier

Add `flex-grid-size` to modify the size of a flex-grid column. It
allows to define responsive behaviors in a semantic sass.

For exemple:
```
.layout {
  @include flex-grid-row;

  // Mobile: menu above the content
  &__col-menu { @include flex-grid-column(12); }
  &__col-content { @include flex-grid-column(12); }

  // Desktop: menu on the left of the content
  @include breakpoint(medium) {
    &__col-menu { @include flex-grid-size(4); }
    &__col-content { @include flex-grid-size(8); }
  }
}
```

diff --git a/scss/grid/_flex-grid.scss b/scss/grid/_flex-grid.scss
index 1dcf34e8b1537a98fadb9414abd87a2d1edb06bb..775fa03244f635eeffe695a597431209bdae1221 100644 (file)
--- a/scss/grid/_flex-grid.scss
+++ b/scss/grid/_flex-grid.scss
@@ -77,7 +77,7 @@
   $gutter: $grid-column-gutter
 ) {
   // Base properties
-  flex: flex-grid-column($columns);
+  @include flex-grid-size($columns);
 
   // Gutters
   @if type-of($gutter) == 'map' {
@@ -95,11 +95,6 @@
     padding-left: $padding;
     padding-right: $padding;
   }
-
-  // max-width fixes IE 10/11 not respecting the flex-basis property
-  @if $columns != null and $columns != shrink {
-    max-width: grid-column($columns);
-  }
 }
 
 /// Creates a block grid for a flex grid row.
@@ -120,6 +115,17 @@
   }
 }
 
+/// Changes the width flex grid column.
+/// @param {Mixed} $columns [null] - Width of the column. Refer to the `flex-grid-column()` function to see possible values.
+@mixin flex-grid-size($columns: null) {
+  flex: flex-grid-column($columns);
+
+  // max-width fixes IE 10/11 not respecting the flex-basis property
+  @if $columns != null and $columns != shrink {
+    max-width: grid-column($columns);
+  }
+}
+
 /// Changes the source order of a flex grid column. Columns with lower numbers appear first in the layout.
 /// @param {Number} $order [0] - Order number to apply.
 @mixin flex-grid-order($order: 0) {