Add flex-basis to columns

_flexgrid.sass

@@ -69,6 +69,10 @@ $screen-lg-min: 1200px !default
   @if $type == width and $index > 0
     .col-#{$class}-#{$index}
       width: percentage($index / $grid-columns)
+      -webkit-flex-basis: percentage($index / $grid-columns)
+      -moz-flex-basis: percentage($index / $grid-columns)
+      -ms-flex-basis: percentage($index / $grid-columns)
+      flex-basis: percentage($index / $grid-columns)
   @if $reorder
     @if $type == push and $index > 0
       \:root:not(.flexbox):not(.webkitbox)

_flexgrid.scss

@@ -0,0 +1,231 @@
+/*! ptb2.me/flexgrid | (c) 2014 Peter T Bosse II | Apache license */
+/*! Inspired by Bootstrap 3.2 | License: http://bit.ly/WzvaP8 */
+
+// box-sizing supported by: <http://bit.ly/HM42F3>
+//   Chrome, IE 8+, Firefox (-moz), Safari 5.1+, Opera
+//   iOS <= 4 & Android <= 2.3 (-webkit), Firefox (-moz)
+
+// :before and :after pseudo-elements supported by:
+//   Chrome, IE 8+, Firefox, Safari, Opera 4.0+:
+// ::before and ::after pseudo-elements supported by:
+//   Chrome, IE 9+, Firefox, Safari, Opera 7.0+:
+// <http://mzl.la/Q5hf09> <bit.ly/YCpGPd> <bit.ly/XV046x>
+
+// XHTML supported by IE 9+ and all other browsers
+
+// media queries supported by: <http://mzl.la/Ykdnuw>
+//   Chrome, IE 9+, Firefox, Safari 1.3+, Opera 9.2+
+
+// :root CSS selector supported by: <http://mzl.la/1vvPJgA>
+//   Chrome, IE 9+, Firefox, Safari, Opera 9.5+
+
+// flexible box layout supported by: <http://bit.ly/e4JYg3>
+//   Chrome, IE 10+, Firefox, Safari, Opera 12.1+
+
+// FYI: Bootstrap 3 drops support for IE 7: <bit.ly/QlWhvD>
+// FYI: jQuery 2.0 drops support for IE 8: <bit.ly/QQ0Cme>
+// FYI: Google has dropped support for IE 9: <bit.ly/z6LWk0>
+
+//* Variable Definitions **//
+
+$grid-columns: 12 !default;
+$grid-gutter-width: 30px !default;
+$reorder: false !default;
+
+$container-sm: 720px + $grid-gutter-width !default;
+$container-md: 940px + $grid-gutter-width !default;
+$container-lg: 1140px + $grid-gutter-width !default;
+
+$screen-sm-min: 768px !default;
+$screen-md-min: 992px !default;
+$screen-lg-min: 1200px !default;
+
+//* Mixin Directive Declarations **//
+
+@mixin box-sizing($boxmodel) {
+  -webkit-box-sizing: $boxmodel;
+  -moz-box-sizing: $boxmodel;
+  box-sizing: $boxmodel;
+}
+
+@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") {
+  @for $i from 1 + 1 through $grid-columns {
+    $list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
+  }
+  #{$list} {
+    position: relative;
+    min-height: 1px;
+    padding-left: $grid-gutter-width / 2;
+    padding-right: $grid-gutter-width / 2;
+  }
+}
+
+@mixin float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}") {
+  @for $i from 1 + 1 through $grid-columns {
+    $list: "#{$list}, .col-#{$class}-#{$i}";
+  }
+  :root:not(.flexbox):not(.webkitbox) {
+    & #{$list} {
+      float: left;
+    }
+  }
+}
+
+@mixin calc-grid-column($index, $class, $type) {
+  @if $type == width and $index > 0 {
+    .col-#{$class}-#{$index} {
+      width: percentage($index / $grid-columns);
+      -webkit-flex-basis: percentage($index / $grid-columns);
+      -moz-flex-basis: percentage($index / $grid-columns);
+      -ms-flex-basis: percentage($index / $grid-columns);
+      flex-basis: percentage($index / $grid-columns);
+    }
+  }
+  @if $reorder {
+    @if $type == push and $index > 0 {
+      :root:not(.flexbox):not(.webkitbox) {
+        & .col-#{$class}-push-#{$index} {
+          left: percentage($index / $grid-columns);
+        }
+      }
+      @if $index < $grid-columns {
+        :root.flexbox, :root.webkitbox {
+          & .col-#{$class}-push-#{$index} {
+            @include order-flex($index + 1);
+          }
+        }
+      }
+    }
+    @if $type == push and $index == 0 {
+      :root:not(.flexbox):not(.webkitbox) {
+        & .col-#{$class}-push-0 {
+          left: auto;
+        }
+      }
+      :root.flexbox, :root.webkitbox {
+        & .col-#{$class}-push-0 {
+          @include order-flex($index + 1);
+        }
+      }
+    }
+    @if $type == pull and $index > 0 {
+      :root:not(.flexbox):not(.webkitbox) {
+        & .col-#{$class}-pull-#{$index} {
+          right: percentage($index / $grid-columns);
+        }
+      }
+      @if $index < $grid-columns {
+        :root.flexbox, :root.webkitbox {
+          & .col-#{$class}-pull-#{$index} {
+            @include order-flex($grid-columns - $index);
+          }
+        }
+      }
+    }
+    @if $type == pull and $index == 0 {
+      :root:not(.flexbox):not(.webkitbox) {
+        & .col-#{$class}-pull-0 {
+          right: auto;
+        }
+      }
+      :root.flexbox, :root.webkitbox {
+        & .col-#{$class}-pull-0 {
+          @include order-flex($grid-columns);
+        }
+      }
+    }
+  }
+  @if $type == offset {
+    .col-#{$class}-offset-#{$index} {
+      margin-left: percentage($index / $grid-columns);
+    }
+  }
+}
+
+@mixin loop-grid-columns($columns, $class, $type) {
+  @for $i from 0 through $columns {
+    @include calc-grid-column($i, $class, $type);
+  }
+}
+
+@mixin make-grid($class) {
+  @include float-grid-columns($class);
+  @include loop-grid-columns($grid-columns, $class, width);
+  @include loop-grid-columns($grid-columns, $class, pull);
+  @include loop-grid-columns($grid-columns, $class, push);
+  @include loop-grid-columns($grid-columns, $class, offset);
+}
+
+@mixin order-flex($i) {
+  -webkit-box-ordinal-group: $i;
+  -ms-flex-order: $i;
+  -webkit-order: $i;
+  order: $i;
+}
+
+//* Placeholder Selector Declarations **//
+
+%boxsizing {
+  @include box-sizing(border-box);
+}
+
+%clearfix {
+  &::before, &::after {
+    content: " ";
+    display: table;
+  }
+  &::after {
+    clear: both;
+  }
+}
+
+//* Class Selector Declarations **//
+
+*, *::before, *::after {
+  @extend %boxsizing;
+}
+
+.container, .container-fluid {
+  margin-right: auto;
+  margin-left: auto;
+  padding-left: $grid-gutter-width / 2;
+  padding-right: $grid-gutter-width / 2;
+  @extend %clearfix;
+}
+
+.row {
+  margin-left: $grid-gutter-width / -2;
+  margin-right: $grid-gutter-width / -2;
+  @extend %clearfix;
+  :root.flexbox &, :root.webkitbox & {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+  }
+}
+
+@include make-grid-columns;
+
+@include make-grid(xs);
+
+@media (min-width: $screen-sm-min) {
+  .container {
+    width: $container-sm;
+  }
+  @include make-grid(sm);
+}
+
+@media (min-width: $screen-md-min) {
+  .container {
+    width: $container-md;
+  }
+  @include make-grid(md);
+}
+
+@media (min-width: $screen-lg-min) {
+  .container {
+    width: $container-lg;
+  }
+  @include make-grid(lg);
+}

