docs: instrucs for "download-and-go" development with quickstart source repo

public/docs/_examples/quickstart/ts/styles.1.css

@@ -0,0 +1,25 @@
+/* #docregion */
+/* Master Styles */
+h1 {
+  color: #369; 
+  font-family: Arial, Helvetica, sans-serif;   
+  font-size: 250%;
+}
+h2, h3 { 
+  color: #444;
+  font-family: Arial, Helvetica, sans-serif;   
+  font-weight: lighter;
+}
+body { 
+  margin: 2em; 
+}
+body, input[text], button { 
+  color: #888; 
+  font-family: Cambria, Georgia; 
+}
+
+/* 
+ * See https://github.com/angular/angular.io/blob/master/public/docs/_examples/styles.css
+ * for the full set of master styles used by the documentation samples
+ */
+ 

public/docs/ts/latest/_quickstart_repo.jade

@@ -0,0 +1,4 @@
+.l-sub-section
+  :marked
+    Alternatively, begin with a
+    [download of the QuickStart source](https://github.com/IdeaBlade/angular2-quickstart/blob/master/README.md).

public/docs/ts/latest/guide/attribute-directives.jade

@@ -57,8 +57,9 @@ include ../_util-fns
 :marked
   ### Our first draft
   Create a new project folder (`attribute-directives`) and follow the steps in the [QuickStart](../quickstart.html).
-  As an alternative, you can clone the QuickStart from this [repository](https://github.com/IdeaBlade/angular2-quickstart).
+
-  
+include ../_quickstart_repo
+:marked
   Add a new file to the `app` folder called `highlight.directive.ts` and add the following code:
 +makeExample('attribute-directives/ts/app/highlight.directive.1.ts', null, 'app/highlight.directive.ts')
 

public/docs/ts/latest/guide/displaying-data.jade

@@ -31,6 +31,8 @@ figure.image-display
   Create a new project folder (`displaying-data`) and follow the steps in the [QuickStart](../quickstart.html).
   As an alternative, you can clone the QuickStart from this [repository](https://github.com/IdeaBlade/angular2-quickstart).
 
+include ../_quickstart_repo
+:marked
   Then modify the `app.component.ts` file by changing the template and the body of the component.
   When we're done, it should look like this:
 

public/docs/ts/latest/guide/forms.jade

@@ -87,6 +87,8 @@ figure.image-display
   Create a new project folder (`angular2-forms`) and follow the steps in the [QuickStart](../quickstart.html).
   As an alternative, you can clone the QuickStart from this [repository](https://github.com/IdeaBlade/angular2-quickstart).
 
+include ../_quickstart_repo
+:marked
   ## Create the Hero Model Class
 
   As users enter form data, we capture their changes and update an instance of a model.

public/docs/ts/latest/quickstart.jade

@@ -3,7 +3,12 @@ include _util-fns
 :marked
   Our QuickStart goal is to build and run a super-simple Angular 2 application in TypeScript.
 
-  ## See It Run!
+  # Download the code
+  In a hurray?
+  [Download the QuickStart source](https://github.com/IdeaBlade/angular2-quickstart/blob/master/README.md)
+  and start coding.
+  
+  # See it run
 
   Try this <a href="/resources/live-examples/quickstart/ts/plnkr.html" target="_blank">live example</a>
   which loads the sample app in <a href="http://plnkr.co/" title="Plunker" target="_blank">plunker</a>
@@ -11,7 +16,9 @@ include _util-fns
 
 figure.image-display
   img(src='/resources/images/devguide/quickstart/my-first-app.png' alt="Output of QuickStart app")
+
 :marked
+  # Learn
   Of course we don't build apps to run in plunker.
   The following steps establish a development environment for the documentation samples
   that also can be the foundation for our real world applications. At a high level, we will
@@ -422,6 +429,15 @@ code-example(format="").
     metadata, finds the `my-app` selector, locates an element tag named `my-app`,
     and loads our application between those tags.
 
+.l-main-section
+:marked
+  ## Add some style
+  Styles aren't essential but they're nice and the `index.html` assumes we have
+  a stylesheet called `styles.css`.
+   
+  Create a `styles.css` in the root folder and start styling, perhaps with this set:
++makeExample('quickstart/ts/styles.1.css', null, 'styles.css (excerpt)')(format=".")
+  
 .l-main-section
 :marked
   ## Compile and run!
@@ -470,6 +486,7 @@ figure.image-display
     .file typings ...
     .file index.html
     .file package.json
+    .file styles.css
     .file tsconfig.json
     .file typings.json
 :marked
@@ -480,9 +497,15 @@ figure.image-display
     quickstart/ts/index.html,
     quickstart/ts/package.1.json,
     quickstart/ts/tsconfig.1.json,
-    quickstart/ts/typings.1.json
+    quickstart/ts/typings.1.json,
+    quickstart/ts/styles.1.css    
   `,null,
-  `app/app.component.ts, app/main.ts, index.html,package.json, tsconfig.json, typings.json`)
+  `app/app.component.ts, 
+  app/main.ts, 
+  index.html,package.json, 
+  tsconfig.json, 
+  typings.json,
+  styles.css`)
 :marked
 
 .l-main-section

public/docs/ts/latest/tutorial/toh-pt1.jade

@@ -7,12 +7,12 @@ include ../_util-fns
 
   [Run the live example for part 1](/resources/live-examples/toh-1/ts/plnkr.html)
 
-  Follow the "QuickStart" steps. They provide the prerequisites, the folder structure,
+  Create a folder called `angular2-tour-of-heroes` and follow the [QuickStart](../quickstart.html) steps 
-  and the core files for our Tour of Heroes.
+  which provide the prerequisites, the folder structure, and the core files for our Tour of Heroes.
 
-  Copy the "QuickStart" code to a new folder and rename the folder `angular2-tour-of-heroes`.
+include ../_quickstart_repo
-  
+:marked
-  You can also "QuickStart" from this [repository](https://github.com/IdeaBlade/angular2-quickstart). We should have the following structure:
+  We should have the following structure:
 
 .filetree
   .file angular2-tour-of-heroes
@@ -25,6 +25,7 @@ include ../_util-fns
     .file typings ...      
     .file index.html
     .file package.json
+    .file styles.css
     .file tsconfig.json
     .file typings.json
 :marked