diff --git a/public/_includes/_footer.jade b/public/_includes/_footer.jade
index b4d85da781..5cce1c39de 100644
--- a/public/_includes/_footer.jade
+++ b/public/_includes/_footer.jade
@@ -43,3 +43,5 @@
footer(class="background-steel")
small.text-caption Powered by Google ©2010-2015. Code licensed under the Apache License, Version 2.0. Documentation licensed under CC BY 3.0.
+ a(href="/docs/styleguide.html" title="Style Guide" class="styleguide-trigger text-snow" md-button)
+ span.icon-favorite
\ No newline at end of file
diff --git a/public/docs/_includes/styleguide/_alerts.jade b/public/docs/_includes/styleguide/_alerts.jade
new file mode 100644
index 0000000000..3be6f74bc4
--- /dev/null
+++ b/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 critical alert
+ .alert.is-important A very important alert
+ .alert.is-helpful A very helpful alert
+
+ pre.prettyprint.linenums
+ code.
+ .alert.is-critical A very critical alert
+ .alert.is-important A very important alert
+ .alert.is-helpful A very helpful alert
\ No newline at end of file
diff --git a/public/docs/_includes/styleguide/_code-examples.jade b/public/docs/_includes/styleguide/_code-examples.jade
new file mode 100644
index 0000000000..ba0f439e88
--- /dev/null
+++ b/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
+ Outlined, Pink, and
+ Black. 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 pink elephants were marching...";
+
+ // Black Background Version
+ // class="blk"
+ var night = "The night was pitch black.";
+
+ // Outlined Version
+ // class="otl"
+ var match = "The bird ate bird seed near the bird bath ";
diff --git a/public/docs/_includes/styleguide/_jump-nav.jade b/public/docs/_includes/styleguide/_jump-nav.jade
new file mode 100644
index 0000000000..eed9bbb196
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/public/docs/styleguide.jade b/public/docs/styleguide.jade
deleted file mode 100644
index 35d8ceec0c..0000000000
--- a/public/docs/styleguide.jade
+++ /dev/null
@@ -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
- Outlined, Pink, and
- Black. 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 pink elephants were marching...";
-
- // Black Background Version
- // class="blk"
- var night = "The night was pitch black.";
-
- // Outlined Version
- // class="otl"
- var match = "The bird ate bird seed near the bird 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 critical alert
- .alert.is-important A very important alert
- .alert.is-helpful A very helpful alert
-
- pre.prettyprint.linenums
- code.
- .alert.is-critical A very critical alert
- .alert.is-important A very important alert
- .alert.is-helpful A very helpful alert
\ No newline at end of file
diff --git a/public/resources/css/layout/_layout.scss b/public/resources/css/layout/_layout.scss
index 2893dddb1f..9edd2fe87a 100644
--- a/public/resources/css/layout/_layout.scss
+++ b/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)
diff --git a/public/resources/css/main.scss b/public/resources/css/main.scss
index 8fdd3b59fc..88bdda3c97 100644
--- a/public/resources/css/main.scss
+++ b/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';
/*
diff --git a/public/resources/css/module/_footer.scss b/public/resources/css/module/_footer.scss
index 0476f9a37b..5382613d8e 100644
--- a/public/resources/css/module/_footer.scss
+++ b/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;
}
}
}
\ No newline at end of file
diff --git a/public/resources/css/module/_jump-nav.scss b/public/resources/css/module/_jump-nav.scss
new file mode 100644
index 0000000000..956fc0a7c6
--- /dev/null
+++ b/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;
+ }
+ }
+}
\ No newline at end of file
diff --git a/public/resources/css/module/_shadow.scss b/public/resources/css/module/_shadow.scss
new file mode 100644
index 0000000000..c6da606ce9
--- /dev/null
+++ b/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);
+}
\ No newline at end of file
diff --git a/public/resources/css/module/_showcase.scss b/public/resources/css/module/_showcase.scss
new file mode 100644
index 0000000000..bad54b29e9
--- /dev/null
+++ b/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;
+ }
+}
\ No newline at end of file