Update flex-utilities visual test with better, clearer styling

diff --git a/test/visual/xy-grid/flex-utilities.html b/test/visual/xy-grid/flex-utilities.html
index a78c0e7dcec62414a82a05ef5536b04c1e8664be..7e70287c42e194fd8e279c297391e73db8b4dee4 100644 (file)
--- a/test/visual/xy-grid/flex-utilities.html
+++ b/test/visual/xy-grid/flex-utilities.html
@@ -11,15 +11,36 @@
         padding: 30px;
       }
 
+      h2 {
+        margin-top: 3rem;
+      }
+
+      h3 {
+        margin-top: 2rem;
+        border-top: 1px solid #ddd;
+        padding-top: 2rem;
+        margin-bottom: 2rem;
+      }
+
+      hr {
+        margin: 3rem 0;
+      }
+
       .demo {
         background: #1779ba;
+        height: 100%;
+        width: 100%;
       }
 
       .cell {
         /*background: dodgerblue;*/
         color: white;
         text-align: center;
-        margin-bottom: 30px;
+      }
+
+      .grid-x,
+      .grid-y {
+        background: #ddd;
       }
     </style>
   </head>
@@ -34,21 +55,37 @@
       <div class="cell small-4"><div class="demo">4</div></div>
     </div>
 
+    <hr>
+
+    <p>.align-right</p>
+
     <div class="grid-x grid-margin-x align-right">
       <div class="cell small-4"><div class="demo">4</div></div>
       <div class="cell small-4"><div class="demo">4</div></div>
     </div>
 
+    <hr>
+
+    <p>.align-center</p>
+
     <div class="grid-x grid-margin-x align-center">
       <div class="cell small-4"><div class="demo">4</div></div>
       <div class="cell small-4"><div class="demo">4</div></div>
     </div>
 
+    <hr>
+
+    <p>.align-justify</p>
+
     <div class="grid-x grid-margin-x align-justify">
       <div class="cell small-4"><div class="demo">4</div></div>
       <div class="cell small-4"><div class="demo">4</div></div>
     </div>
 
+    <hr>
+
+    <p>.align-spaced</p>
+
     <div class="grid-x grid-margin-x align-spaced">
       <div class="cell small-4"><div class="demo">4</div></div>
       <div class="cell small-4"><div class="demo">4</div></div>
@@ -56,21 +93,35 @@
 
     <h3>Y Axis Alignment</h3>
 
+    <p>.align-top</p>
+
     <div class="grid-x grid-margin-x align-top">
       <div class="cell small-4"><div class="demo">I'm at the top (default)</div></div>
       <div class="cell small-4"><div class="demo">4</div></div>
     </div>
 
+    <hr>
+
+    <p>.align-middle</p>
+
     <div class="grid-x grid-margin-x align-middle">
       <div class="cell small-4"><div class="demo">I'm in the middle</div></div>
       <div class="cell small-4"><div class="demo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium? Molestiae eaque, sapiente atque doloremque placeat! In sint, fugiat saepe sunt dolore tempore amet cupiditate.</div></div>
     </div>
 
+    <hr>
+
+    <p>.align-bottom</p>
+
     <div class="grid-x grid-margin-x align-bottom">
       <div class="cell small-4"><div class="demo">I'm at the bottom</div></div>
       <div class="cell small-4"><div class="demo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium? Molestiae eaque, sapiente atque doloremque placeat! In sint, fugiat saepe sunt dolore tempore amet cupiditate.</div></div>
     </div>
 
+    <hr>
+
+    <p>.align-stretch</p>
+
     <div class="grid-x grid-margin-x align-stretch">
       <div class="cell small-4"><div class="demo">these cells have the same height</div></div>
       <div class="cell small-4"><div class="demo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium? Molestiae eaque, sapiente atque doloremque placeat! In sint, fugiat saepe sunt dolore tempore amet cupiditate.</div></div>
@@ -78,6 +129,8 @@
 
     <h3>Child Alignment</h3>
 
+    <p>.align-self-bottom/middle/top</p>
+
     <div class="grid-x grid-margin-x">
       <div class="cell small-4 align-self-bottom"><div class="demo">Align bottom</div></div>
       <div class="cell small-4 align-self-middle"><div class="demo">Align middle</div></div>
@@ -86,6 +139,8 @@
 
     <h3>Central Alignment</h3>
 
