Merge pull request #304 from tilomitra/grids-responsive-old-ie

Add grids-responsive-old-ie.css

Author: ericf

Gruntfile.js

@@ -210,6 +210,18 @@ grunt.initConfig({
         }
     },
 
+    // -- Strip Media Queries Config -------------------------------------------
+
+    stripmq: {
+        all: {
+            files: {
+                //follows the pattern 'destination': ['source']
+                'build/grids-responsive-old-ie.css':
+                    ['build/grids-responsive.css']
+            }
+        }
+    },
+
     // -- CSS Selectors Config -------------------------------------------------
 
     css_selectors: {
@@ -249,6 +261,7 @@ grunt.loadNpmTasks('grunt-contrib-compress');
 grunt.loadNpmTasks('grunt-contrib-watch');
 grunt.loadNpmTasks('grunt-css-selectors');
 grunt.loadNpmTasks('grunt-pure-grids');
+grunt.loadNpmTasks('grunt-stripmq');
 
 // Local tasks.
 grunt.loadTasks('tasks/');
@@ -260,6 +273,7 @@ grunt.registerTask('build', [
     'clean:build',
     'copy:build',
     'pure_grids',
+    'stripmq',
     'concat:build',
     'clean:build_res',
     'css_selectors:base',

HISTORY.md

@@ -14,11 +14,16 @@ NEXT
 * __[!]__ Removed `.pure-g-r` from core, in favor of a mobile-first responsive
   grid system. ([#24][], [#267][])
 
-  To use the mobile-first grid system, you need to pull in `pure.css`, along with `grids-responsive.css`:
+  To use the mobile-first grid system, you need to pull in `pure.css`, along with `grids-responsive.css`. We also have a `grids-responsive-old-ie.css` that you can serve to IE < 9 users so that they can view a desktop-version of your website:
 
     ```html
     <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0-rc-1/pure-min.css">
-    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0-rc-1/grids-responsive-min.css">
+    <!--[if lt IE 9]>
+        <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0-rc-1/grids-responsive-old-ie-min.css">
+    <![endif]-->
+    <!--[if gt IE 8]><!-->
+        <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0-rc-1/grids-responsive-min.css">
+    <!--<![endif]-->
     ```
 
   Find out more about the new grid system at [http://purecss.io/grids/][Grids].

package.json

@@ -18,6 +18,7 @@
     "grunt-contrib-csslint": "~0.2.0",
     "grunt-contrib-watch": "~0.5.3",
     "grunt-css-selectors": "~1.0.0",
-    "grunt-pure-grids": "0.0.1"
+    "grunt-pure-grids": "0.0.1",
+    "grunt-stripmq": "0.0.3"
   }
 }

src/grids/tests/manual/responsive.html

@@ -7,7 +7,13 @@
 
     <link rel="stylesheet" href="../../../../build/base.css">
     <link rel="stylesheet" href="../../../../build/grids.css">
-    <link rel="stylesheet" href="../../../../build/grids-responsive.css">
+
+    <!--[if lt IE 9]>
+        <link rel="stylesheet" href="../../../../build/grids-responsive-old-ie.css">
+    <![endif]-->
+    <!--[if gt IE 8]><!-->
+        <link rel="stylesheet" href="../../../../build/grids-responsive.css">
+    <!--<![endif]-->
 
     <style>
         .content {