initial styleguide files

public/_includes/_footer.jade

@@ -43,3 +43,5 @@
 
   footer(class="background-steel")
     small.text-caption Powered by Google ©2010-2015. Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" class="text-snow">Apache License, Version 2.0</a>. Documentation licensed under <a class="text-snow" href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
+    a(href="/docs/styleguide.html" title="Style Guide" class="styleguide-trigger text-snow" md-button)
+      span.icon-favorite

public/docs/_includes/styleguide/_alerts.jade

@@ -0,0 +1,21 @@
+.showcase.shadow-1
+  header.showcase-header
+    h2 Alerts
+    p.
+      Please use alerts sparingly throughout the docs.
+      They are meant to draw attention on important occasions.
+      Alerts should not be used for multi-line content.
+
+  .showcase-content
+    .l-sub-section
+      h3 Adding an alert
+
+      .alert.is-critical A very <strong>critical</strong> alert
+      .alert.is-important A very <strong>important</strong> alert
+      .alert.is-helpful A very <strong>helpful</strong> alert
+
+      pre.prettyprint.linenums
+        code.
+          .alert.is-critical A very <strong>critical</strong> alert
+          .alert.is-important A very <strong>important</strong> alert
+          .alert.is-helpful A very <strong>helpful</strong> alert

public/docs/_includes/styleguide/_code-examples.jade

@@ -0,0 +1,46 @@
+.showcase.shadow-1
+  header.showcase-header
+    h2 Code Examples
+    p Below are some examples of how you can add/customize code examples in a page.
+
+  .showcase-content
+    .l-sub-section
+      h3 Adding a code example
+
+      pre.prettyprint.linenums
+        code.
+          pre.prettyprint.linenums
+            code.
+              //SOME CODE
+              var name = "Alex Wolfe";
+              alert(name);
+
+    .l-sub-section
+      h3 Specify starting line number
+
+      pre(class="prettyprint linenums:4")
+        code.
+          pre.prettyprint.linenums:4
+            var title = "This starts on line four";
+
+    .l-sub-section
+      h3 Code Highlighting
+      p.
+        There are three types of highlights avialable
+        <strong>Outlined</strong>, <strong>Pink</strong>, and
+        <strong>Black</strong>. You can see examples below and
+        the class names needed for each type.
+
+      pre.prettyprint.linenums
+        code.
+          // Pink Background Version
+          // class="pnk"
+          var elephants = "The <span class="pnk">pink</span> elephants were marching...";
+
+          // Black Background Version
+          // class="blk"
+          var night = "The night was pitch <span class="blk">black</span>.";
+
+          // Outlined Version
+          // class="otl"
+          var match = "The <span class="otl">bird</span> ate <span class="otl">bird</span> seed near the <span class="otl">bird</span> bath ";

public/docs/_includes/styleguide/_jump-nav.jade

@@ -0,0 +1,7 @@
+nav.jump-nav
+  ul
+    li
+      a(href="#" class="button" md-button) Code Examples
+
+    li
+      a(href="#" class="button" md-button) Alerts

public/docs/styleguide.jade

@@ -1,57 +0,0 @@
-.l-main-section
-  h2 Code Examples
-
-  p To create a code example like the one below, simple copy the code
-
-  pre.prettyprint.linenums
-    code.
-      pre.prettyprint.linenums
-        code.
-          //SOME CODE
-          var name = "Alex Wolfe";
-          alert(name);
-
-  .l-sub-section
-    h3 Specify starting line number
-
-    pre(class="prettyprint linenums:4")
-      code.
-        pre.prettyprint.linenums:4
-          var title = "This starts on line four";
-
-  .l-sub-section
-    h3 Code Highlighting
-    p.
-      There are three types of highlights avialable
-      <strong>Outlined</strong>, <strong>Pink</strong>, and
-      <strong>Black</strong>. You can see examples below and
-      the class names needed for each type.
-
-    pre.prettyprint.linenums
-      code.
-        // Pink Background Version
-        // class="pnk"
-        var elephants = "The <span class="pnk">pink</span> elephants were marching...";
-
-        // Black Background Version
-        // class="blk"
-        var night = "The night was pitch <span class="blk">black</span>.";
-
-        // Outlined Version
-        // class="otl"
-        var match = "The <span class="otl">bird</span> ate <span class="otl">bird</span> seed near the <span class="otl">bird</span> bath ";
-
-.l-main-section
-  h2 Alerts
-
-  p Single line statments that are additional or critical to the content of a section or page.
-
-  .alert.is-critical A very <strong>critical</strong> alert
-  .alert.is-important A very <strong>important</strong> alert
-  .alert.is-helpful A very <strong>helpful</strong> alert
-
-  pre.prettyprint.linenums
-    code.
-      .alert.is-critical A very <strong>critical</strong> alert
-      .alert.is-important A very <strong>important</strong> alert
-      .alert.is-helpful A very <strong>helpful</strong> alert

