Merge pull request #29 from angular/style-guide

Style guide
This commit is contained in:
Alex Wolfe 2015-04-13 05:46:33 -07:00
commit fd0646f7f2
18 changed files with 450 additions and 59 deletions

View File

@ -43,3 +43,5 @@
footer(class="background-steel") 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>. 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

View File

@ -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

View File

@ -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.

View File

@ -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

View File

@ -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 ";

View File

@ -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

View File

@ -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...

View File

@ -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

View File

@ -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

View File

@ -77,6 +77,7 @@ a {
line-height: 32px; line-height: 32px;
} }
table th,
.text-subhead, .text-subhead,
.text-body, .text-body,
.docs-content p, .docs-content p,
@ -89,7 +90,8 @@ a {
line-height: 28px; line-height: 28px;
} }
.l-sub-section p { .l-sub-section p,
table td {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
opacity: .87; opacity: .87;
@ -103,3 +105,37 @@ a {
opacity: .54; opacity: .54;
line-height: 20px; 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;
}

View File

@ -13,6 +13,19 @@
float: right; float: right;
} }
.l-relative,
.docs-content {
position: relative;
}
.l-absolute {
position: absolute;
}
.l-fixed {
position: fixed;
}
/* /*
* Pinned Layouts (fixed) * Pinned Layouts (fixed)

View File

@ -18,19 +18,24 @@
@import 'module/main-nav'; @import 'module/main-nav';
@import 'module/side-nav'; @import 'module/side-nav';
@import 'module/jump-nav';
@import 'module/footer'; @import 'module/footer';
@import 'module/dropdown'; @import 'module/dropdown';
@import 'module/hero'; @import 'module/hero';
@import 'module/banner'; @import 'module/banner';
@import 'module/cta-bar'; @import 'module/cta-bar';
@import 'module/buttons'; @import 'module/buttons';
@import 'module/table';
@import 'module/code'; @import 'module/code';
@import 'module/sticker'; @import 'module/sticker';
@import 'module/bio-card'; @import 'module/bio-card';
@import 'module/overlay'; @import 'module/overlay';
@import 'module/alert'; @import 'module/alert';
@import 'module/callout';
@import 'module/card'; @import 'module/card';
@import 'module/modal'; @import 'module/modal';
@import 'module/shadow';
@import 'module/showcase';
/* /*

View File

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

View File

@ -80,9 +80,16 @@
footer { footer {
text-align: center; text-align: center;
padding: $unit * 2; 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;
} }
} }
} }

View File

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

View File

@ -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);
}

View File

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

View File

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