Merge pull request #1059 from olefredrik/update-kitchen-sink-grid

Updated kitchen sink grid to XY Grid
olefredrik · Aug 29, 2017 · 28b64ce · 28b64ce
2 parents 64aec0b + cab24f7
commit 28b64ce
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 32 deletions.
diff --git a/page-templates/kitchen-sink.php b/page-templates/kitchen-sink.php
@@ -527,29 +527,18 @@
 					<hr>
 
 					<!-- Grid -->
-					<h2 id="grid" class="docs-heading" data-magellan-target="grid"><a href="#grid"></a>Grid<h2>
-						<div class="row display">
-							<div class="small-2 medium-3 large-4 columns">2/3/4 columns</div>
-							<div class="small-4 medium-3 large-4 columns">4/3/4 columns</div>
-							<div class="small-6 large-4 columns">6/6/4 columns</div>
-						</div>
-						<div class="row display">
-							<div class="large-3 columns">12/12/3 columns</div>
-							<div class="large-6 columns">12/12/6 columns</div>
-							<div class="large-3 columns">12/12/3 columns</div>
-						</div>
-						<div class="row display">
-							<div class="small-6 large-2 columns">6/6/2 columns</div>
-							<div class="small-6 large-8 columns">6/6/8 columns</div>
-							<div class="small-12 large-2 columns">12/12/2 columns</div>
-						</div>
-						<div class="row display">
-							<div class="small-3 columns">3 columns</div>
-							<div class="small-9 columns">9 columns</div>
-						</div>
-						<div class="row display">
-							<div class="medium-8 large-4 columns">12/8/4 columns</div>
-							<div class="medium-4 large-8 columns">12/4/8 columns</div>
+					<h2 id="grid" class="docs-heading" data-magellan-target="grid"><a href="#grid"></a>Grid (XY)</h2>
+						<div class="grid-x">
+							<div class="cell">full width cell</div>
+							<div class="cell">full width cell</div>
+						</div>
+						<div class="grid-x">
+							<div class="small-6 cell">6 cells</div>
+							<div class="small-6 cell">6 cells</div>
+						</div>
+						<div class="grid-x">
+							<div class="medium-6 large-4 cell">12/6/4 cells</div>
+							<div class="medium-6 large-8 cell">12/6/8 cells</div>
 						</div>
 					<hr>
 

diff --git a/src/assets/scss/templates/_kitchen-sink.scss b/src/assets/scss/templates/_kitchen-sink.scss
@@ -64,16 +64,19 @@
   }
 }
 
-.row.display {
-  background: #eee;
-  font-size: 11px;
-  margin-bottom: 10px;
+.grid-x {
+  background: #d6ecfa;
+  font-size: 12px;
   line-height: 2rem;
-  border: solid 1px #c6c6c6;
-  margin-left: 0 !important;
-  margin-right: 0 !important;
+  margin-bottom: 1.5rem;
+
+  .cell,:nth-child(odd) {
+    background: #7bc1ef;
+    color: #0a0a0a;
+  }
 
-  .columns:nth-child(2), .columns.small-centered, .columns.large-centered {
-    background: #e1e1e1;
+  .cell:nth-child(even) {
+    background: #1779ba;
+    color: #fefefe;
   }
 }