flexgrid-ie.scss

@@ -0,0 +1,54 @@
+/*! ptb2.me/flexgrid | (c) 2014 Peter T Bosse II | Apache license */
+/*! Inspired by Bootstrap 3.2 | License: http://bit.ly/WzvaP8 */
+
+$fixed-grid-width: 750px !default;
+$grid-gutter-width: 30px !default;
+$grid-columns: 12 !default;
+
+// Rename these classes if you don't need Bootstrap compatibility
+$container: "container" !default;
+$row: "row" !default;
+$span: "col-sm-" !default;
+$offset: "col-sm-offset-" !default;
+
+@mixin fixed-grid-widths($num-columns) {
+  $i: 1;
+  @while $i <= $num-columns {
+    .#{$span}#{$i} {
+      *width: $fixed-grid-width / $num-columns * $i - $grid-gutter-width;
+    }
+    @if $i < $num-columns {
+      .#{$offset}#{$i} {
+        *margin-left: $fixed-grid-width / $num-columns * $i;
+      }
+    }
+    $i: $i + 1;
+  }
+}
+
+@mixin span-x($num-columns) {
+  $i: 1;
+  @while $i <= $num-columns {
+    .#{$span}#{$i} {
+      @extend %span;
+    }
+    $i: $i + 1;
+  }
+}
+
+.#{$container} {
+  *width: $fixed-grid-width;
+}
+
+.#{$row} {
+  *zoom: 1;
+}
+
+%span {
+  *display: inline;
+  *float: left;
+}
+
+@include span-x($grid-columns);
+
+@include fixed-grid-widths($grid-columns);

flexgrid-reorder.scss

@@ -0,0 +1,3 @@
+$reorder: true;
+
+@import "_flexgrid.scss";

flexgrid.scss

@@ -0,0 +1,3 @@
+$reorder: false;
+
+@import "_flexgrid";