From 78391effbde98b7036cf99e4300a05ce991db169 Mon Sep 17 00:00:00 2001 From: Alex Wolfe Date: Mon, 6 Apr 2015 06:41:08 -0700 Subject: [PATCH 1/8] initial styleguide files --- public/_includes/_footer.jade | 2 + public/docs/_includes/styleguide/_alerts.jade | 21 +++++++ .../_includes/styleguide/_code-examples.jade | 46 +++++++++++++++ .../docs/_includes/styleguide/_jump-nav.jade | 7 +++ public/docs/styleguide.jade | 57 ------------------- public/resources/css/layout/_layout.scss | 13 +++++ public/resources/css/main.scss | 3 + public/resources/css/module/_footer.scss | 11 +++- public/resources/css/module/_jump-nav.scss | 24 ++++++++ public/resources/css/module/_shadow.scss | 32 +++++++++++ public/resources/css/module/_showcase.scss | 20 +++++++ 11 files changed, 177 insertions(+), 59 deletions(-) create mode 100644 public/docs/_includes/styleguide/_alerts.jade create mode 100644 public/docs/_includes/styleguide/_code-examples.jade create mode 100644 public/docs/_includes/styleguide/_jump-nav.jade delete mode 100644 public/docs/styleguide.jade create mode 100644 public/resources/css/module/_jump-nav.scss create mode 100644 public/resources/css/module/_shadow.scss create mode 100644 public/resources/css/module/_showcase.scss 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..3be6f74bc4 --- /dev/null +++ b/public/docs/_includes/styleguide/_alerts.jade @@ -0,0 +1,21 @@ +.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. + + .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/_code-examples.jade b/public/docs/_includes/styleguide/_code-examples.jade new file mode 100644 index 0000000000..ba0f439e88 --- /dev/null +++ b/public/docs/_includes/styleguide/_code-examples.jade @@ -0,0 +1,46 @@ +.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 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/styleguide.jade b/public/docs/styleguide.jade deleted file mode 100644 index 35d8ceec0c..0000000000 --- a/public/docs/styleguide.jade +++ /dev/null @@ -1,57 +0,0 @@ -.l-main-section - h2 Code Examples - - 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 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..88bdda3c97 100644 --- a/public/resources/css/main.scss +++ b/public/resources/css/main.scss @@ -18,6 +18,7 @@ @import 'module/main-nav'; @import 'module/side-nav'; +@import 'module/jump-nav'; @import 'module/footer'; @import 'module/dropdown'; @import 'module/hero'; @@ -31,6 +32,8 @@ @import 'module/alert'; @import 'module/card'; @import 'module/modal'; +@import 'module/shadow'; +@import 'module/showcase'; /* 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..bad54b29e9 --- /dev/null +++ b/public/resources/css/module/_showcase.scss @@ -0,0 +1,20 @@ +.showcase { + margin-bottom: $unit * 6; + + .showcase-header { + padding: $unit * 4; + background: $mist; + + h3 { + + } + + p:last-child { + margin: 0; + } + } + + .showcase-content { + padding: $unit * 4; + } +} \ No newline at end of file From 2b2c5ce972f8640c0d484e00c51f6d73f98bfe3e Mon Sep 17 00:00:00 2001 From: Alex Wolfe Date: Mon, 6 Apr 2015 06:41:24 -0700 Subject: [PATCH 2/8] updated styleguide page with partials --- public/docs/styleguide.jade | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 public/docs/styleguide.jade diff --git a/public/docs/styleguide.jade b/public/docs/styleguide.jade new file mode 100644 index 0000000000..41b03e6c9d --- /dev/null +++ b/public/docs/styleguide.jade @@ -0,0 +1,6 @@ +.grid-fluid + .c10 + != partial("/_includes/styleguide/_code-examples") + != partial("/_includes/styleguide/_alerts") + +!= partial("/_includes/styleguide/_jump-nav") \ No newline at end of file From bcaa6646a874afd76671957a51768a2b00b2622c Mon Sep 17 00:00:00 2001 From: Alex Wolfe Date: Mon, 6 Apr 2015 07:08:11 -0700 Subject: [PATCH 3/8] 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 From 69844f59e37509063db4992c6df1364486cb5818 Mon Sep 17 00:00:00 2001 From: Alex Wolfe Date: Tue, 7 Apr 2015 05:35:19 -0700 Subject: [PATCH 4/8] 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 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/_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; +} From d2cd87d7f5991cea92fabfb3a641b87d552d4471 Mon Sep 17 00:00:00 2001 From: Alex Wolfe Date: Tue, 7 Apr 2015 05:47:20 -0700 Subject: [PATCH 5/8] Basic layouts added --- .../docs/_includes/styleguide/_layouts.jade | 29 +++++++++++++++++++ public/docs/styleguide.jade | 1 + 2 files changed, 30 insertions(+) create mode 100644 public/docs/_includes/styleguide/_layouts.jade 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/styleguide.jade b/public/docs/styleguide.jade index 18f21a965c..42c827b283 100644 --- a/public/docs/styleguide.jade +++ b/public/docs/styleguide.jade @@ -1,5 +1,6 @@ .grid-fluid .c10 + != partial("/_includes/styleguide/_layouts") != partial("/_includes/styleguide/_code-examples") != partial("/_includes/styleguide/_alerts") != partial("/_includes/styleguide/_tables") From 981465f8f6dec776b637c0b1b98900d71e8f7a2f Mon Sep 17 00:00:00 2001 From: Alex Wolfe Date: Tue, 7 Apr 2015 05:49:17 -0700 Subject: [PATCH 6/8] margins --- public/resources/css/module/_showcase.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/public/resources/css/module/_showcase.scss b/public/resources/css/module/_showcase.scss index bad54b29e9..26d087317c 100644 --- a/public/resources/css/module/_showcase.scss +++ b/public/resources/css/module/_showcase.scss @@ -16,5 +16,9 @@ .showcase-content { padding: $unit * 4; + + .l-main-section { + margin-bottom: 0px; + } } } \ No newline at end of file From 5427926e0d9d9770955abd54be7cae646adf9510 Mon Sep 17 00:00:00 2001 From: Alex Wolfe Date: Tue, 7 Apr 2015 20:38:52 -0700 Subject: [PATCH 7/8] callouts added --- public/docs/_includes/styleguide/_alerts.jade | 2 +- .../docs/_includes/styleguide/_callouts.jade | 38 +++++++++++++++ public/docs/styleguide.jade | 1 + public/resources/css/main.scss | 1 + public/resources/css/module/_callout.scss | 46 +++++++++++++++++++ 5 files changed, 87 insertions(+), 1 deletion(-) create mode 100644 public/docs/_includes/styleguide/_callouts.jade create mode 100644 public/resources/css/module/_callout.scss diff --git a/public/docs/_includes/styleguide/_alerts.jade b/public/docs/_includes/styleguide/_alerts.jade index a52cb680b1..19b6d7e0f9 100644 --- a/public/docs/_includes/styleguide/_alerts.jade +++ b/public/docs/_includes/styleguide/_alerts.jade @@ -4,7 +4,7 @@ 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 or stacked + Alerts should not be used for multi-line content (user callouts insteads) or stacked on top of each other. .showcase-content 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/styleguide.jade b/public/docs/styleguide.jade index 42c827b283..07a5bb3e8c 100644 --- a/public/docs/styleguide.jade +++ b/public/docs/styleguide.jade @@ -3,6 +3,7 @@ != 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") diff --git a/public/resources/css/main.scss b/public/resources/css/main.scss index e5cee60af4..e2e450bf1e 100644 --- a/public/resources/css/main.scss +++ b/public/resources/css/main.scss @@ -31,6 +31,7 @@ @import 'module/bio-card'; @import 'module/overlay'; @import 'module/alert'; +@import 'module/callout'; @import 'module/card'; @import 'module/modal'; @import 'module/shadow'; 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 From ed6867fffd2078f21637e75ff7df45ef1bf6b182 Mon Sep 17 00:00:00 2001 From: Alex Wolfe Date: Mon, 13 Apr 2015 05:46:14 -0700 Subject: [PATCH 8/8] hide side nag for now --- public/docs/styleguide.jade | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/docs/styleguide.jade b/public/docs/styleguide.jade index 07a5bb3e8c..581e78bdb7 100644 --- a/public/docs/styleguide.jade +++ b/public/docs/styleguide.jade @@ -7,4 +7,4 @@ != partial("/_includes/styleguide/_tables") != partial("/_includes/styleguide/_aside") -!= partial("/_includes/styleguide/_jump-nav") \ No newline at end of file +//!= partial("/_includes/styleguide/_jump-nav") \ No newline at end of file