diff --git a/public/docs/js/_quickstart.jade b/public/docs/js/_quickstart.jade
index eb92fd38a5..294d2de317 100644
--- a/public/docs/js/_quickstart.jade
+++ b/public/docs/js/_quickstart.jade
@@ -1,225 +1,244 @@
// STEP 1 - Install Angular ##########################
-.content-block.content-number.clearfix
- i.number.icon-number.large
+.l-main-section
+ h2#section-install-angular Install Angular
- .c11
- header
+ p.
+ Angular is still unpackaged and in alpha. This quickstart does not
+ reflect the final build process for Angular. The following setup is for those who
+ want to try out Angular while it is in alpha.
- h3#section-install-angular Install Angular
- p
- b Angular is still unpackaged and in alpha. This quickstart does not reflect the final build process for Angular.
- | The following setup is for those who want to try out Angular while it is in alpha.
- p
- | For the sake of this quickstart we recommend using the
- a(href="https://github.com/davideast/conscious") es6-shim
GitHub repository
- |. This repository will provide a faster start. es6-shim
includes Angular and dependencies to compile ES6 in incompatible browsers.
+ p.
+ For the sake of this quickstart we recommend using the
+ es6-shim
GitHub repository.
+ This repository will provide a faster start. es6-shim
includes Angular and dependencies to compile ES6 in incompatible browsers.
- p
- | Clone the repository inside of aleady existing project.
+ p Clone the repository inside of aleady existing project.
- pre.prettyprint.linenums
- code git clone https://github.com/davideast/concious.git es6-shim
+ pre.prettyprint.linenums
+ code git clone https://github.com/davideast/concious.git es6-shim
- section.docs-sub-section
- h4 A word on ES6
- p
- | Angular builds on top of ES6, the new specification of the JavaScript language. Not all ES6 features are available in all browsers. The following es6-shim repository allows you to use ES6 in the browser today.
+ .l-sub-section
+ h3 A word on ES6
+ p.
+ Angular builds on top of ES6, the new specification of the JavaScript language.
+ Not all ES6 features are available in all browsers. The following es6-shim
+ repository allows you to use ES6 in the browser today.
- p
- | Angular is available on npm. Configuring Angular to run ES6 in the browser requires a build process, detailed here.
+ p.
+ Angular is available on npm. Configuring Angular to run ES6 in the browser
+ requires a build process, detailed here.
+
+ p.
+ The es6-shim package includes Angular and dependencies needed to compile
+ ES6 in the browser. Think of the es6-shim repository as package rather than a new project.
- p
- | The es6-shim package includes Angular and dependencies needed to compile ES6 in the browser. Think of the es6-shim repository as package rather than a new project.
// STEP 2 - Import Angular ##########################
-.content-block.content-number.clearfix
- i.number.icon-number2.large
+.l-main-section
+ h2#section-transpile Import Angular
- .c11
- header
+ p.
+ Create a file named app.es6
at the root of the project.
+ The .es6
extension signifies that the file uses ES6 syntax.
+
+ p Using the ES6 module syntax you can import the required modules from Angular2.
+
+ pre.prettyprint.linenums
+ code import {Component, Template, bootstrap} from 'angular2/angular2';
+
+ p The above import statement will import the three modules from Angular. These modules load at runtime.
- h3#section-transpile Import Angular
- p
- | Create a file named app.es6
at the root of the project. The .es6
extension signifies that the file uses ES6 syntax.
- p Using the ES6 module syntax you can import the required modules from Angular2.
- pre.prettyprint.linenums
- code
- | import {Component, Template, bootstrap} from 'angular2/angular2';
- p
- | The above import statement will import the three modules from Angular. These modules load at runtime.
// STEP 3 - Create a component ##########################
-.content-block.content-number.clearfix
- i.number.icon-number3.large
+.l-main-section
- .c11
- header
+ h2#section-angular-create-account Create a component
- h3#section-angular-create-account Create a component
- p
- | Components are custom HTML elements. Angular uses components to empower HTML. Components structure and repre.prettyprint.linenumssent the UI. This quickstart demonstrates the process of creating a component. This component will have the tag of app.
+ p.
+ Components are custom HTML elements. Angular uses components to empower HTML.
+ Components structure and repre.prettyprint.linenumssent the UI. This quickstart
+ demonstrates the process of creating a component. This component will have the tag of app.
- pre.prettyprint.linenums
- code <app></app>
+ pre.prettyprint.linenums
+ code <app></app>
- p A component consists of two parts; the annotation section and the component controller.
+ p A component consists of two parts; the annotation section and the component controller.
- pre.prettyprint.linenums
- code
- | import {Component, Template, bootstrap} from 'angular2/angular2';
- |
- | // Annotation Section
- | @Component({
- | selector: 'app'
- | })
- | @Template({
- | inline: `
- | <h1>Hello {{ name }}</h1>
- | `
- | })
- | // Component Controller
- | class AppComponent {
- | constructor() {
- | this.name = "Alice";
- | }
- | }
+ pre.prettyprint.linenums
+ code.
+ import {Component, Template, bootstrap} from 'angular2/angular2';
- section.docs-sub-section
- h4 Component Annotations
+ // Annotation Section
+ @Component({
+ selector: 'app'
+ })
+ @Template({
+ inline: `
+ <h1>Hello {{ name }}</h1>
+ `
+ })
+ // Component Controller
+ class AppComponent {
+ constructor() {
+ this.name = "Alice";
+ }
+ }
+
+ .l-sub-section
+ h3 Component Annotations
+
+ p.
+ A component annotation provides meta-data about the component
.
+ An annotation can always identified by its at-sign — @
.
+ p.
+ The @Component
annotation defines the HTML tag for the component.
+ The selector property specifies the tag. The selector
property is a CSS selector.
+
+ p.
+ The @Template
annotation defines the template to apply to the
+ component. This component uses an inline template, but external templates are
+ available as well. To use an external template specify a url
property
+ and give it the path to the html file.
+
+ pre.prettyprint.linenums
+ code.
+ @Component({
+ selector: 'app'
+ })
+ @Template({
+ inline: `
+ <h1>Hello {{ name }}</h1>
+ `
+ })
+
+ p.
+ The component created above has a HTML tag of <app></app>
+ and a template of <h1>Hello {{ name }}</h1>
.
+
+ .l-sub-section
+ h3 Component Controller
+
+ p.
+ The component controller is the backing of the component's template. A component
+ controller uses ES6 class
syntax.
+
+ pre.prettyprint.linenums
+ code
+ class AppComponent {
+ constructor() {
+ this.name = "Alice";
+ }
+ }
+
+ p.
+ Templates read from their component controllers. Templates have access to any properties
+ or functions placed on the component controller.
+
+ p.
+ The template above binds to a name
property through the {{ }}
+ syntax.The body of the constructor assigns "Alice" to the name property. When the
+ template renders, Alice will appear instead of {{ name }}
.
- p A component annotation provides meta-data about the component
. An annotation can always identified by its at-sign — @
.
- p
- | The @Component
annotation defines the HTML tag for the component. The selector property specifies the tag. The selector
property is a CSS selector.
- p
- | The @Template
annotation defines the template to apply to the component. This component uses an inline template, but external templates are available as well. To use an external template specify a url
property and give it the path to the html file.
- pre.prettyprint.linenums
- code
- | @Component({
- | selector: 'app'
- | })
- | @Template({
- | inline: `
- | <h1>Hello {{ name }}</h1>
- | `
- | })
- p
- | The component created above has a HTML tag of <app></app>
and a template of <h1>Hello {{ name }}</h1>
.
- .clear
- section.docs-sub-section
- h4 Component Controller
- p
- | The component controller is the backing of the component's template. A component controller uses ES6 class
syntax.
- pre.prettyprint.linenums
- code
- | class AppComponent {
- | constructor() {
- | this.name = "Alice";
- | }
- | }
- p
- | Templates read from their component controllers. Templates have access to any properties or functions placed on the component controller.
- p
- | The template above binds to a name
property through the {{ }}
syntax.The body of the constructor assigns "Alice" to the name property. When the template renders, Alice will appear instead of {{ name }}
.
- .clear
// STEP 4 - Bootstrap ##########################
-.content-block.content-number.clearfix
- i.number.icon-number4.large
+.l-main-section
+ h2#section-transpile Bootstrap
- .c11
- header
+ p The last step to load the component on the page.
- h3#section-transpile Bootstrap
- p
- | The last step to load the component on the page.
+ .l-sub-section
+ h3 The bootstrap
function
+ p.
+ Angular provides a bootstrap
function that renders a
+ component to the page. The bootstrap
function takes a
+ component as a parameter. Any child components inside of the parent
+ component will render as well.
+
+ pre.prettyprint.linenums
+ code bootstrap(AppComponent);
- section.docs-sub-section
- h4 The bootstrap
function
- p
- | Angular provides a bootstrap
function that renders a component to the page. The bootstrap
function takes a component as a parameter. Any child components inside of the parent component will render as well.
- code
- pre.prettyprint.linenums bootstrap(AppComponent);
- .clear
// STEP 5 - Declare the HTML ##########################
-.content-block.content-number.clearfix
- i.number.icon-number5.large
- .c11
- header
+.l-main-section
- h3#section-angular-create-account Declare the HTML
- p
- | Create an index.html
file at the root of the project. Include the es6-shim.js
file in the head
tag. Now, declare the app component the body
. The es6-shim must load before any application code.
+ h2#section-angular-create-account Declare the HTML
- code
- pre.prettyprint.linenums
- | <html>
- | <head>
- | <title>Angular 2 Quickstart</title>
- | <script src="/es6-shim/dist/es6-shim.js"></script>
- | </head>
- | <body>
- |
- | <!-- The app component created in app.es6 -->
- | <app></app>
- |
- | </body>
- | </html>
+ p.
+ Create an index.html
file at the root of the project.
+ Include the es6-shim.js
file in the head
tag.
+ Now, declare the app component the body
. The es6-shim must
+ load before any application code.
- section.docs-sub-section
- h4 Load the component module
- p
- | The last step is to load the module for the app component. The es6-shim file comes packaged with the System library. Most browsers today do not support ES6 module loading. System provides module loading functionality to these browsers.
+ pre.prettyprint.linenums
+ code.
+ <html>
+ <head>
+ <title>Angular 2 Quickstart</title>
+ <script src="/es6-shim/dist/es6-shim.js"></script>
+ </head>
+ <body>
+
+ <!-- The app component created in app.es6 -->
+ <app></app>
+
+ </body>
+ </html>
- p
- | To load the needed modules, System needs to know where to load the files from. The paths property in System specifies the location of the files.
+ .l-sub-section
+ h3 Load the component module
+ p.
+ The last step is to load the module for the app component.
+ The es6-shim file comes packaged with the System library.
+ Most browsers today do not support ES6 module loading. System
+ provides module loading functionality to these browsers.
- p Tell System about three paths:
- ol
- li Angular - The Angular framework.
- li Runtime assertions - Optional assertions for runtime type checking.
- li The app component created above - The component to display on the page.
+ p.
+ To load the needed modules, System needs to know where to
+ load the files from. The paths property in System specifies
+ the location of the files.
- code
- pre.prettyprint.linenums
- | <html>
- | <head>
- | <title>Angular 2 Quickstart</title>
- | <script src="/es6-shim/dist/es6-shim.js"></script>
- | </head>
- | <body>
- |
- | <!-- The app component created in app.es6 -->
- | <app></app>
- |
- | <script>
- | // Rewrite the paths to load the files
- | System.paths = {
- | 'angular2/*':'/es6-shim/angular2/*.js',
- | 'rtts_assert/*': '/es6-shim/rtts_assert/*.js',
- | 'app': 'app.es6'
- | };
- |
- | // Kick off the application
- | System.import('app');
- | </script>
- | </body>
- | </html>
- .clear
+ p Tell System about three paths:
+ ol
+ li Angular - The Angular framework.
+ li Runtime assertions - Optional assertions for runtime type checking.
+ li The app component created above - The component to display on the page.
- p
- | Run the root of your project on a local server.
+ pre.prettyprint.linenums
+ code.
+ <html>
+ <head>
+ <title>Angular 2 Quickstart</title>
+ <script src="/es6-shim/dist/es6-shim.js"></script>
+ </head>
+ <body>
-.content-block.content-number.clearfix
- i.number.icon-number6.large
+ <!-- The app component created in app.es6 -->
+ <app></app>
- .c11
- header
+ <script>
+ // Rewrite the paths to load the files
+ System.paths = {
+ 'angular2/*':'/es6-shim/angular2/*.js',
+ 'rtts_assert/*': '/es6-shim/rtts_assert/*.js',
+ 'app': 'app.es6'
+ };
- h3#section-transpile Extra-credit
- p
- | Learn some template syntax for extra-credit.
+ // Kick off the application
+ System.import('app');
+ </script>
+ </body>
+ </html>
+
+ p Run the root of your project on a local server.
+
+
+
+// WHAT'S NEXT... ##########################
+.l-main-section
+ h2#section-transpile Extra-credit
+
+ p Learn some template syntax for extra-credit.
diff --git a/public/resources/css/base/_type.scss b/public/resources/css/base/_type.scss
index beb9c51c80..eeb0ef0cbf 100644
--- a/public/resources/css/base/_type.scss
+++ b/public/resources/css/base/_type.scss
@@ -10,6 +10,8 @@ body {
color: $platinum;
}
+
+
a {
color: $blueberry;
}
@@ -49,7 +51,7 @@ a {
.text-display-1,
.docs-content h1 {
- margin: 0px;
+ margin: 0px 0px ($unit * 2) 0px;
font-size: 34px;
font-weight: 400;
opacity: .54;
@@ -76,7 +78,9 @@ a {
.text-subhead,
.text-body,
-.docs-content p {
+.docs-content p,
+.docs-content ul,
+.docs-content ol {
margin: 0px 0px ($unit * 2) 0px;
font-size: 16px;
font-weight: 400;