Merge pull request #6 from hemlok/feature/2.0

fix issues

Author: Adam

flex-attributes.css

@@ -392,6 +392,11 @@
   -ms-flex-line-pack: distribute;
   align-content: space-around;
 }
+[grow] {
+  -webkit-flex-grow: 1;
+  -ms-flex-grow: 1;
+  flex-grow: 1;
+}
 [grow="0"] {
   -webkit-flex-grow: 0;
   -ms-flex-grow: 0;
@@ -447,6 +452,11 @@
   -ms-flex-grow: 10;
   flex-grow: 10;
 }
+[shrink] {
+  -webkit-flex-shrink: 1;
+  -ms-flex-shrink: 1;
+  flex-shrink: 1;
+}
 [shrink="0"] {
   -webkit-flex-shrink: 0;
   -ms-flex-shrink: 0;
@@ -502,10 +512,113 @@
   -ms-flex-shrink: 10;
   flex-shrink: 10;
 }
-[flex][row] {
+[flex][row] [grid-1] {
+  -webkit-flex-basis: 8%;
+  -ms-flex-basis: 8%;
+  flex-basis: 8%;
+  -webkit-flex-grow: 1;
+  -ms-flex-grow: 1;
+  flex-grow: 1;
+  box-sizing: border-box;
+}
+[flex][row] [grid-2] {
+  -webkit-flex-basis: 16%;
+  -ms-flex-basis: 16%;
+  flex-basis: 16%;
+  -webkit-flex-grow: 1;
+  -ms-flex-grow: 1;
+  flex-grow: 1;
+  box-sizing: border-box;
+}
+[flex][row] [grid-3] {
+  -webkit-flex-basis: 25%;
+  -ms-flex-basis: 25%;
+  flex-basis: 25%;
+  -webkit-flex-grow: 1;
+  -ms-flex-grow: 1;
+  flex-grow: 1;
+  box-sizing: border-box;
+}
+[flex][row] [grid-4] {
+  -webkit-flex-basis: 33%;
+  -ms-flex-basis: 33%;
+  flex-basis: 33%;
+  -webkit-flex-grow: 1;
+  -ms-flex-grow: 1;
+  flex-grow: 1;
+  box-sizing: border-box;
+}
+[flex][row] [grid-5] {
+  -webkit-flex-basis: 41%;
+  -ms-flex-basis: 41%;
+  flex-basis: 41%;
+  -webkit-flex-grow: 1;
+  -ms-flex-grow: 1;
+  flex-grow: 1;
+  box-sizing: border-box;
+}
+[flex][row] [grid-6] {
+  -webkit-flex-basis: 50%;
+  -ms-flex-basis: 50%;
+  flex-basis: 50%;
+  -webkit-flex-grow: 1;
+  -ms-flex-grow: 1;
+  flex-grow: 1;
+  box-sizing: border-box;
+}
+[flex][row] [grid-7] {
+  -webkit-flex-basis: 58%;
+  -ms-flex-basis: 58%;
+  flex-basis: 58%;
+  -webkit-flex-grow: 1;
+  -ms-flex-grow: 1;
+  flex-grow: 1;
+  box-sizing: border-box;
+}
+[flex][row] [grid-8] {
+  -webkit-flex-basis: 66%;
+  -ms-flex-basis: 66%;
+  flex-basis: 66%;
+  -webkit-flex-grow: 1;
+  -ms-flex-grow: 1;
+  flex-grow: 1;
+  box-sizing: border-box;
+}
+[flex][row] [grid-9] {
+  -webkit-flex-basis: 75%;
+  -ms-flex-basis: 75%;
+  flex-basis: 75%;
+  -webkit-flex-grow: 1;
+  -ms-flex-grow: 1;
+  flex-grow: 1;
+  box-sizing: border-box;
+}
+[flex][row] [grid-10] {
+  -webkit-flex-basis: 83%;
+  -ms-flex-basis: 83%;
+  flex-basis: 83%;
+  -webkit-flex-grow: 1;
+  -ms-flex-grow: 1;
+  flex-grow: 1;
+  box-sizing: border-box;
+}
+[flex][row] [grid-11] {
+  -webkit-flex-basis: 91%;
+  -ms-flex-basis: 91%;
+  flex-basis: 91%;
+  -webkit-flex-grow: 1;
+  -ms-flex-grow: 1;
+  flex-grow: 1;
+  box-sizing: border-box;
+}
+[flex][row] [grid-12] {
   -webkit-flex-basis: 100%;
   -ms-flex-basis: 100%;
   flex-basis: 100%;
+  -webkit-flex-grow: 1;
+  -ms-flex-grow: 1;
+  flex-grow: 1;
+  box-sizing: border-box;
 }
 @media screen and (min-width: 0) {
   [flex][row] [grid-xs-1] {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flex-attributes",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "A css library that allows you to compose mobile first, adaptive flexbox layouts and grids with attributes.",
   "main": "flex-attributes.css",
   "keywords": [

src/grid.styl

@@ -7,7 +7,12 @@ $rows = range($min-rows, $max-rows)
 
 // Breakpoints
 [flex][row]
-  flex-basis(100%)
+
+  for $num in $rows
+    [grid-{$num}]
+      flex-basis(floor(percentage($num/$max-rows)))
+      flex-grow(1)
+      box-sizing border-box
 
   for $num in $rows
     for $size, $breakpoint in $sizes

src/layout.styl

@@ -46,10 +46,16 @@ for $prop in $primary-axis
   [align=\"{$prop}\"]
     align-content($prop)
 
+[grow]
+  flex-grow(1)
+
 for $num in range(0,10)
   [grow=\"{$num}\"]
     flex-grow($num)
 
+[shrink]
+  flex-shrink(1)
+
 for $num in range(0,10)
   [shrink=\"{$num}\"]
     flex-shrink($num)