redo holy grail layout

source/assets/css/_functions.scss

@@ -1,11 +1,14 @@
-@function sl-px-to-rem($pixels) {
+@function sl-px-to-rem($pixels,
-  @return ($pixels / 16px * 1rem);
+                       $font-size: 16px) {
+  @return ($pixels / $font-size * 1rem);
 }
 
-@function sl-px-to-em($pixels) {
+@function sl-px-to-em($pixels,
-  @return ($pixels / 16px * 1em);
+                      $font-size: 16px) {
+  @return ($pixels / $font-size * 1em);
 }
 
-@function sl-px-to-unitless($pixels) {
+@function sl-px-to-unitless($pixels,
-  @return ($pixels / 16px);
+                            $font-size: 16px) {
+  @return ($pixels / $font-size);
 }

source/assets/css/docs.css.scss

@@ -0,0 +1 @@
+/*! Sass Documentation */

source/assets/css/layout/_holy-grail.scss

@@ -1,82 +1,40 @@
 .sl-l-holy-grail {
-  margin: {
-    right: -sl-px-to-rem(32px);
-    left:  -sl-px-to-rem(32px);
-  };
-  display: grid;
-  grid-template-rows: auto
-                      1fr
-                      auto;
-  //min-height: 100vh;
 
-  &--has {
+  &,
-    &-navigation {
+  &__body {
-      grid-template: {
+    display: flex;
-        areas: 'header header'
+    flex-direction: column;
-               'navigation main'
-               'footer footer';
-        columns: sl-px-to-rem(320px) 1fr;
-      };
-    }
-
-    &-complementary {
-      grid-template: {
-        areas: 'header header'
-               'main complementary'
-               'footer footer';
-        columns: 1fr sl-px-to-rem(480px);
-      };
-    }
-
-    &-both-sidebars {
-      grid-template: {
-        areas: 'header header header'
-               'navigation main complementary'
-               'footer footer footer';
-        columns: sl-px-to-rem(320px) 1fr sl-px-to-rem(480px);
-      };
-    }
-
-    &-no-sidebars {
-      grid-template: {
-        areas: 'header'
-               'main'
-               'footer';
-        columns: 1fr;
-      };
-    }
   }
 
+  height: 100%;
+
   &__header,
-  &__main,
+  &__footer { flex: none;     }
-  &__navigation,
+  &__body   { flex: 1 0 auto; }
-  &__complementary,
-  &__footer {
-    padding: {
-      right: sl-px-to-rem(32px);
-      left:  sl-px-to-rem(32px);
-    };
-  }
 
-  &__header        { grid-area: header;        }
+  &__navigation { order: -1; }
-  &__main          { grid-area: main;          }
-  &__navigation    { grid-area: navigation;    }
-  &__complementary { grid-area: complementary; }
-  &__footer        { grid-area: footer;        }
 
-  @media screen and (max-width: #{sl-px-to-em(640px)}) {
+  @include sl-breakpoint--medium {
-    grid-template: {
+
-      areas: 'header'
+    &__body {
-             'navigation'
+      flex-direction: row;
-             'main'
+      margin: {
-             'complementary'
+        right: -2rem;
-             'footer';
+        left:  -2rem;
-      columns: 100%;
+      };
-      rows: auto
+    }
-            auto
+
-            auto
+    &__main,
-            auto
+    &__navigation,
-            auto;
+    &__complementary {
-    };
+      padding: {
+        right: 2rem;
+        left:  2rem;
+      };
+    }
+
+    &__main          { flex: 1;         }
+    &__navigation    { flex: 0 0 20rem; }
+    &__complementary { flex: 0 0 30rem; }
   }
 }

source/assets/css/regions/_page.scss

@@ -1,15 +1,3 @@
-.page {
-  transition-property: margin, padding, min-height, height;
-
-  @include sl-breakpoint--medium {
-    margin: 0 auto #{-$sticky-contentinfo-height};
-    padding-bottom:  $sticky-contentinfo-height;
-    min-height: 100%;
-    height: auto !important;
-    height: 100%;
-  }
-}
-
 .body {
   padding: {
     top:    sl-px-to-rem(48px);

source/assets/css/sass.css.scss

@@ -39,7 +39,6 @@
   'components/tables',
   'components/forms',
   'components/buttons',
-  'components/code',
   'components/alerts',
   'components/callouts',
   'components/progress',

source/layouts/foot/_js.haml

@@ -1,3 +1,2 @@
-= javascript_include_tag "sass"
+= javascript_include_tag 'sass'
-
 = yield_content :js_foot

source/layouts/has_both_sidebars.haml

@@ -1,13 +1,14 @@
 = wrap_layout :layout do
-  .sl-l-holy-grail.sl-l-holy-grail--has-both-sidebars
+  .sl-l-holy-grail
-    %nav.sl-l-holy-grail__navigation(role='navigation')
+    .sl-l-holy-grail__body
-      = yield_content :navigation
+      %nav.sl-l-holy-grail__navigation(role='navigation')
+        = yield_content :navigation
 
-    %main.sl-l-holy-grail__main(role='main')
+      .sl-l-holy-grail__main
-      - if current_page.data.introduction
+        - if current_page.data.introduction
-        .sl-c-introduction= markdown_wrap current_page.data.introduction
+          .sl-c-introduction= markdown_wrap current_page.data.introduction
 
-      =yield
+        =yield
 
-    %aside.sl-l-holy-grail__complementary(role='complementary')
+      %aside.sl-l-holy-grail__complementary(role='complementary')
-      = yield_content :complementary
+        = yield_content :complementary

source/layouts/has_complementary.haml

@@ -1,10 +1,11 @@
 = wrap_layout :layout do
-  .sl-l-holy-grail.sl-l-holy-grail--has-complementary
+  .sl-l-holy-grail
-    %main.sl-l-holy-grail__main(role='main')
+    .sl-l-holy-grail__body
-      - if current_page.data.introduction
+      .sl-l-holy-grail__main
-        .sl-c-introduction= markdown_wrap current_page.data.introduction
+        - if current_page.data.introduction
+          .sl-c-introduction= markdown_wrap current_page.data.introduction
 
-      =yield
+        =yield
 
-    %aside.sl-l-holy-grail__complementary(role='complementary')
+      %aside.sl-l-holy-grail__complementary(role='complementary')
-      = yield_content :complementary
+        = yield_content :complementary

source/layouts/has_navigation.haml

@@ -1,10 +1,11 @@
 = wrap_layout :layout do
-  .sl-l-holy-grail.sl-l-holy-grail--has-navigation
+  .sl-l-holy-grail
-    %nav.sl-l-holy-grail__navigation(role='navigation')
+    .sl-l-holy-grail__body
-      = yield_content :navigation
+      %nav.sl-l-holy-grail__navigation(role='navigation')
+        = yield_content :navigation
 
-    %main.sl-l-holy-grail__main(role='main')
+      .sl-l-holy-grail__main
-      - if current_page.data.introduction
+        - if current_page.data.introduction
-        .sl-c-introduction= markdown_wrap current_page.data.introduction
+          .sl-c-introduction= markdown_wrap current_page.data.introduction
 
-      =yield
+        =yield

source/layouts/has_no_sidebars.haml

@@ -1,6 +1,5 @@
 = wrap_layout :layout do
-  %main(role='main')
+  - if current_page.data.introduction
-    - if current_page.data.introduction
+    .sl-c-introduction= markdown_wrap current_page.data.introduction
-      .sl-c-introduction= markdown_wrap current_page.data.introduction
 
-    =yield
+  =yield

source/layouts/head/_css.haml

@@ -1,3 +1,4 @@
-= stylesheet_link_tag "sass"
+= stylesheet_link_tag 'vendor/syntax'
+= stylesheet_link_tag 'sass'
 
 = yield_content :css

source/layouts/layout.haml

@@ -4,30 +4,37 @@
     %meta(charset="utf-8")/
     %meta(http-equiv="X-UA-Compatible" content="IE=edge")/
     %title= page_title
-    = partial "layouts/head/meta"
+    = partial 'layouts/head/meta'
-    = partial "layouts/head/link"
+    = partial 'layouts/head/link'
-    = partial "layouts/head/css"
+    = partial 'layouts/head/css'
-    = partial "layouts/head/js"
+    = partial 'layouts/head/js'
 
   %body{class: page_classes}
-    .page
+    /[if lt IE 9]
-      = partial "layouts/roles/alert"
+      %p.browserupgrade
-      .pop-stripe
+        You are using an
-      = partial "layouts/regions/banner"
+        %strong outdated
-      = partial "layouts/regions/page_header"
+        browser. Please
+        = link_to 'upgrade your browser', 'https://browsehappy.com/'
+        to improve your experience and security.
+
+    = partial 'layouts/roles/alert'
+
+    .pop-stripe
+
+    = partial 'layouts/regions/banner'
+
+    %main(role='main')
+      = partial 'layouts/regions/page_header'
 
       .body
-        .sl-l-container=yield
+        .sl-l-container= Typogruby.improve(yield)
 
-        - if content_for?(:section_middle)
+    = partial 'layouts/regions/release'
-          %section.section-middle
-            .sl-l-container= yield_content :section_middle
 
-      = partial "layouts/regions/release"
+    - if content_for?(:section_bottom)
+      %section.section-bottom
+        .sl-l-container= Typogruby.improve(yield_content :section_bottom)
 
-      - if content_for?(:section_bottom)
+    = partial 'layouts/regions/contentinfo'
-        %section.section-bottom
+    = partial 'layouts/foot/js'
-          .sl-l-container= yield_content :section_bottom
-
-    = partial "layouts/regions/contentinfo"
-    = partial "layouts/foot/js"

source/layouts/regions/_banner.haml

@@ -1,6 +1,6 @@
-%header.banner(role="banner")
+%header.banner(role='banner')
   .sl-l-container.clearfix
-    %h1.site-brand= link_to (image_tag "logos/logo.svg", height: "48", alt: "Sass"), "/"
+    %h1.site-brand= link_to (image_tag 'logos/logo.svg', height: '48', alt: 'Sass'), '/'
 
     %nav.navigation.collapse(role="navigation")
       :markdown
@@ -11,7 +11,7 @@
         * [Get Involved](/community)
 
     .banner-toggle
-      %button(type="button" data-toggle="collapse" data-target=".navigation")
+      %button(type='button' data-toggle='collapse' data-target='.navigation')
         %span.icon-bar
         %span.icon-bar
         %span.icon-bar

source/layouts/regions/_page_header.haml

@@ -2,9 +2,9 @@
   .sl-l-container
     %h1
       - if current_page.data.h1?
-        = current_page.data.h1
+        = Typogruby.improve(current_page.data.h1)
       - else
-        = current_page.data.title
+        = Typogruby.improve(current_page.data.title)
 
     - if current_page.data.description?
-      %p= current_page.data.description
+      %p= Typogruby.improve(current_page.data.description)

source/layouts/roles/_alert.haml

@@ -1,20 +1,7 @@
-/[if lt IE 8]
-  .alert(role="alert")
-    .sl-l-container
-      %p.browsehappy
-        You are using an
-        %strong outdated
-        browser. Please
-        = link_to "upgrade your browser", "http://browsehappy.com/"
-        to improve your experience.
-
-- if content_for?(:alert)
-  .alert
-    .sl-l-container= yield_content :alert
-
 .alert.stickers
   .sl-l-container
     %p
       %strong Your laptop needs more Sass.
-      = succeed "." do
+      = succeed '.' do
-        = link_to "Grab a set of Sass stickers now", "http://devswag.com/products/sass-stickers-4"
+        = link_to 'http://devswag.com/products/sass-stickers-4' do
+          Grab a set of Sass stickers now