Use Autoprefixer for prefixing

startae · Oct 8, 2014 · 2921098 · 2921098
1 parent 5c47c29
commit 2921098
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 64 deletions.
diff --git a/dist/fundament-grid.css b/dist/fundament-grid.css
@@ -13,18 +13,18 @@
   display: -ms-flexbox;
   display: flex;
   -webkit-flex-flow: row wrap;
-  -ms-flex-flow: row wrap;
-  flex-flow: row wrap;
+      -ms-flex-flow: row wrap;
+          flex-flow: row wrap;
   -webkit-flex: 1 1 100%;
-  -ms-flex: 1 1 100%;
-  flex: 1 1 100%;
+      -ms-flex: 1 1 100%;
+          flex: 1 1 100%;
   list-style: none;
   margin: 0;
   padding: 0;
   margin-left: -24px;
   letter-spacing: -.31em;
   font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; }
-  @supports not (flex-wrap: wrap) {
+  @supports not ((-webkit-flex-wrap: wrap) or (-ms-flex-wrap: wrap) or (flex-wrap: wrap)) {
     .grid {
       letter-spacing: -.31em;
       font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; } }
@@ -39,18 +39,16 @@
   display: -ms-flexbox;
   display: flex;
   -webkit-flex-flow: row wrap;
-  -ms-flex-flow: row wrap;
-  flex-flow: row wrap;
+      -ms-flex-flow: row wrap;
+          flex-flow: row wrap;
   padding-left: 24px;
   vertical-align: top;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
   box-sizing: border-box;
   width: 100%;
   letter-spacing: normal;
   word-spacing: normal;
   font-family: "Helvetica Neue", Arial, sans-serif; }
-  @supports not (flex-wrap: wrap) {
+  @supports not ((-webkit-flex-wrap: wrap) or (-ms-flex-wrap: wrap) or (flex-wrap: wrap)) {
     .grid-item {
       letter-spacing: normal;
       word-spacing: normal;
@@ -63,42 +61,42 @@
 .grid--rev {
   direction: rtl;
   -webkit-flex-flow: wrap-reverse row;
-  -ms-flex-flow: wrap-reverse row;
-  flex-flow: wrap-reverse row;
+      -ms-flex-flow: wrap-reverse row;
+          flex-flow: wrap-reverse row;
   text-align: left; }
 .grid-item--rev {
   direction: ltr;
   text-align: left; }
 .grid--center {
   -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   text-align: center; }
 .grid-item--center {
   text-align: left; }
 .grid--right {
   -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
   text-align: right; }
 .grid-item--right {
   text-align: left; }
 .grid--bottom {
   -webkit-align-items: flex-end;
-  -ms-flex-align: end;
-  align-items: flex-end; }
+      -ms-flex-align: end;
+          align-items: flex-end; }
 .grid-item--bottom {
   vertical-align: bottom; }
 .grid--middle {
   -webkit-align-items: center;
-  -ms-flex-align: center;
-  align-items: center; }
+      -ms-flex-align: center;
+          align-items: center; }
 .grid-item--middle {
   vertical-align: middle; }
 .grid--top {
   -webkit-align-items: flex-start;
-  -ms-align-items: flex-start;
-  align-items: flex-start; }
+      -ms-flex-align: start;
+          align-items: flex-start; }
 .grid-item--top {
   vertical-align: top; }
 .grid--wide {
@@ -111,17 +109,17 @@
   padding-left: 12px; }
 .grid--space-around {
   -webkit-justify-content: space-around;
-  -ms-justify-content: space-around;
-  justify-content: space-around; }
+      -ms-flex-pack: distribute;
+          justify-content: space-around; }
 .grid--space-between {
   -webkit-justify-content: space-between;
-  -ms-justify-content: space-between;
-  justify-content: space-between; }
+      -ms-flex-pack: justify;
+          justify-content: space-between; }
 .grid-item--even {
   width: auto;
   -webkit-flex: 1 1 auto;
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto; }
+      -ms-flex: 1 1 auto;
+          flex: 1 1 auto; }
 
 .one-whole {
   width: 100%; }

diff --git a/gulpfile.js b/gulpfile.js
@@ -11,6 +11,7 @@
 
 var gulp   = require("gulp"),
     rename = require("gulp-rename"),
+    prefix = require("gulp-autoprefixer"),
     sass   = require("gulp-ruby-sass");
 
 // * scss
@@ -25,6 +26,9 @@ var gulp   = require("gulp"),
 gulp.task("sass", function () {
   gulp.src("scss/fundament-grid.scss")
     .pipe(sass())
+    .pipe(prefix({
+        browsers: ["last 1 version", "Explorer >= 4.4"]
+    }))
     .pipe(rename("fundament-grid.css"))
     .pipe(gulp.dest("./dist"));
 });

diff --git a/package.json b/package.json
@@ -6,9 +6,11 @@
     "url": "https://github.com/felics/fundament.grid"
   },
   "dependencies": {
-    "gulp": "^3.8.7",
-    "gulp-plumber": "^0.6.4",
+    "gulp": "^3.8.8",
+    "gulp-autoprefixer": "^1.0.1",
+    "gulp-plumber": "^0.6.6",
     "gulp-rename": "^1.2.0",
-    "gulp-ruby-sass": "^0.7.1"
+    "gulp-ruby-sass": "^0.7.1",
+    "gulp-util": "^3.0.1"
   }
 }
