Susy3 improvments

STARTERKIT/components/_init.scss

@@ -28,6 +28,12 @@
 @import 'breakpoint-sass';
 @import 'chroma-sass/sass/chroma/functions';
 
+// Add susy grid system.
+@import 'susy';
+// @import 'susy/sass/plugins/svg-grid';
+@import 'susy/sass/plugins/svg-grid/prefix';
+
+
 @import 'init/colors';
 @import 'init/variables';
 
@@ -39,7 +45,7 @@
 // - [Chroma](https://github.com/JohnAlbin/chroma)
 // - [Support-for](https://github.com/JohnAlbin/support-for)
 // - [Typey](https://github.com/jptaranto/typey)
-// - [Zen Grids](http://zengrids.com/help/)
+// - [Susy](http://oddbird.net/susy/)
 //
 // Additional pre-built libraries can be found on the [Sache website](http://www.sache.in/).
 //
@@ -52,8 +58,6 @@
 @import 'support-for';
 // Add typey to manage font sizes and margins.
 @import 'typey';
-// Add the Zen Grids responsive layout mixins.
-@import 'zen-grids';
 
 
 // Mixins

STARTERKIT/components/components/footer/footer.scss

@@ -10,6 +10,6 @@
 %footer {
   @include type-layout(s, 1);
   @include margin-top(2, s);
-  @include padding(1 0, s);
+  padding: 0 gutter()/2;
   border-top: 1px solid color(border);
 }

STARTERKIT/components/components/header/header.scss