public/resources/css/layout/_layout.scss

@@ -13,6 +13,19 @@
   float: right;
 }
 
+.l-relative,
+.docs-content {
+  position: relative;
+}
+
+.l-absolute {
+  position: absolute;
+}
+
+.l-fixed {
+  position: fixed;
+}
+
 
 /*
 * Pinned Layouts (fixed)

public/resources/css/main.scss

@@ -18,6 +18,7 @@
 
 @import 'module/main-nav';
 @import 'module/side-nav';
+@import 'module/jump-nav';
 @import 'module/footer';
 @import 'module/dropdown';
 @import 'module/hero';
@@ -31,6 +32,8 @@
 @import 'module/alert';
 @import 'module/card';
 @import 'module/modal';
+@import 'module/shadow';
+@import 'module/showcase';
 
 
 /*

public/resources/css/module/_footer.scss

@@ -80,9 +80,16 @@
   footer {
     text-align: center;
     padding: $unit * 2;
+    position: relative;
 
-    a {
+    .styleguide-trigger {
-
+      position: absolute;
+      top: $unit * 2;
+      right: $unit * 2;
+      font-size: 14px;
+      line-height: 20px;
+      padding: 0px $unit;
+      opacity: .24;
     }
   }
 }

public/resources/css/module/_jump-nav.scss

@@ -0,0 +1,24 @@
+.jump-nav {
+  position: absolute;
+  top: $unit * 8;
+  right: $unit * 6;
+  width: $unit * 20;
+  z-index: $layer-1;
+
+  ul {
+    list-style-type: none;
+    padding: 0px;
+    margin: 0px;
+  }
+
+  li {
+    padding: 0px;
+    margin: 0px;
+    border-bottom: 1px solid $fog;
+
+    a.button {
+      display: block;
+      text-align: left;
+    }
+  }
+}

public/resources/css/module/_shadow.scss

@@ -0,0 +1,32 @@
+/*
+* Shadow layers
+*
+*/
+
+.shadow-1,
+.shadow-2,
+.shadow-3,
+.shadow-4,
+.shadow-5 {
+  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.shadow-1 {
+  box-shadow: 0 1px 4px 0 rgba($coal, 0.37);
+}
+
+.shadow-2 {
+  box-shadow: 0 2px 2px 0 rgba($coal, 0.2), 0 6px 10px 0 rgba($coal, 0.3);
+}
+
+.shadow-3 {
+  box-shadow: 0 11px 7px 0 rgba($coal, 0.19),0 13px 25px 0 rgba($coal, 0.3);
+}
+
+.shadow-4 {
+  box-shadow: 0 14px 12px 0 rgba($coal, 0.17), 0 20px 40px 0 rgba($coal, 0.3);
+}
+
+.shadow-5 {
+  box-shadow: 0 17px 17px 0 rgba($coal, 0.15), 0 27px 55px 0 rgba($coal, 0.3);
+}

public/resources/css/module/_showcase.scss

@@ -0,0 +1,20 @@
+.showcase {
+  margin-bottom: $unit * 6;
+
+  .showcase-header {
+    padding: $unit * 4;
+    background: $mist;
+
+    h3 {
+
+    }
+
+    p:last-child {
+      margin: 0;
+    }
+  }
+
+  .showcase-content {
+    padding: $unit * 4;
+  }
+}