Add Postcss, remove < ie 8 hacks and other fixes

Gruntfile.js

@@ -104,6 +104,26 @@ grunt.initConfig({
         }
     },
 
+    // -- PostCSS Config --------------------------------------------------------
+
+    postcss: {
+        options: {
+            processors: [
+                require('autoprefixer')({
+                    browsers: [
+                        'last 2 versions',
+                        'ie >= 8',
+                        'iOS >= 6',
+                        'Android >= 4'
+                    ]
+                })
+            ]
+        },
+        dist: {
+            src: 'build/*.css'
+        }
+    },
+
     // -- CSSLint Config -------------------------------------------------------
 
     csslint: {
@@ -258,6 +278,7 @@ grunt.loadNpmTasks('grunt-contrib-cssmin');
 grunt.loadNpmTasks('grunt-contrib-compress');
 grunt.loadNpmTasks('grunt-contrib-watch');
 grunt.loadNpmTasks('grunt-css-selectors');
+grunt.loadNpmTasks('grunt-postcss');
 grunt.loadNpmTasks('grunt-pure-grids');
 grunt.loadNpmTasks('grunt-stripmq');
 
@@ -275,6 +296,7 @@ grunt.registerTask('build', [
     'concat:build',
     'clean:build_res',
     'css_selectors:base',
+    'postcss',
     'cssmin',
     'license'
 ]);

package.json

@@ -11,6 +11,7 @@
   },
   "files": "build/",
   "devDependencies": {
+    "autoprefixer": "^6.3.1",
     "bower": "^1.3.7",
     "grunt": "^1.0.1",
     "grunt-cli": "^1.2.0",
@@ -22,6 +23,7 @@
     "grunt-contrib-cssmin": "^1.0.2",
     "grunt-contrib-watch": "^1.0.0",
     "grunt-css-selectors": "^1.1.0",
+    "grunt-postcss": "^0.7.1",
     "grunt-pure-grids": "^1.0.0",
     "grunt-stripmq": "0.0.6"
   },

src/buttons/css/buttons-core.css

@@ -1,19 +1,13 @@
 .pure-button {
     /* Structure */
     display: inline-block;
-    zoom: 1;
     line-height: normal;
     white-space: nowrap;
     vertical-align: middle;
     text-align: center;
     cursor: pointer;
     -webkit-user-drag: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
     box-sizing: border-box;
 }
 

src/buttons/css/buttons.css

@@ -17,21 +17,19 @@
 .pure-button:hover,
 .pure-button:focus {
     /* csslint ignore:start */
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000',GradientType=0);
+    filter: alpha(opacity=90);
     /* csslint ignore:end */
-    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0,0,0, 0.05)), to(rgba(0,0,0, 0.10)));
-    background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
-    background-image: -moz-linear-gradient(top, rgba(0,0,0, 0.05) 0%, rgba(0,0,0, 0.10));
-    background-image: -o-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
-    background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10));
+    -khtml-opacity: 0.90;
+    -moz-opacity: 0.90;
+    opacity: 0.90;
 }
 .pure-button:focus {
     outline: 0;
 }
 .pure-button-active,
 .pure-button:active {
     box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset;
-    border-color: #000\9;
+    border-color: #000;
 }
 
 .pure-button[disabled],
@@ -42,7 +40,6 @@
     border: none;
     background-image: none;
     /* csslint ignore:start */
-    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
     filter: alpha(opacity=40);
     /* csslint ignore:end */
     -khtml-opacity: 0.40;

src/forms/css/forms.css

@@ -28,8 +28,6 @@ so we can ignore the csslint warning.
     box-shadow: inset 0 1px 3px #ddd;
     border-radius: 4px;
     vertical-align: middle;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
     box-sizing: border-box;
 }
 
@@ -43,8 +41,6 @@ since IE8 won't execute CSS that contains a CSS3 selector.
     border: 1px solid #ccc;
     box-shadow: inset 0 1px 3px #ddd;
     border-radius: 4px;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
     box-sizing: border-box;
 }
 
@@ -209,8 +205,6 @@ since IE8 won't execute CSS that contains a CSS3 selector.
 .pure-form-aligned .pure-help-inline,
 .pure-form-message-inline {
     display: inline-block;
-    *display: inline;
-    *zoom: 1;
     vertical-align: middle;
 }
 .pure-form-aligned textarea {

src/grids/css/grids-core.css

@@ -2,8 +2,6 @@
 
 .pure-g {
     letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
-    *letter-spacing: normal; /* reset IE < 8 */
-    *word-spacing: -0.43em; /* IE < 8: collapse white-space between units */
     text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */
 
     /*
@@ -26,24 +24,22 @@
 
     /*
     Use flexbox when possible to avoid `letter-spacing` side-effects.
-
-    NOTE: Firefox (as of 25) does not currently support flex-wrap, so the
-    `-moz-` prefix version is omitted.
     */
 
-    display: -webkit-flex;
-    -webkit-flex-flow: row wrap;
+    display: flex;
+    flex-flow: row wrap;
 
-    /* IE10 uses display: flexbox */
-    display: -ms-flexbox;
-    -ms-flex-flow: row wrap;
-
     /* Prevents distributing space between rows */
-    -ms-align-content: flex-start;
-	-webkit-align-content: flex-start;
 	align-content: flex-start;
 }
 
+/* IE10 display: -ms-flexbox (and display: flex in IE 11) does not work inside a table; fall back to block and rely on font hack */
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+    table .pure-g {
+        display: block;
+    }
+}
+
 /* Opera as of 12 on Windows needs word-spacing.
    The ".opera-only" selector is used to prevent actual prefocus styling
    and is not required in markup.
@@ -55,8 +51,6 @@
 
 .pure-u {
     display: inline-block;
-    *display: inline; /* IE < 8: fake inline-block */
-    zoom: 1;
     letter-spacing: normal;
     word-spacing: normal;
     vertical-align: top;

src/menus/css/menus-core.css

@@ -1,7 +1,5 @@
 /*csslint adjoining-classes: false, box-model:false*/
 .pure-menu {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
     box-sizing: border-box;
 }
 

src/tables/css/tables.css

@@ -30,7 +30,8 @@ there's a rowspan on the first cell. Case added to the tests. issue#432 */
     border-left-width: 0;
 }
 
-.pure-table thead {
+.pure-table thead,
+.pure-table tfoot {
     background-color: #e0e0e0;
     color: #000;
     text-align: left;