From 2ad3ae4addc5576d1f85810ddcc6d272e0addca1 Mon Sep 17 00:00:00 2001 From: Alex Wolfe Date: Sun, 1 Mar 2015 21:11:13 -0800 Subject: [PATCH] Text formatting for quick start --- public/docs/js/_quickstart.jade | 385 ++++++++++++++------------- public/resources/css/base/_type.scss | 8 +- 2 files changed, 208 insertions(+), 185 deletions(-) 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;