From 2fddcb499fefe6c28ad7e85b3e78b7aac576b62e Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Tue, 1 Aug 2017 14:12:10 +0200
Subject: [PATCH] Make use of grid-template-areas for layouts.

---
 sass/layouts/_layouts.scss | 132 ++++++++++++++++++++++++-------------
 1 file changed, 87 insertions(+), 45 deletions(-)

diff --git a/sass/layouts/_layouts.scss b/sass/layouts/_layouts.scss
index 8fe575a..a427a66 100644
--- a/sass/layouts/_layouts.scss
+++ b/sass/layouts/_layouts.scss
@@ -1,7 +1,12 @@
 .layout {
-    &__page {
-      max-width: $max-content-width;
+  &__page {
+    max-width: $max-content-width;
+
+    @include respond-to(s) {
+      margin: 0 auto;
+      min-height: 100vh;
     }
+  }
 
   &__header,
   &__footer,
@@ -12,11 +17,18 @@
   &__page-top,
   &__page-bottom {
     padding: 0 $zen-gutters / 2;
+    min-width: 0;  // With display grid defaults to auto making <pre> overflow.
 
     @include respond-to(s) {
       padding: 0 $zen-gutters;
     }
   }
+
+  &__grid-notice {
+    margin: $zen-gutters/2;
+    padding: $zen-gutters/2;
+    border: 2px dashed color('red');
+  }
 }
 
 @supports (display: grid) {
@@ -24,70 +36,100 @@
   .layout {
     &__page {
       display: grid;
-      grid-template-columns: [first-start] 1fr [last-end];
+      grid-template-areas: 'head'
+                           'nav'
+                           'top'
+                           'main'
+                           'side1'
+                           'side2'
+                           'bottom'
+                           'foot';
+      grid-template-rows: auto
+                          auto
+                          auto
+                          1fr
+                          auto
+                          auto
+                          auto
+                          auto;
+      grid-template-columns: 1fr;
     }
 
-    @include respond-to(s) {
+    @include respond-to(xl) {
       &__page {
-        grid-template-rows: [head-start] auto
-                            [nav-start] auto
-                            [page-top-start] auto
-                            [main-start] 1fr
-                            [page-bottom-start] auto
-                            [footer-start] auto;
-        min-height: 100vh;
-        margin: 0 auto;
+          grid-template-rows: auto
+                              auto
+                              auto
+                              1fr
+                              auto
+                              auto;
       }
 
       &__sidebar-first {
-        grid-template-columns: [first-start] 1fr
-                               [last-start] 2fr [last-end];
+          grid-template-areas: 'head head'
+                               'nav nav'
+                               'side1 top'
+                               'side2 main'
+                               'side2 bottom'
+                               'foot foot';
+          grid-template-columns: 1fr
+                                 2fr;
       }
 
       &__sidebar-second {
-        grid-template-columns: [first-start] 2fr
-                               [last-start] 1fr [last-end];
+          grid-template-areas: 'head head'
+                               'nav nav'
+                               'top side2'
+                               'main side2'
+                               'bottom side2'
+                               'foot foot';
+          grid-template-columns: 2fr
+                                 1fr;
       }
 
       &__sidebar-two {
-        grid-template-columns: [first-start] 1fr
-                               [middle-start] 2fr
-                               [last-start] 1fr [last-end];
+          grid-template-areas: 'head head head'
+                               'nav nav nav'
+                               'side1 top side2'
+                               'side1 main side2'
+                               'side1 bottom side2'
+                               'foot foot foot';
+          grid-template-columns: 1fr
+                                 2fr
+                                 1fr;
       }
+    }
 
-      &__full {
-        grid-column: first-start / last-end;
-      }
+    &__header {
+      grid-area: head;
+    }
 
-      &__first-sidebar {
-        grid-column: first-start;
-      }
+    &__navigation {
+      grid-area: nav;
+    }
 
-      &__header {
-        grid-row: head-start;
-      }
+    &__page-top {
+      grid-area: top;
+    }
 
-      &__navigation {
-        grid-row: nav-start;
-      }
+    &__content {
+      grid-area: main;
+    }
 
-      &__page-top {
-        grid-row: page-top-start;
-      }
+    &__first-sidebar {
+      grid-area: side1;
+    }
 
-      &__content,
-      &__first-sidebar,
-      &__second-sidebar {
-        grid-row: main-start;
-      }
+    &__second-sidebar {
+      grid-area: side2;
+    }
 
-      &__page-bottom {
-        grid-row: page-bottom-start;
-      }
+    &__page-bottom {
+      grid-area: bottom;
+    }
 
-      &__footer {
-        grid-row: footer-start;
-      }
+    &__footer {
+      grid-area: foot;
     }
   }