Merge pull request #29 from angular/style-guide

Style guide

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,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 <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/_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.

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

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 <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.
+        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/_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 <strong>falls within</strong> the main section.
+
+        pre.prettyprint.linenums.lang-html
+          code.
+            .l-sub-section
+              h3 Sub Section Title
+              p sub section content...

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

@@ -1,57 +1,10 @@
-.l-main-section
+.grid-fluid
-  h2 Code Examples
+  .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
+//!= partial("/_includes/styleguide/_jump-nav")
-
-  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/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;
+}

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,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';
 
 
 /*

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

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

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