update index.html example page

muffinresearch · Sep 17, 2012 · bb91d7b · bb91d7b
1 parent 6326cc5
commit bb91d7b
Showing 1 changed file with 38 additions and 48 deletions.
diff --git a/index.html b/index.html
@@ -9,7 +9,7 @@
     <link href='css/debug/griddles-no-mq.css' rel='stylesheet' type='text/css'>
     <![endif]-->
     <style type='text/css'>
-        body {
+        .container {
             max-width: 70em;
             margin: 0 auto;
             padding: 10px;
@@ -37,64 +37,54 @@
     </style>
 </head>
 <body>
-<header>
-   <h1>Griddles</h1>
-</header>
-<h2>Standard Examples</h2>
+<div class="container">
+    <header>
+       <h1>Griddles</h1>
+    </header>
+    <h2>Standard Examples</h2>
 
-<p>Here's a selection of the standard classes applied to create various divisions of content</p>
-<div class="grid gutter standard-examples">
-    <div class="g-33"><div>.g-33</div></div>
-    <div class="g-33"><div>.g-33</div></div>
-    <div class="g-33"><div>.g-33</div></div>
-    <div class="g-33"><div>.g-33</div></div>
-    <div class="g-66"><div>.g-66</div></div>
-    <div class="g-10"><div>.g-10</div></div>
-    <div class="g-20"><div>.g-20</div></div>
-    <div class="g-30"><div>.g-30</div></div>
-    <div class="g-40"><div>.g-40</div></div>
+    <p>Here's a selection of the standard classes applied to create various divisions of content</p>
+    <div class="grid gutter standard-examples">
+        <div class="g-33"><div>.g-33</div></div>
+        <div class="g-33"><div>.g-33</div></div>
+        <div class="g-33"><div>.g-33</div></div>
+        <div class="g-33"><div>.g-33</div></div>
+        <div class="g-66"><div>.g-66</div></div>
+        <div class="g-10"><div>.g-10</div></div>
+        <div class="g-20"><div>.g-20</div></div>
+        <div class="g-30"><div>.g-30</div></div>
+        <div class="g-40"><div>.g-40</div></div>
 
-    <div class="g-50"><div>.g-50</div></div>
-    <div class="g-50"><div>.g-50</div></div>
+        <div class="g-50"><div>.g-50</div></div>
+        <div class="g-50"><div>.g-50</div></div>
 
-    <div class="g-40"><div>.g-40</div></div>
-    <div class="g-60"><div>.g-60</div></div>
+        <div class="g-40"><div>.g-40</div></div>
+        <div class="g-60"><div>.g-60</div></div>
 
-    <div class="g-30"><div>.g-30</div></div>
-    <div class="g-70"><div>.g-70</div></div>
+        <div class="g-30"><div>.g-30</div></div>
+        <div class="g-70"><div>.g-70</div></div>
 
-    <div class="g-5"><div>.g-5</div></div>
-    <div class="g-95"><div>.g-95</div></div>
+        <div class="g-5"><div>.g-5</div></div>
+        <div class="g-95"><div>.g-95</div></div>
 
-    <div class="g-25"><div>.g-25</div></div>
-    <div class="g-25"><div>.g-25</div></div>
-    <div class="g-25"><div>.g-25</div></div>
-    <div class="g-25"><div>.g-25</div></div>
-
-    <div class="g-10"><div>.g-10</div></div>
-    <div class="g-10"><div>.g-10</div></div>
-    <div class="g-10"><div>.g-10</div></div>
-    <div class="g-10"><div>.g-10</div></div>
-    <div class="g-10"><div>.g-10</div></div>
-    <div class="g-10"><div>.g-10</div></div>
-    <div class="g-10"><div>.g-10</div></div>
-    <div class="g-10"><div>.g-10</div></div>
-    <div class="g-10"><div>.g-10</div></div>
-    <div class="g-10"><div>.g-10</div></div>
-</div>
+        <div class="g-25"><div>.g-25</div></div>
+        <div class="g-25"><div>.g-25</div></div>
+        <div class="g-25"><div>.g-25</div></div>
+        <div class="g-25"><div>.g-25</div></div>
+    </div>
 
 
-<h2>Break-point overrides</h2>
+    <h2>Break-point overrides</h2>
 
-<p>A common problem with responsive grids is knowing what will happen at a given breakpoint. To make this easier griddles provides classes to make it clear to the author what will happen at a given breakpoint</p>
+    <p>A common problem with responsive grids is knowing what will happen at a given breakpoint. To make this easier griddles provides classes to make it clear to the author what will happen at a given breakpoint</p>
 
-<div class="grid gutter mobile-examples">
-    <div class="g-25 s-g-50 m-g-33"><div>.g-25 s-g-50 .m-g-33</div></div>
-    <div class="g-25 s-g-50 m-g-33"><div>.g-25 s-g-50 .m-g-33</div></div>
-    <div class="g-25 s-g-50 m-g-33"><div>.g-25 s-g-50 .m-g-33</div></div>
-    <div class="g-25 s-g-50 m-g-33"><div>.g-25 s-g-50 .m-g-33</div></div>
+    <div class="grid gutter mobile-examples">
+        <div class="g-25 s-g-50 m-g-33"><div>.g-25 .s-g-50 .m-g-33</div></div>
+        <div class="g-25 s-g-50 m-g-33"><div>.g-25 .s-g-50 .m-g-33</div></div>
+        <div class="g-25 s-g-50 m-g-33"><div>.g-25 .s-g-50 .m-g-33</div></div>
+        <div class="g-25 s-g-50 m-g-33"><div>.g-25 .s-g-50 .m-g-33</div></div>
+    </div>
 </div>
-
 </body>
 </html>