add responsive grid manual test

Author: tilomitra

src/grids/tests/manual/responsive.html

@@ -6,6 +6,7 @@
 
     <link rel="stylesheet" href="../../../../build/base.css">
     <link rel="stylesheet" href="../../../../build/grids.css">
+    <link rel="stylesheet" href="../../../../build/grids-responsive.css">
 
     <style>
         .content {
@@ -370,5 +371,73 @@ <h2>Wrapping Grids</h2>
             <div class="content">Wrapping 1/3</div>
         </div>
     </div>
+
+    <h2>Responsive Grids</h2>
+    <div class="pure-g">
+        <div class="pure-u-1 pure-u-sm-1-2 pure-u-lg-1-4">
+            <div class="content">1 -> 1/2 -> 1/4</div>
+        </div>
+        <div class="pure-u-1 pure-u-sm-1-2 pure-u-lg-1-4">
+            <div class="content">1 -> 1/2 -> 1/4</div>
+        </div>
+        <div class="pure-u-1 pure-u-sm-1-2 pure-u-lg-1-4">
+            <div class="content">1 -> 1/2 -> 1/4</div>
+        </div>
+        <div class="pure-u-1 pure-u-sm-1-2 pure-u-lg-1-4">
+            <div class="content">1 -> 1/2 -> 1/4</div>
+        </div>
+    </div>
+
+    <h2>Nested Responsive Grids</h2>
+    <div class="pure-g">
+        <div class="pure-u-1 pure-u-md-1-2">
+            <div class="content">
+                <div class="pure-g">
+                    <div class="pure-u-1 pure-u-lg-1-2">
+                        <div class="content">1 -> 1/2</div>
+                    </div>
+                    <div class="pure-u-1 pure-u-lg-1-2">
+                        <div class="content">1 -> 1/2</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="pure-u-1 pure-u-md-1-2">
+            <div class="content">
+                <div class="pure-g">
+                    <div class="pure-u-1-4 pure-u-lg-1-8">
+                        <div class="content">1/4 -> 1/8</div>
+                    </div>
+                    <div class="pure-u-1-4 pure-u-lg-1-8">
+                        <div class="content">1/4 -> 1/8</div>
+                    </div>
+                    <div class="pure-u-1-4 pure-u-lg-3-8">
+                        <div class="content">1/4 -> 3/8</div>
+                    </div>
+                    <div class="pure-u-1-4 pure-u-lg-3-8">
+                        <div class="content">1/4 -> 3/8</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <h2><code>.pure-img</code> Images</h2>
+    <div class="pure-g">
+        <div class="pure-u-1 pure-u-sm-1-2 pure-u-lg-1-4">
+            <img class="pure-img" src="http://placehold.it/350x200">
+        </div>
+        <div class="pure-u-1 pure-u-sm-1-2 pure-u-lg-1-4">
+            <img class="pure-img" src="http://placehold.it/350x200">
+        </div>
+        <div class="pure-u-1 pure-u-sm-1-2 pure-u-lg-1-4">
+            <img class="pure-img" src="http://placehold.it/350x200">
+        </div>
+        <div class="pure-u-1 pure-u-sm-1-2 pure-u-lg-1-4">
+            <img class="pure-img" src="http://placehold.it/350x200">
+        </div>
+    </div>
+
 </body>
 </html>