tables and more info for code snippets

public/docs/_includes/styleguide/_alerts.jade

@@ -1,10 +1,11 @@
-.showcase.shadow-1
+#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.
+      Alerts should not be used for multi-line content or stacked
+      on top of each other.
 
   .showcase-content
     .l-sub-section

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

@@ -1,4 +1,4 @@
-.showcase.shadow-1
+#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.
@@ -23,6 +23,23 @@
           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 <strong>.lang-html</strong>)
+
+      pre(class="prettyprint lang-html")
+        code.
+          pre.prettyprint.lang-html
+            h1 Title
+            p This is some copy...
+
     .l-sub-section
       h3 Code Highlighting
       p.

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

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

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

public/docs/styleguide.jade

@@ -2,5 +2,6 @@
   .c10
     != partial("/_includes/styleguide/_code-examples")
     != partial("/_includes/styleguide/_alerts")
+    != partial("/_includes/styleguide/_tables")
 
 != partial("/_includes/styleguide/_jump-nav")

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;

public/resources/css/main.scss

@@ -25,6 +25,7 @@
 @import 'module/banner';
 @import 'module/cta-bar';
 @import 'module/buttons';
+@import 'module/table';
 @import 'module/code';
 @import 'module/sticker';
 @import 'module/bio-card';

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;
+  }
+}