From 69844f59e37509063db4992c6df1364486cb5818 Mon Sep 17 00:00:00 2001
From: Alex Wolfe <thewolfe@gmail.com>
Date: Tue, 7 Apr 2015 05:35:19 -0700
Subject: [PATCH] aside added

---
 public/docs/_includes/styleguide/_aside.jade  | 28 +++++++++++++++
 .../docs/_includes/styleguide/_jump-nav.jade  |  4 +--
 public/docs/styleguide.jade                   |  1 +
 public/resources/css/base/_type.scss          | 34 +++++++++++++++++++
 4 files changed, 65 insertions(+), 2 deletions(-)
 create mode 100644 public/docs/_includes/styleguide/_aside.jade

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 <a href="http://hipsum.co/">hipsum.co</a>
+      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 <a href="http://hipsum.co/">hipsum.co</a>
+
+          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/_jump-nav.jade b/public/docs/_includes/styleguide/_jump-nav.jade
index 4ed08a18d2..eed9bbb196 100644
--- a/public/docs/_includes/styleguide/_jump-nav.jade
+++ b/public/docs/_includes/styleguide/_jump-nav.jade
@@ -1,7 +1,7 @@
 nav.jump-nav
   ul
     li
-      a(href="#sg-code" class="button" md-button) Code Examples
+      a(href="#" class="button" md-button) Code Examples
 
     li
-      a(href="#sg-alerts" class="button" md-button) Alerts
\ No newline at end of file
+      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
index ee02ee5be2..18f21a965c 100644
--- a/public/docs/styleguide.jade
+++ b/public/docs/styleguide.jade
@@ -3,5 +3,6 @@
     != partial("/_includes/styleguide/_code-examples")
     != partial("/_includes/styleguide/_alerts")
     != partial("/_includes/styleguide/_tables")
+    != partial("/_includes/styleguide/_aside")
 
 != 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 1136c4667b..c727d23205 100644
--- a/public/resources/css/base/_type.scss
+++ b/public/resources/css/base/_type.scss
@@ -105,3 +105,37 @@ table td {
   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;
+}