From 3bbbf47ccd8b85707877e770cdd6b2172c61129c Mon Sep 17 00:00:00 2001
From: Tilo Mitra <tilomitra@gmail.com>
Date: Fri, 28 Feb 2014 12:57:27 -0500
Subject: [PATCH] add responsive grid manual test

---
 src/grids/tests/manual/responsive.html | 69 ++++++++++++++++++++++++++
 1 file changed, 69 insertions(+)

diff --git a/src/grids/tests/manual/responsive.html b/src/grids/tests/manual/responsive.html
index 225dea3..d238122 100644
--- a/src/grids/tests/manual/responsive.html
+++ b/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 @@
             <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>