diff --git a/scss/fundament-grid/_core.scss b/scss/fundament-grid/_core.scss
@@ -61,12 +61,8 @@ $fdmt-grid--item: fdmt-grid(settings, item);
 // * ---------------------
 
 @mixin fdmt-grid--flex-support(){
-    display: -webkit-flex;                             //* [1] */
-    display: -ms-flexbox;                              //* [1] */
     display: flex;                                     //* [1] */
-    -webkit-flex-flow: row wrap;                       //* [1] */
-        -ms-flex-flow: row wrap;                       //* [1] */
-            flex-flow: row wrap;                       //* [1] */
+    flex-flow: row wrap;                               //* [1] */
 }
 
 // * Grid Parent
@@ -82,9 +78,7 @@ $fdmt-grid--item: fdmt-grid(settings, item);
 #{$fdmt-grid--class-type}#{$fdmt-grid--namespace} {
     display: block;
     @include fdmt-grid--flex-support();
-    -webkit-flex: 1 1 100%;                      //* [1] */
-        -ms-flex: 1 1 100%;                      //* [1] */
-            flex: 1 1 100%;                      //* [1] */
+    flex: 1 1 100%;                              //* [1] */
     list-style: none;                            //* [2] */
     margin: 0;                                   //* [3] */
     padding: 0;                                  //* [3] */
@@ -125,9 +119,7 @@ $fdmt-grid--item: fdmt-grid(settings, item);
     @include fdmt-grid--flex-support();                //* [2] */
     padding-left: fdmt-grid(settings, gutter);         //* [3] */
     vertical-align: top;                               //* [4] */
-    -webkit-box-sizing: border-box;                    //* [5] */
-       -moz-box-sizing: border-box;                    //* [5] */
-            box-sizing: border-box;                    //* [5] */
+    box-sizing: border-box;                            //* [5] */
     @if(fdmt-grid(settings, mobile-first) == true) {   //* [6] */
         width: 100%;
     }

diff --git a/scss/fundament-grid/_modifiers.scss b/scss/fundament-grid/_modifiers.scss
@@ -42,8 +42,6 @@
         @if(fdmt-grid(modifiers, rev) == true) {
             &--rev {
                 direction: rtl;
-                -webkit-flex-flow: wrap-reverse row;
-                -ms-flex-flow: wrap-reverse row;
                 flex-flow: wrap-reverse row;
                 text-align: left;
             }
@@ -59,8 +57,6 @@
 
         @if(fdmt-grid(modifiers, center) == true) {
             &--center {
-                -webkit-justify-content: center;
-                -ms-flex-pack: center;
                 justify-content: center;
                 text-align: center;
             }
@@ -75,8 +71,6 @@
 
         @if(fdmt-grid(modifiers, right) == true) {
             &--right {
-                -webkit-justify-content: flex-end;
-                -ms-flex-pack: end;
                 justify-content: flex-end;
                 text-align: right;
             }
@@ -91,8 +85,6 @@
 
         @if(fdmt-grid(modifiers, bottom) == true) {
             &--bottom {
-                -webkit-align-items: flex-end;
-                -ms-flex-align: end;
                 align-items: flex-end;
             }
             &-#{$fdmt-grid--item}--bottom {
@@ -106,8 +98,6 @@
 
         @if(fdmt-grid(modifiers, middle) == true) {
             &--middle {
-                -webkit-align-items: center;
-                -ms-flex-align: center;
                 align-items: center;
             }
             &-#{$fdmt-grid--item}--middle {
@@ -121,9 +111,7 @@
 
         @if(fdmt-grid(modifiers, top) == true) {
             &--top {
-                -webkit-align-items: flex-start;
-                    -ms-align-items: flex-start;
-                        align-items: flex-start;
+                align-items: flex-start;
             }
             &-#{$fdmt-grid--item}--top {
                 vertical-align: top;
@@ -162,9 +150,7 @@
 
         @if(fdmt-grid(modifiers, space-around) == true) {
             &--space-around {
-                -webkit-justify-content: space-around;
-                    -ms-justify-content: space-around;
-                        justify-content: space-around;
+                justify-content: space-around;
             }
         }
 
@@ -174,9 +160,7 @@
 
         @if(fdmt-grid(modifiers, space-between) == true) {
             &--space-between {
-                -webkit-justify-content: space-between;
-                    -ms-justify-content: space-between;
-                        justify-content: space-between;
+                justify-content: space-between;
             }
         }
 
@@ -187,9 +171,7 @@
         @if(fdmt-grid(modifiers, even) == true) {
             &-#{$fdmt-grid--item}--even {
                 width: auto;
-                -webkit-flex: 1 1 auto;
-                    -ms-flex: 1 1 auto;
-                        flex: 1 1 auto;
+                flex: 1 1 auto;
             }
         }
     }