2.0.12 - add breakpoints for wrap

Author: adamseckel

flex-attributes.css

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

package.json

@@ -20,5 +20,5 @@ $rows = range($min-rows, $max-rows)
       [grid-{$size}-{$num}], [data-grid-{$size}-{$num}]
         flex-grow 1
         box-sizing border-box
-        @media screen and (max-width: $breakpoint)
+        @media screen and (min-width: $breakpoint)
           flex-basis floor(percentage($num/$max-rows))

src/grid.styl

@@ -25,18 +25,32 @@ $secondary-axis = center start end stretch baseline
     for $size, $breakpoint in $sizes
       &[{$direction}-{$size}],
       &[data-{$direction}-{$size}]
-        @media screen and (max-width: $breakpoint)
+        @media screen and (min-width: $breakpoint)
           display flex
           flex-direction $direction
 
   &[wrap],
   &[data-wrap]
     flex-wrap wrap
 
+  for $size, $breakpoint in $sizes
+    @media screen and (min-width: $breakpoint)
+      &[wrap-{$size}],
+      &[data-wrap-{$size}]
+        @media screen and (min-width: $breakpoint)
+          flex-wrap wrap
+
   &[wrap='reverse'],
   &[data-wrap='reverse']
     flex-wrap wrap-reverse
 
+  for $size, $breakpoint in $sizes
+    @media screen and (min-width: $breakpoint)
+      &[wrap-{$size}='reverse'],
+      &[data-wrap-{$size}='reverse']
+        @media screen and (min-width: $breakpoint)
+          flex-wrap wrap-reverse
+
   for $alignment in $primary-axis
     &[data-layout=\'{$alignment}\'],
     &[layout=\'{$alignment}\']