@@ -8,6 +8,8 @@
 
 .header,
 %header {
+  padding: 0 gutter()/2;
+
   // Wrapping link for logo.
   &__logo {
     float: left;

STARTERKIT/components/init/_variables.scss

@@ -119,53 +119,32 @@ $rem-fallback:      false;
 //
 // Style guide: sass.variables.breakpoints
 
-@include add-breakpoint(xxxs, (333px, 'no-query' true));
-@include add-breakpoint(xxs,  (444px, 'no-query' true));
-@include add-breakpoint(xs,   (555px, 'no-query' true));
-@include add-breakpoint(s,    (666px, 'no-query' true));
-@include add-breakpoint(m,    (777px, 'no-query' true));
-@include add-breakpoint(l,    (888px, 'no-query' true));
-@include add-breakpoint(xl,   (999px, 'no-query' true));
-@include add-breakpoint(xxl,  (1111px));
-@include add-breakpoint(xxxl, (1222px));
+@include add-breakpoint(mobile,    (640px, 'no-query' true));
+@include add-breakpoint(tablet,    (641px, 'no-query' true));
+@include add-breakpoint(desktop,   (1025px, 'no-query' true));
+
+
+// Container width.
+$mobile: 640px;
+$tablet: 960px;
+$desktop: 1200px;
+
 
 // Output media queries where the above px are converted to ems.
 // @include breakpoint-set('to ems', true);
 
-
-// Zen grids
+// Susy settings
 //
-// The default grid system is built using the Zen Grids sass module. Full
-// documentation is available on the [Zen Grids website](http://zengrids.com/).
+// Susy grid settings. Documentation on:
+// [Susy website](http://oddbird.net/susy/).
 //
-// Note: if you are more comfortable using another grid system, you can easily
-// remove Zen Grids and its layouts.
-//
-// Style guide: sass.variables.zen-grids
-
-// These are needed for all breakpoints on all layouts.
-$zen-auto-include-grid-item-base: false;
-$zen-box-sizing: universal-border-box;
-
-// First we set the values we need for the mobile version of our layouts (the
-// version that does _not_ appear inside any @media queries.)
-$zen-columns: 1;
-$zen-gutters: 40px;
-
-// Then we set the values we need for each of the layouts at larger media query
-// sizes. Note how the names of the layouts match the names of our breakpoints
-// above. That allows a single zen-respond-to() to both use the proper item
-// from $zen-layouts and from $breakpoints.
-$zen-layouts: (
-  m: (
-    columns: 2,
-    // The gutters in the layouts are larger on mobile.
-    gutters: 25px,
-  ),
-  xl: (
-    columns: 3,
-    gutters: 25px,
-  ),
+// Style guide: sass.variables.susy
+$susy: (
+  'columns': susy-repeat(12),
+  'gutters': 15px,
+  'spread': 'narrow',
+  'container-spread': 'wide',
+  'svg-grid-colors': hsla(334, 65%, 52%, .7) hsla(334, 65%, 52%, .3),
 );
 
 // See $include-rtl below.

STARTERKIT/components/layouts/layout-3col/_layout-3col.scss

@@ -1,162 +1,48 @@
-// Responsive 3-column grid
+// Example page layout
 //
-// The `.layout-3col` layout is a responsive grid layout that is:
-// - 1 column at mobile sizes
-// - 2 columns at tablet sizes
-// - 3 columns at desktop sizes
-//
-// The `.layout-3col` class is used on the container div for the layout. A *grid
-// item* in the container can be created using one of the following classes:
-//
-// - `.layout-3col__full` : 3-column wide grid item; starts a new row
-// - `.layout-3col__left-content` : 2-column wide grid item, spanning columns 1
-//   and 2; starts a new row
-// - `.layout-3col__right-content` : 2-column wide grid item, spanning columns 2
-//   and 3; starts a new row
-// - `.layout-3col__left-sidebar` : 1-column wide grid item spanning column 1;
-//   starts a new row on tablet screens
-// - `.layout-3col__first-left-sidebar` : 1-column wide grid item spanning column 1;
-//   spans column 1 and starts a new row on tablet screens only
-// - `.layout-3col__second-left-sidebar` : 1-column wide grid item spanning column 1;
-//   spans column 2 on tablet screens only
-// - `.layout-3col__right-sidebar` : 1-column wide grid item spanning column 3;
-//   starts a new row on tablet screens
-// - `.layout-3col__col-1` : 1-column wide grid item spanning column 1; starts a
-//   new row
-// - `.layout-3col__col-2` : 1-column wide grid item spanning column 2
-// - `.layout-3col__col-3` : 1-column wide grid item spanning column 3; starts a
-//   new row on tablet screens
-// - `.layout-3col__col-4` : At tablet sizes, the `__col-x` grid items will form
-//   an irregular layout of 2 items in the first row and 1 item in the second
-//   row. The `__col-4` is a "hidden" item that does not appear on the
-//   large-screen 3-column grid, but is a 1-column wide grid item spanning
-//   column 2 on tablet screens.
-// - `.layout-3col__col-x` : 1-column wide grid item spanning column 1; when
-//   several of these are used inside a `.layout-3col__grid-item-container` or
-//   `.layout-3col`, the first one is positioned like `__col-1`, the
-//   second like `__col-2`, etc.
-//
-// There are 2 ways to do a nested grid:
-// 1. Place a grid container div inside a grid item. Just apply the normal
-//    classes to the nested grid container and its grid items.
-// 2. The grid item's div is also the grid container for the nested grid. In
-//    this case, the `.layout3-col__grid-item-container` class should be added
-//    to the div to ensure its nested grid items align with the parent grid.
-//
-// Markup: layout-3col.twig
+// Markup:
+// <div class="layout-3col">
+//   <main class="layout-3col__content" role="main">
+//     Page content
+//   </main>
+//   <aside class="layout-3col__sidebar" role="complementary">
+//     Page sidebar
+//   </aside>
+// </div>
 //
 // Style guide: layouts.layout-3col
 
 .layout-3col,
 %layout-3col {
-  // We set the context to flow, so that this container can be used in most
-  // places in the HTML, i.e. it must be nested inside something that has
-  // padding.
-  @include zen-grid-container($context: flow);
 
-  &__full,
-  &__left-content,
-  &__right-content,
-  &__left-sidebar,
-  &__right-sidebar,
-  &__first-left-sidebar,
-  &__second-left-sidebar,
-  &__col-1,
-  &__col-2,
-  &__col-3,
-  &__col-4,
-  &__col-x {
-    @include zen-new-row(both);
-    @include zen-grid-item-base();
-    @include zen-grid-item(1, 1);
+  &__content {
+    padding: 0 gutter()/2;
   }
 
-  @include zen-respond-to(m) {
-    // Since our container's context is "flow" and we changed the gutter size,
-    // we need to re-apply the container's negative left/right margins.
-    @include zen-grid-container($context: flow);
-
-    &__full,
-    &__left-content,
-    &__right-content,
-    &__left-sidebar,
-    &__right-sidebar {
-      @include zen-grid-item(2, 1);
-      // Since we changed the gutter size for this media query, we need to
-      // re-apply the padding to every grid item.
-      @include zen-apply-gutter-padding();
-    }
-
-    &__first-left-sidebar,
-    &__col-1,
-    &__col-3,
-    &__col-x:nth-child(2n + 1) {
-      @include zen-grid-item(1, 1);
-      @include zen-apply-gutter-padding();
-    }
-
-    &__second-left-sidebar,
-    &__col-2,
-    &__col-4,
-    &__col-x:nth-child(2n) {
-      // Since this inherits from the mobile layout, we have to explicitly turn
-      // off the new-row mixin.
-      @include zen-new-row(none);
-      @include zen-grid-item(1, 2);
-      @include zen-apply-gutter-padding();
-    }
+  &__sidebar {
+    padding: 0 gutter()/2;
   }
 
-  @include zen-respond-to(xl) {
-    &__full {
-      @include zen-grid-item(3, 1);
-    }
 
-    &__left-content {
-      @include zen-grid-item(2, 1);
-    }
-
-    &__right-content {
-      @include zen-grid-item(2, 2);
-    }
-
-    &__left-sidebar,
-    &__first-left-sidebar,
-    &__second-left-sidebar {
-      @include zen-new-row(right);
-      @include zen-grid-item(1, 3, right);
-    }
+  @include respond-to(tablet) {
+    display: flex;
 
-    &__right-sidebar {
-      @include zen-new-row(right);
-      @include zen-grid-item(1, 1, right);
+    &__content {
+      flex-basis: span(6 wide);
     }
 
-    &__col-1,
-    &__col-x:nth-child(3n+1) {
-      @include zen-new-row(both);
-      @include zen-grid-item(1, 1);
-    }
-
-    &__col-2,
-    &__col-x:nth-child(3n+2) {
-      @include zen-new-row(none);
-      @include zen-grid-item(1, 2);
+    &__sidebar {
+      flex-basis: span(6 wide);
     }
+  }
 
-    &__col-3,
-    &__col-x:nth-child(3n) {
-      @include zen-new-row(none);
-      @include zen-grid-item(1, 3);
+  @include respond-to(desktop) {
+    &__content {
+      flex-basis: span(8 wide);
     }
 
-    &__col-4 {
-      display: none;
+    &__sidebar {
+      flex-basis: span(4 wide);
     }
   }
-
-  // Place last so it can override the padding of grid items.
-  &__grid-item-container {
-    @include zen-grid-container($context: grid-item);
-  }
 }