From 78391effbde98b7036cf99e4300a05ce991db169 Mon Sep 17 00:00:00 2001 From: Alex Wolfe Date: Mon, 6 Apr 2015 06:41:08 -0700 Subject: [PATCH] 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