--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/sass-extensions/zen-grids/templates/project/_layout.scss	Tue Jun 02 09:16:36 2015 +0200
@@ -0,0 +1,117 @@
+/**
+ * @file
+ * Layout styles.
+ *
+ * We use example breakpoints of 444px, 666px, 777px, 999px and 1111px. The
+ * right breakpoints to use for your site depend on your content.
+ */
+
+.centered {
+  @include zen-grid-background();
+  padding: {
+    top: 1.5em;
+    bottom: 1.5em;
+  }
+  margin: {
+    left: auto;
+    right: auto;
+  }
+  max-width: 1111px;
+}
+
+/* Set the shared properties for all grid items. */
+%grid-item,
+.grid-item {
+  @include zen-grid-item-base();
+}
+
+/* Set the container for our grid items. */
+.main {
+  @include zen-grid-container();
+}
+
+/* Horizontal navigation bar */
+@media all and (min-width: 444px) {
+  $zen-column-count: 1;
+  $navbar-height: 5em;
+
+  .main {
+    padding-top: $navbar-height;
+  }
+  .grid-item__menu {
+    @include zen-grid-item(1, 1);
+    margin-top: -$navbar-height;
+    height: $navbar-height;
+  }
+}
+
+@media all and (min-width: 444px) and (max-width: 665px) {
+  $zen-column-count: 2;
+
+  .centered {
+    @include zen-grid-background();
+  }
+  .grid-item__content {
+    @include zen-grid-item(2, 1);
+  }
+  .grid-item__aside1 {
+    @include zen-clear(); // Clear left-floated elements (.grid-item__content)
+    @include zen-grid-item(1, 1);
+  }
+  .grid-item__aside2 {
+    @include zen-grid-item(1, 2);
+  }
+}
+
+@media all and (min-width: 666px) and (max-width: 776px) {
+  $zen-column-count: 3;
+
+  .centered {
+    @include zen-grid-background();
+  }
+  .grid-item__content {
+    @include zen-grid-item(2, 1);
+  }
+  .grid-item__aside1 {
+    @include zen-grid-item(1, 1, right); // Position from the right
+  }
+  .grid-item__aside2 {
+    @include zen-clear(); // Clear left-floated elements (.grid-item__content)
+    @include zen-grid-item(2, 1);
+  }
+}
+
+@media all and (min-width: 777px) and (max-width: 998px) {
+  $zen-column-count: 3;
+
+  .centered {
+    @include zen-grid-background();
+  }
+  .grid-item__content {
+    @include zen-grid-item(2, 1);
+  }
+  .grid-item__aside1 {
+    @include zen-grid-item(1, 1, right); // Position from the right
+  }
+  .grid-item__aside2 {
+    @include zen-clear(right); // Clear right-floated elements (.grid-item__aside1)
+    @include zen-grid-item(1, 1, right);
+  }
+}
+
+@media all and (min-width: 999px) {
+  $zen-column-count: 5;
+
+  .centered {
+    @include zen-grid-background();
+  }
+  .grid-item__content {
+    @include zen-grid-item(3, 2);
+  }
+  .grid-item__aside1 {
+    @include zen-grid-item(1, 1);
+  }
+  .grid-item__aside2 {
+    @include zen-grid-item(1, 5);
+  }
+}