+    <p>.align-center-middle</p>
+
     <div class="grid-x grid-margin-x align-center-middle text-center" style="height: 200px; background: #eee;">
       <div class="cell small-4"><div class="demo">I am in the center-middle</div></div>
       <div class="cell small-4"><div class="demo">I am also centrally located</div></div>
@@ -101,21 +156,37 @@
       <div class="cell small-4"><div class="demo">4</div></div>
     </div>
 
+    <hr>
+
+    <p>.align-right</p>
+
     <div class="grid-y grid-margin-y align-right" style="height: 300px;">
       <div class="cell small-4"><div class="demo">4</div></div>
       <div class="cell small-4"><div class="demo">4</div></div>
     </div>
 
+    <hr>
+
+    <p>.align-center</p>
+
     <div class="grid-y grid-margin-y align-center" style="height: 300px;">
       <div class="cell small-4"><div class="demo">4</div></div>
       <div class="cell small-4"><div class="demo">4</div></div>
     </div>
 
+    <hr>
+
+    <p>.align-justify</p>
+
     <div class="grid-y grid-margin-y align-justify" style="height: 300px;">
       <div class="cell small-4"><div class="demo">4</div></div>
       <div class="cell small-4"><div class="demo">4</div></div>
     </div>
 
+    <hr>
+
+    <p>.align-spaced</p>
+
     <div class="grid-y grid-margin-y align-spaced" style="height: 300px;">
       <div class="cell small-4"><div class="demo">4</div></div>
       <div class="cell small-4"><div class="demo">4</div></div>
@@ -123,21 +194,35 @@
 
     <h3>Y Axis Alignment</h3>
 
+    <p>.align-top</p>
+
     <div class="grid-y grid-margin-y align-top" style="height: 300px;">
       <div class="cell small-4"><div class="demo">I'm at the top (default)</div></div>
       <div class="cell small-4"><div class="demo">4</div></div>
     </div>
 
+    <hr>
+
+    <p>.align-middle</p>
+
     <div class="grid-y grid-margin-y align-middle" style="height: 300px;">
       <div class="cell small-4"><div class="demo">I'm in the middle</div></div>
       <div class="cell small-4"><div class="demo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium? Molestiae eaque, sapiente atque doloremque placeat! In sint, fugiat saepe sunt dolore tempore amet cupiditate.</div></div>
     </div>
 
+    <hr>
+
+    <p>.align-bottom</p>
+
     <div class="grid-y grid-margin-y align-bottom" style="height: 300px;">
       <div class="cell small-4"><div class="demo">I'm at the bottom</div></div>
       <div class="cell small-4"><div class="demo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium? Molestiae eaque, sapiente atque doloremque placeat! In sint, fugiat saepe sunt dolore tempore amet cupiditate.</div></div>
     </div>
 
+    <hr>
+
+    <p>.align-stretch</p>
+
     <div class="grid-y grid-margin-y align-stretch" style="height: 300px;">
       <div class="cell small-4"><div class="demo">these cells have the same height</div></div>
       <div class="cell small-4"><div class="demo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium? Molestiae eaque, sapiente atque doloremque placeat! In sint, fugiat saepe sunt dolore tempore amet cupiditate.</div></div>
@@ -145,6 +230,8 @@
 
     <h3>Child Alignment</h3>
 
+    <p>.align-self-bottom/middle/top</p>
+
     <div class="grid-y grid-margin-y" style="height: 300px;">
       <div class="cell small-4 align-self-bottom"><div class="demo">Align bottom</div></div>
       <div class="cell small-4 align-self-middle"><div class="demo">Align middle</div></div>
@@ -153,18 +240,13 @@
 
     <h3>Central Alignment</h3>
 
+    <p>.align-center-middle</p>
+
     <div class="grid-y grid-margin-y align-center-middle text-center" style="height: 300px; background: #eee;">
       <div class="cell small-4"><div class="demo">I am in the center-middle</div></div>
       <div class="cell small-4"><div class="demo">I am also centrally located</div></div>
     </div>
 
-    <div class="grid-x grid-margin-x grid-margin-y align-stretch">
-      <div class="medium-6 large-4 cell demo">12/6/4 cells<br>Second row</div>
-      <div class="medium-6 large-8 cell demo">12/6/8 cells</div>
-      <div class="medium-6 large-4 cell demo">12/6/4 cells</div>
-      <div class="medium-6 large-8 cell demo">12/6/8 cells</div>
-    </div>
-
     <script src="../assets/js/vendor.js"></script>
     <script src="../assets/js/foundation.js"></script>
     <script>