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..19b6d7e0f9
--- /dev/null
+++ b/public/docs/_includes/styleguide/_alerts.jade
@@ -0,0 +1,22 @@
+#sg-alerts.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 (user callouts insteads) or stacked
+ on top of each other.
+
+ .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/_aside.jade b/public/docs/_includes/styleguide/_aside.jade
new file mode 100644
index 0000000000..d8675b2e99
--- /dev/null
+++ b/public/docs/_includes/styleguide/_aside.jade
@@ -0,0 +1,28 @@
+#sg-aside.showcase.shadow-1
+ header.showcase-header
+ h2 Asides
+ p.
+ You this for content that is related in a tangential way but
+ not critical to learning, it can be ignored. The paragraph
+ that includes this element should always surround it with text.
+
+ .showcase-content
+ .l-sub-section
+
+ h3 Adding an aside
+
+ aside.is-right Did you know that hipsum is a replacment for Lorem Ipsum? To find out more visit hipsum.co
+ p.
+ Etsy artisan Thundercats, authentic sustainable bitters wolf roof party meditation 90's asymmetrical XOXO hoodie. Twee umami cray iPhone. Chillwave shabby chic tilde occupy sriracha squid Brooklyn street art. Selvage heirloom kogi American Apparel bicycle rights. Carles Etsy Truffaut mlkshk trust fund. Jean shorts fashion axe Williamsburg wolf cardigan beard, twee blog locavore organic. Cred skateboard dreamcatcher, taxidermy Bushwick actually aesthetic normcore fanny pack.
+
+
+
+ pre.prettyprint.linenums.lang-html
+ code.
+ aside.is-right Did you know that hipsum is a replacment for Lorem Ipsum? To find out more visit hipsum.co
+
+ p.
+ Etsy artisan Thundercats, authentic sustainable bitters
+ wolf roof party meditation 90's asymmetrical XOXO hoodie.
+ Twee umami cray iPhone. Chillwave shabby chic tilde
+ occupy sriracha squid Brooklyn street art.
diff --git a/public/docs/_includes/styleguide/_callouts.jade b/public/docs/_includes/styleguide/_callouts.jade
new file mode 100644
index 0000000000..97654bf8c0
--- /dev/null
+++ b/public/docs/_includes/styleguide/_callouts.jade
@@ -0,0 +1,38 @@
+#sg-callouts.showcase.shadow-1
+ header.showcase-header
+ h2 Callouts
+ p.
+ Please use callouts sparingly throughout the docs.
+ Callouts (like alerts) are meant to draw attention on important occasions.
+ Unlike alerts, callouts are designed to display multi-line content.
+
+ .showcase-content
+ .l-sub-section
+ h3 Adding a Callout
+
+ .callout.is-critical
+ header A Critical Title
+ p.
+ Pitchfork hoodie semiotics, roof party pop-up paleo messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix
+ .callout.is-important
+ header A Very Important Title
+ p.
+ A vePitchfork hoodie semiotics, roof party pop-up paleo messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix
+ .callout.is-helpful
+ header A Very Helpful Title
+ p.
+ Pitchfork hoodie semiotics, roof party pop-up paleo messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix
+
+ pre.prettyprint.linenums.lang-html
+ code.
+ .callout.is-critical
+ header A Critical Title
+ p Pitchfork hoodie semiotics, roof party pop-up paleo messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix
+
+ .callout.is-important
+ header A Very Important Title
+ p A vePitchfork hoodie semiotics, roof party pop-up paleo messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix
+
+ .callout.is-helpful
+ header A Very Helpful Title
+ p Pitchfork hoodie semiotics, roof party pop-up paleo messenger bag cred Carles tousled Truffaut yr. Semiotics viral freegan VHS, Shoreditch disrupt McSweeney's. Intelligentsia kale chips Vice four dollar toast, Schlitz crucifix
diff --git a/public/docs/_includes/styleguide/_code-examples.jade b/public/docs/_includes/styleguide/_code-examples.jade
new file mode 100644
index 0000000000..d93b23c82c
--- /dev/null
+++ b/public/docs/_includes/styleguide/_code-examples.jade
@@ -0,0 +1,63 @@
+#sg-code.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 Specify a language
+
+ p.
+ Prettify makes a best effort to guess the language but
+ works best with C-like and HTML-like languages. For
+ others, there are special language handlers that are
+ chosen based on language hints. Add a class that matches
+ your desired language (example below uses .lang-html)
+
+ pre(class="prettyprint lang-html")
+ code.
+ pre.prettyprint.lang-html
+ h1 Title
+ p This is some copy...
+
+ .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/_includes/styleguide/_layouts.jade b/public/docs/_includes/styleguide/_layouts.jade
new file mode 100644
index 0000000000..8b21f4790e
--- /dev/null
+++ b/public/docs/_includes/styleguide/_layouts.jade
@@ -0,0 +1,29 @@
+#sg-layouts.showcase.shadow-1
+ header.showcase-header
+ h2 Basic Layouts
+ p.
+ You will use the following layouts throughout your documenation
+ to specify sections and sub-sections of content.
+
+ .showcase-content
+ .l-main-section
+ h2 Main Section Title
+ p Main section content...
+
+ pre.prettyprint.linenums.lang-html
+ code.
+ .l-main-section
+ h2 Section Title
+ p section content...
+
+ .l-sub-section
+ h3 Sub Section Title
+ p.
+ sub section content... This content is related to the main section
+ content and falls within the main section.
+
+ pre.prettyprint.linenums.lang-html
+ code.
+ .l-sub-section
+ h3 Sub Section Title
+ p sub section content...
\ No newline at end of file
diff --git a/public/docs/_includes/styleguide/_tables.jade b/public/docs/_includes/styleguide/_tables.jade
new file mode 100644
index 0000000000..e06e05559b
--- /dev/null
+++ b/public/docs/_includes/styleguide/_tables.jade
@@ -0,0 +1,40 @@
+#sg-tables.showcase.shadow-1
+ header.showcase-header
+ h2 Tables
+ p.
+ Tables can be used to present tablular data as it relates
+ to each other.
+
+ .showcase-content
+ .l-sub-section
+ h3 Adding an table
+
+ table
+ tr
+ th Framework
+ th Task
+ th Speed
+ tr
+ td Angular 1.3
+ td Routing
+ td fast
+ tr
+ td Angular 1.4
+ td Routing
+ td faster
+ tr
+ td Angular 2
+ td Routing
+ td fastest :)
+
+ pre.prettyprint.linenums.lang-html
+ code.
+ table
+ tr
+ th Framework
+ th Task
+ th Speed
+ tr
+ td Angular 1.3
+ td Routing
+ td fast
\ No newline at end of file
diff --git a/public/docs/styleguide.jade b/public/docs/styleguide.jade
index 35d8ceec0c..581e78bdb7 100644
--- a/public/docs/styleguide.jade
+++ b/public/docs/styleguide.jade
@@ -1,57 +1,10 @@
-.l-main-section
- h2 Code Examples
+.grid-fluid
+ .c10
+ != partial("/_includes/styleguide/_layouts")
+ != partial("/_includes/styleguide/_code-examples")
+ != partial("/_includes/styleguide/_alerts")
+ != partial("/_includes/styleguide/_callouts")
+ != partial("/_includes/styleguide/_tables")
+ != partial("/_includes/styleguide/_aside")
- 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
+//!= partial("/_includes/styleguide/_jump-nav")
\ No newline at end of file
diff --git a/public/resources/css/base/_type.scss b/public/resources/css/base/_type.scss
index 9f4d492713..c727d23205 100644
--- a/public/resources/css/base/_type.scss
+++ b/public/resources/css/base/_type.scss
@@ -77,6 +77,7 @@ a {
line-height: 32px;
}
+table th,
.text-subhead,
.text-body,
.docs-content p,
@@ -89,7 +90,8 @@ a {
line-height: 28px;
}
-.l-sub-section p {
+.l-sub-section p,
+table td {
font-size: 14px;
font-weight: 400;
opacity: .87;
@@ -103,3 +105,37 @@ a {
opacity: .54;
line-height: 20px;
}
+
+.text-aside,
+.docs-content aside {
+ @extend .text-caption;
+ box-shadow: 0px 2px 5px rgba($coal, 0.3);
+ font-weight: 400;
+ font-size: 13px;
+ opacity: .54;
+ line-height: 24px;
+ background: $mist;
+ border-radius: 2px;
+ padding: $unit * 3;
+ margin-bottom: $unit * 2;
+ width: $unit * 30;
+
+ .l-sub-section & {
+ background: $fog;
+ }
+
+ &.is-right {
+ float: right;
+ margin-left: $unit * 2;
+ }
+
+ &.is-left {
+ float: left;
+ margin-right: $unit * 2;
+ }
+}
+
+.l-sub-section .text-aside,
+.docs-content .l-sub-section aside {
+ background: $snow;
+}
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..e2e450bf1e 100644
--- a/public/resources/css/main.scss
+++ b/public/resources/css/main.scss
@@ -18,19 +18,24 @@
@import 'module/main-nav';
@import 'module/side-nav';
+@import 'module/jump-nav';
@import 'module/footer';
@import 'module/dropdown';
@import 'module/hero';
@import 'module/banner';
@import 'module/cta-bar';
@import 'module/buttons';
+@import 'module/table';
@import 'module/code';
@import 'module/sticker';
@import 'module/bio-card';
@import 'module/overlay';
@import 'module/alert';
+@import 'module/callout';
@import 'module/card';
@import 'module/modal';
+@import 'module/shadow';
+@import 'module/showcase';
/*
diff --git a/public/resources/css/module/_callout.scss b/public/resources/css/module/_callout.scss
new file mode 100644
index 0000000000..91bf12333b
--- /dev/null
+++ b/public/resources/css/module/_callout.scss
@@ -0,0 +1,46 @@
+.callout {
+ @extend .alert;
+ padding: 0px;
+
+ header {
+ color: $snow;
+ padding: 0px ($unit * 2);
+ line-height: $unit * 4;
+ font-size: 14px;
+ font-weight: 500;
+ text-transform: uppercase;
+ }
+
+ p {
+ padding: $unit * 2;
+ margin: 0px;
+ font-size: 14px;
+ }
+
+ &.is-critical {
+ border-color: $cardinal;
+ background: $peach;
+
+ header {
+ background: $cardinal;
+ }
+ }
+
+ &.is-important {
+ border-color: $citrus;
+ background: $sand;
+
+ header {
+ background: $citrus;
+ }
+ }
+
+ &.is-helpful {
+ border-color: $blueberry;
+ background: $light;
+
+ header {
+ background: $blueberry;
+ }
+ }
+}
\ No newline at end of file
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..26d087317c
--- /dev/null
+++ b/public/resources/css/module/_showcase.scss
@@ -0,0 +1,24 @@
+.showcase {
+ margin-bottom: $unit * 6;
+
+ .showcase-header {
+ padding: $unit * 4;
+ background: $mist;
+
+ h3 {
+
+ }
+
+ p:last-child {
+ margin: 0;
+ }
+ }
+
+ .showcase-content {
+ padding: $unit * 4;
+
+ .l-main-section {
+ margin-bottom: 0px;
+ }
+ }
+}
\ No newline at end of file
diff --git a/public/resources/css/module/_table.scss b/public/resources/css/module/_table.scss
new file mode 100644
index 0000000000..a65517f54e
--- /dev/null
+++ b/public/resources/css/module/_table.scss
@@ -0,0 +1,22 @@
+table {
+ margin-bottom: $unit * 4;
+ box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
+ border-radius: 2px;
+ background: $snow;
+
+ th,
+ td {
+ padding: ($unit * 2) ($unit * 4);
+ border-bottom: 1px solid $fog;
+ text-align: left;
+ }
+
+ th {
+ background: $mist;
+ font-weight: 500;
+ }
+
+ tr:last-child td {
+ border: none;
+ }
+}
\ No newline at end of file