Changing css workflow from grunt-autoprefixer to grunt-postcss::requi…

…re(autoprefixer,nanocss)

Gruntfile.js

@@ -38,32 +38,19 @@ module.exports = function(grunt) {
       }
     },
 
-
-    /* AUTOPREFIXER
+    /* POSTCSS - autoprefixer & cssnano
       ================================================================= */
-    autoprefixer: {
+    postcss: {
       options: {
-        browsers: ['last 2 version']
+        processors: [
+          require('autoprefixer')({browsers: 'last 2 versions'}),
+          require('cssnano')()
+        ]
       },
       css: {
         files: {
-          "dist/gridlex.css": "dist/gridlex.css",
-          "dist/demo/demo.css": "dist/demo/demo.css"
-        }
-      }
-    },
-
-
-    /* CSS MINIFY
-     ================================================================= */
-    cssmin: {
-      options: {
-        shorthandCompacting: false,
-        roundingPrecision: -1
-      },
-      target: {
-        files:{
-            "dist/gridlex.min.css": "dist/gridlex.css"
+          "dist/gridlex.min.css": "dist/gridlex.css",
+          "dist/demo/demo.min.css": "dist/demo/demo.css"
         }
       }
     },
@@ -77,7 +64,8 @@ module.exports = function(grunt) {
         //, livereload: true
       },
       less: {
-        files: 'src/**/*.less',
+        files: '**/*.less',
+        //files: '**/*.scss',
         tasks: ['compile']
       }
     }
@@ -87,8 +75,8 @@ module.exports = function(grunt) {
 
   /* GRUNT TASKS
   ================================================================= */
-  grunt.registerTask('default', ['mincss']);
-  grunt.registerTask('compile', ['less', 'autoprefixer', 'cssmin']);
-  //grunt.registerTask('compile', ['sass', 'autoprefixer', 'cssmin']);
+  grunt.registerTask('default', ['compile']);
+  grunt.registerTask('compile', ['less', 'postcss']);
+  //grunt.registerTask('compile', ['sass', 'postcss']); // uncomment for Sass compilation
 
 };

README.md

@@ -15,7 +15,7 @@ The concept is simple: you need to wrap your `.col` in a `.grid`.
 
 **I just wanna use it in my page!**
 
-To use Gridlex out of the box, call the gridlex.css or gridlex.min.css file in your project :
+To use Gridlex out of the box, call the gridlex.min.css file in your project :
 ```html
 <link rel="stylesheet" href="gridlex.min.css">
 ```

dist/cards.html

@@ -12,7 +12,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="demo/normalize.css">
     <link rel="stylesheet" href="gridlex.min.css">
-    <link rel="stylesheet" href="demo/demo.css">
+    <link rel="stylesheet" href="demo/demo.min.css">
     <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel='stylesheet' type='text/css'>
     <link rel="stylesheet prefetch" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
     <link rel="apple-touch-icon" sizes="57x57" href="fav/apple-touch-icon-57x57.png">

dist/demo/demo.css

@@ -41,18 +41,12 @@
   right: 0;
   z-index: -1;
   bottom: 0;
-  -webkit-transform: skewY(4deg);
-          transform: skewY(4deg);
-  -webkit-transform-origin: 0%;
-          transform-origin: 0%;
+  transform: skewY(4deg);
+  transform-origin: 0%;
 }
 .header h1 {
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
   display: inline-flex;
-  -webkit-align-items: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   font-size: 3rem;
   border-bottom: 10px solid #fff;
   border-top: 10px solid #fff;
@@ -64,8 +58,6 @@
 .header h1:before {
   content: '';
   position: relative;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
   display: inline-flex;
   vertical-align: middle;
   margin-right: 5px;
@@ -91,14 +83,10 @@ section {
 }
 section:before {
   content: '';
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
   display: inline-flex;
   border: 1px solid steelblue;
   width: 100%;
-  -webkit-align-items: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
+  align-items: stretch;
   position: absolute;
   bottom: 20px;
 }