Merge pull request #267 from tilomitra/remove-responsive-grid

New Responsive Grids: Better Defaults, and Customizations via Tooling or Web UI

Author: tilomitra

Gruntfile.js

@@ -67,16 +67,11 @@ grunt.initConfig({
                     'build/forms-r.css'
                 ]},
 
-                {'build/grids-nr.css': [
+                {'build/grids.css': [
                     'build/grids-core.css',
                     'build/grids-units.css'
                 ]},
 
-                {'build/grids.css': [
-                    'build/grids-nr.css',
-                    'build/grids-r.css'
-                ]},
-
                 {'build/menus-nr.css': [
                     'build/menus-core.css',
                     'build/menus.css',
@@ -101,7 +96,7 @@ grunt.initConfig({
 
                 {'build/<%= pkg.name %>-nr.css': [
                     'build/base.css',
-                    'build/grids-nr.css',
+                    'build/grids.css',
                     'build/buttons.css',
                     'build/forms-nr.css',
                     'build/menus-nr.css',
@@ -199,6 +194,19 @@ grunt.initConfig({
             options: {
                 units: [5, 24]
             }
+        },
+
+        responsive: {
+            dest: 'build/grids-responsive.css',
+
+            options: {
+                mediaQueries: {
+                    sm: 'screen and (min-width: 35.5em)',   // 568px
+                    md: 'screen and (min-width: 48em)',     // 768px
+                    lg: 'screen and (min-width: 64em)',     // 1024px
+                    xl: 'screen and (min-width: 80em)'      // 1280px
+                }
+            }
         }
     },
 

HISTORY.md

@@ -4,9 +4,33 @@ Pure Change History
 NEXT
 ----
 
+### Base
+
+* Added the `.pure-img` class name for make images scale with the viewport in
+  fluid layouts.
+
+### Grids
+
+* __[!]__ 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`:
+
+    ```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">
+    ```
+
+  Find out more about the new grid system at [http://purecss.io/grids/][Grids].
+
+### Tables
+
 * Switched cell padding in Tables from `px` to `em` units, and also increased
   the amount of padding to `padding: 0.5em 1em`.
 
+[#24]: https://github.com/yui/pure/issues/24
+[#267]: https://github.com/yui/pure/pull/267
+[Grids]: http://purecss.io/grids/
 
 0.4.2 (2014-02-13)
 ------------------

src/base/css/base.css

@@ -15,3 +15,13 @@
 [hidden] {
     display: none !important;
 }
+
+/**
+ * Add this class to an image to make it fit within it's fluid parent wrapper while maintaining
+ * aspect ratio.
+ */
+.pure-img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+}

src/forms/tests/manual/forms.html

@@ -7,6 +7,7 @@
 
     <link rel="stylesheet" href="../../../../build/base.css">
     <link rel="stylesheet" href="../../../../build/grids.css">
+    <link rel="stylesheet" href="../../../../build/grids-responsive.css">
     <link rel="stylesheet" href="../../../../build/buttons.css">
     <link rel="stylesheet" href="../../../../build/forms.css">
 </head>
@@ -38,24 +39,24 @@ <h2>Multi-Column Form with Grids</h2>
         <fieldset>
             <legend>Legend</legend>
 
-            <div class="pure-g-r">
-                <div class="pure-u-1-3">
+            <div class="pure-g">
+                <div class="pure-u-1 pure-u-md-1-3">
                     <label>First Name</label>
                     <input type="text">
                 </div>
-                <div class="pure-u-1-3">
+                <div class="pure-u-1 pure-u-md-1-3">
                     <label>Password</label>
                     <input type="password">
                 </div>
-                <div class="pure-u-1-3">
+                <div class="pure-u-1 pure-u-md-1-3">
                     <label>E-Mail</label>
                     <input type="email" required>
                 </div>
-                <div class="pure-u-1-3">
+                <div class="pure-u-1 pure-u-md-1-3">
                     <label>City</label>
                     <input type="text">
                 </div>
-                <div class="pure-u-1-3">
+                <div class="pure-u-1 pure-u-md-1-3">
                     <label>State</label>
                     <select class="pure-input-medium">
                         <option>AL</option>