From bcaa6646a874afd76671957a51768a2b00b2622c Mon Sep 17 00:00:00 2001 From: Alex Wolfe Date: Mon, 6 Apr 2015 07:08:11 -0700 Subject: [PATCH] tables and more info for code snippets --- public/docs/_includes/styleguide/_alerts.jade | 5 ++- .../_includes/styleguide/_code-examples.jade | 19 ++++++++- .../docs/_includes/styleguide/_jump-nav.jade | 4 +- public/docs/_includes/styleguide/_tables.jade | 40 +++++++++++++++++++ public/docs/styleguide.jade | 1 + public/resources/css/base/_type.scss | 4 +- public/resources/css/main.scss | 1 + public/resources/css/module/_table.scss | 22 ++++++++++ 8 files changed, 90 insertions(+), 6 deletions(-) create mode 100644 public/docs/_includes/styleguide/_tables.jade create mode 100644 public/resources/css/module/_table.scss diff --git a/public/docs/_includes/styleguide/_alerts.jade b/public/docs/_includes/styleguide/_alerts.jade index 3be6f74bc4..a52cb680b1 100644 --- a/public/docs/_includes/styleguide/_alerts.jade +++ b/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 diff --git a/public/docs/_includes/styleguide/_code-examples.jade b/public/docs/_includes/styleguide/_code-examples.jade index ba0f439e88..d93b23c82c 100644 --- a/public/docs/_includes/styleguide/_code-examples.jade +++ b/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 .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. diff --git a/public/docs/_includes/styleguide/_jump-nav.jade b/public/docs/_includes/styleguide/_jump-nav.jade index eed9bbb196..4ed08a18d2 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="#" class="button" md-button) Code Examples + a(href="#sg-code" class="button" md-button) Code Examples li - a(href="#" class="button" md-button) Alerts \ No newline at end of file + a(href="#sg-alerts" class="button" md-button) Alerts \ 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 41b03e6c9d..ee02ee5be2 100644 --- a/public/docs/styleguide.jade +++ b/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") \ No newline at end of file diff --git a/public/resources/css/base/_type.scss b/public/resources/css/base/_type.scss index 9f4d492713..1136c4667b 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; diff --git a/public/resources/css/main.scss b/public/resources/css/main.scss index 88bdda3c97..e5cee60af4 100644 --- a/public/resources/css/main.scss +++ b/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'; 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