From ddfbbb5ebb1eec7e4b3655a99181c236791e7b51 Mon Sep 17 00:00:00 2001
From: John Papa <john@johnpapa.net>
Date: Thu, 28 Apr 2016 00:58:50 -0700
Subject: [PATCH] docs(style-guide): add style-guide - v.5

---
 .../docs/_examples/style-guide/ts/.gitignore  |    1 +
 .../style-guide/ts/01-01/app/app.component.ts |    2 +-
 .../ts/01-01/app/heroes/heroes.component.ts   |    4 +-
 .../app/heroes/{ => shared}/hero.model.ts     |    0
 .../app/heroes/{ => shared}/hero.service.ts   |    2 +-
 .../app/heroes/{ => shared}/mock-heroes.ts    |    0
 .../02-07/app/heroes/hero.component.avoid.ts  |    3 +
 .../02-07/app/users/users.component.avoid.ts  |    3 +
 .../app/shared/validate.directive.avoid.ts    |    3 +
 .../app/shared/exception.service.avoid.ts     |   11 +
 .../ts/03-01/app/shared/exception.service.ts  |    9 +
 .../ts/03-02/app/shared/data.service.avoid.ts |    7 +
 .../ts/03-02/app/shared/data.service.ts       |    5 +
 .../shared/hero-collector.service.avoid.ts    |   15 +
 .../app/shared/hero-collector.service.ts      |   13 +
 .../ts/03-03/app/shared/hero.model.avoid.ts   |   14 +
 .../ts/03-03/app/shared/hero.model.ts         |    7 +
 .../app/shared/toast/toast.service.avoid.ts   |   27 +
 .../03-04/app/shared/toast/toast.service.ts   |   25 +
 .../ts/03-05/app/+heroes/shared/hero.model.ts |    7 +
 .../app/+heroes/shared/hero.service.avoid.ts  |   33 +
 .../03-05/app/+heroes/shared/hero.service.ts  |   31 +
 .../ts/03-05/app/shared/exception.service.ts  |    4 +
 .../style-guide/ts/03-05/app/shared/index.ts  |    6 +
 .../ts/03-05/app/shared/spinner/index.ts      |    3 +
 .../app/shared/spinner/spinner.component.ts   |   16 +
 .../app/shared/spinner/spinner.service.ts     |   12 +
 .../ts/03-05/app/shared/toast/index.ts        |    3 +
 .../03-05/app/shared/toast/toast.component.ts |   14 +
 .../03-05/app/shared/toast/toast.service.ts   |    6 +
 .../ts/03-06/app/+heroes/shared/hero.model.ts |    7 +
 .../app/+heroes/shared/hero.service.avoid.ts  |   32 +
 .../03-06/app/+heroes/shared/hero.service.ts  |   31 +
 .../ts/03-06/app/shared/exception.service.ts  |    4 +
 .../style-guide/ts/03-06/app/shared/index.ts  |    6 +
 .../ts/03-06/app/shared/spinner/index.ts      |    3 +
 .../app/shared/spinner/spinner.component.ts   |   16 +
 .../app/shared/spinner/spinner.service.ts     |   12 +
 .../ts/03-06/app/shared/toast/index.ts        |    3 +
 .../03-06/app/shared/toast/toast.component.ts |   14 +
 .../03-06/app/shared/toast/toast.service.ts   |    6 +
 .../app/+heroes/heroes.component.avoid.ts     |   25 +
 .../ts/04-10/app/+heroes/heroes.component.ts  |   25 +
 .../style-guide/ts/04-10/app/+heroes/index.ts |    1 +
 .../style-guide/ts/04-10/app/app.component.ts |   12 +
 .../style-guide/ts/04-10/app/shared/config.ts |    6 +
 .../ts/04-10/app/shared/entity.service.ts     |    4 +
 .../ts/04-10/app/shared/exception.service.ts  |    4 +
 .../filter-text/filter-text.component.ts      |   19 +
 .../shared/filter-text/filter-text.service.ts |   11 +
 .../ts/04-10/app/shared/filter-text/index.ts  |    3 +
 .../style-guide/ts/04-10/app/shared/index.ts  |   30 +
 .../ts/04-10/app/shared/init-caps.pipe.ts     |    8 +
 .../ts/04-10/app/shared/modal/index.ts        |    3 +
 .../04-10/app/shared/modal/modal.component.ts |   14 +
 .../04-10/app/shared/modal/modal.service.ts   |    6 +
 .../ts/04-10/app/shared/nav/index.ts          |    2 +
 .../ts/04-10/app/shared/nav/nav.component.ts  |   17 +
 .../ts/04-10/app/shared/spinner/index.ts      |    3 +
 .../app/shared/spinner/spinner.component.ts   |   16 +
 .../app/shared/spinner/spinner.service.ts     |   12 +
 .../ts/04-10/app/shared/toast/index.ts        |    3 +
 .../04-10/app/shared/toast/toast.component.ts |   14 +
 .../04-10/app/shared/toast/toast.service.ts   |    6 +
 .../style-guide/ts/04-10/app/typings.d.ts     |    1 +
 .../style-guide/ts/04-13/app/+heroes/index.ts |    2 +
 .../ts/04-13/app/app.component.avoid.ts       |   11 +
 .../ts/04-14/app/heroes/heroes.component.css  |   28 +
 .../ts/04-14/app/heroes/heroes.component.html |   12 +
 .../ts/04-14/app/heroes/heroes.component.ts   |   19 +
 .../app/heroes/shared}/hero.model.ts          |    0
 .../ts/04-14/app/shared/logger.service.ts     |    9 +
 .../style-guide/ts/04-15/app/+heroes/index.ts |    2 +
 .../ts/04-15/app/app.component.avoid.ts       |   11 +
 .../style-guide/ts/04-16/app/+heroes/index.ts |    2 +
 .../ts/04-16/app/app.component.avoid.ts       |   11 +
 .../hero-button.component.avoid.ts            |    3 +
 .../hero-button}/hero-button.component.ts     |    0
 .../hero-button.component.avoid.html          |    0
 .../hero-button.component.avoid.ts            |    3 +
 .../hero-button}/hero-button.component.ts     |    0
 .../app/heroes/heroes.component.avoid.ts      |    6 +
 .../ts/05-04/app/heroes/heroes.component.ts   |    4 +-
 .../app/heroes/shared}/hero.model.ts          |    0
 .../hero-button.component.avoid.ts            |    3 +
 .../hero-button}/hero-button.component.ts     |    0
 .../hero-button.component.avoid.ts            |    3 +
 .../hero-button}/hero-button.component.ts     |    0
 .../toast/toast.component.avoid.ts            |    3 +
 .../app/{ => shared}/toast/toast.component.ts |    0
 .../app/heroes/hero-list.component.avoid.ts   |   18 -
 .../hero-list/hero-list.component.avoid.ts    |   35 +
 .../{ => hero-list}/hero-list.component.ts    |    4 +-
 .../05-16/app/heroes/hero.component.avoid.ts  |    3 +-
 .../heroes-list.component.avoid.ts            |    5 +
 .../{ => hero-list}/heroes-list.component.ts  |    2 +-
 .../ts/05-17/app/heroes/shared/hero.model.ts  |    5 +
 .../app/shared/validate.directive.avoid.ts    |   16 +
 .../ts/06-03/app/shared/validate.directive.ts |   21 +
 .../{ => shared}/hero-arena.service.avoid.ts  |    6 +
 .../heroes/{ => shared}/hero-arena.service.ts |    2 +-
 .../ts/07-04/app/heroes/shared/index.ts       |    4 +-
 .../hero-button.component.avoid.ts            |    3 +
 .../hero-button}/hero-button.component.ts     |    0
 .../style-guide/ts/10-01/app/app.component.ts |    6 +-
 .../app/dashboard/dashboard.component.ts      |   11 +
 .../ts/10-01/app/heroes/heroes.component.ts   |   11 +
 .../10-01/app/heroes/shared/hero.service.ts   |    8 +
 .../ts/10-01/app/shared/nav/nav.component.ts  |   12 +
 public/docs/ts/latest/guide/style-guide.jade  | 1498 ++++++++++++-----
 public/resources/css/module/_style-guide.scss |   39 +-
 111 files changed, 2075 insertions(+), 431 deletions(-)
 create mode 100644 public/docs/_examples/style-guide/ts/.gitignore
 rename public/docs/_examples/style-guide/ts/01-01/app/heroes/{ => shared}/hero.model.ts (100%)
 rename public/docs/_examples/style-guide/ts/01-01/app/heroes/{ => shared}/hero.service.ts (78%)
 rename public/docs/_examples/style-guide/ts/01-01/app/heroes/{ => shared}/mock-heroes.ts (100%)
 create mode 100644 public/docs/_examples/style-guide/ts/03-01/app/shared/exception.service.avoid.ts
 create mode 100644 public/docs/_examples/style-guide/ts/03-01/app/shared/exception.service.ts
 create mode 100644 public/docs/_examples/style-guide/ts/03-02/app/shared/data.service.avoid.ts
 create mode 100644 public/docs/_examples/style-guide/ts/03-02/app/shared/data.service.ts
 create mode 100644 public/docs/_examples/style-guide/ts/03-03/app/shared/hero-collector.service.avoid.ts
 create mode 100644 public/docs/_examples/style-guide/ts/03-03/app/shared/hero-collector.service.ts
 create mode 100644 public/docs/_examples/style-guide/ts/03-03/app/shared/hero.model.avoid.ts
 create mode 100644 public/docs/_examples/style-guide/ts/03-03/app/shared/hero.model.ts
 create mode 100644 public/docs/_examples/style-guide/ts/03-04/app/shared/toast/toast.service.avoid.ts
 create mode 100644 public/docs/_examples/style-guide/ts/03-04/app/shared/toast/toast.service.ts
 create mode 100644 public/docs/_examples/style-guide/ts/03-05/app/+heroes/shared/hero.model.ts
 create mode 100644 public/docs/_examples/style-guide/ts/03-05/app/+heroes/shared/hero.service.avoid.ts
 create mode 100644 public/docs/_examples/style-guide/ts/03-05/app/+heroes/shared/hero.service.ts
 create mode 100644 public/docs/_examples/style-guide/ts/03-05/app/shared/exception.service.ts
 create mode 100644 public/docs/_examples/style-guide/ts/03-05/app/shared/index.ts
 create mode 100644 public/docs/_examples/style-guide/ts/03-05/app/shared/spinner/index.ts
 create mode 100644 public/docs/_examples/style-guide/ts/03-05/app/shared/spinner/spinner.component.ts
 create mode 100644 public/docs/_examples/style-guide/ts/03-05/app/shared/spinner/spinner.service.ts
 create mode 100644 public/docs/_examples/style-guide/ts/03-05/app/shared/toast/index.ts
 create mode 100644 public/docs/_examples/style-guide/ts/03-05/app/shared/toast/toast.component.ts
 create mode 100644 public/docs/_examples/style-guide/ts/03-05/app/shared/toast/toast.service.ts
 create mode 100644 public/docs/_examples/style-guide/ts/03-06/app/+heroes/shared/hero.model.ts
 create mode 100644 public/docs/_examples/style-guide/ts/03-06/app/+heroes/shared/hero.service.avoid.ts
 create mode 100644 public/docs/_examples/style-guide/ts/03-06/app/+heroes/shared/hero.service.ts
 create mode 100644 public/docs/_examples/style-guide/ts/03-06/app/shared/exception.service.ts
 create mode 100644 public/docs/_examples/style-guide/ts/03-06/app/shared/index.ts
 create mode 100644 public/docs/_examples/style-guide/ts/03-06/app/shared/spinner/index.ts
 create mode 100644 public/docs/_examples/style-guide/ts/03-06/app/shared/spinner/spinner.component.ts
 create mode 100644 public/docs/_examples/style-guide/ts/03-06/app/shared/spinner/spinner.service.ts
 create mode 100644 public/docs/_examples/style-guide/ts/03-06/app/shared/toast/index.ts
 create mode 100644 public/docs/_examples/style-guide/ts/03-06/app/shared/toast/toast.component.ts
 create mode 100644 public/docs/_examples/style-guide/ts/03-06/app/shared/toast/toast.service.ts
 create mode 100644 public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.avoid.ts
 create mode 100644 public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.ts
 create mode 100644 public/docs/_examples/style-guide/ts/04-10/app/+heroes/index.ts
 create mode 100644 public/docs/_examples/style-guide/ts/04-10/app/app.component.ts
 create mode 100644 public/docs/_examples/style-guide/ts/04-10/app/shared/config.ts
 create mode 100644 public/docs/_examples/style-guide/ts/04-10/app/shared/entity.service.ts
 create mode 100644 public/docs/_examples/style-guide/ts/04-10/app/shared/exception.service.ts
 create mode 100644 public/docs/_examples/style-guide/ts/04-10/app/shared/filter-text/filter-text.component.ts
 create mode 100644 public/docs/_examples/style-guide/ts/04-10/app/shared/filter-text/filter-text.service.ts
 create mode 100644 public/docs/_examples/style-guide/ts/04-10/app/shared/filter-text/index.ts
 create mode 100644 public/docs/_examples/style-guide/ts/04-10/app/shared/index.ts
 create mode 100644 public/docs/_examples/style-guide/ts/04-10/app/shared/init-caps.pipe.ts
 create mode 100644 public/docs/_examples/style-guide/ts/04-10/app/shared/modal/index.ts
 create mode 100644 public/docs/_examples/style-guide/ts/04-10/app/shared/modal/modal.component.ts
 create mode 100644 public/docs/_examples/style-guide/ts/04-10/app/shared/modal/modal.service.ts
 create mode 100644 public/docs/_examples/style-guide/ts/04-10/app/shared/nav/index.ts
 create mode 100644 public/docs/_examples/style-guide/ts/04-10/app/shared/nav/nav.component.ts
 create mode 100644 public/docs/_examples/style-guide/ts/04-10/app/shared/spinner/index.ts
 create mode 100644 public/docs/_examples/style-guide/ts/04-10/app/shared/spinner/spinner.component.ts
 create mode 100644 public/docs/_examples/style-guide/ts/04-10/app/shared/spinner/spinner.service.ts
 create mode 100644 public/docs/_examples/style-guide/ts/04-10/app/shared/toast/index.ts
 create mode 100644 public/docs/_examples/style-guide/ts/04-10/app/shared/toast/toast.component.ts
 create mode 100644 public/docs/_examples/style-guide/ts/04-10/app/shared/toast/toast.service.ts
 create mode 100644 public/docs/_examples/style-guide/ts/04-10/app/typings.d.ts
 create mode 100644 public/docs/_examples/style-guide/ts/04-13/app/+heroes/index.ts
 create mode 100644 public/docs/_examples/style-guide/ts/04-13/app/app.component.avoid.ts
 create mode 100644 public/docs/_examples/style-guide/ts/04-14/app/heroes/heroes.component.css
 create mode 100644 public/docs/_examples/style-guide/ts/04-14/app/heroes/heroes.component.html
 create mode 100644 public/docs/_examples/style-guide/ts/04-14/app/heroes/heroes.component.ts
 rename public/docs/_examples/style-guide/ts/{05-04/app/heroes => 04-14/app/heroes/shared}/hero.model.ts (100%)
 create mode 100644 public/docs/_examples/style-guide/ts/04-14/app/shared/logger.service.ts
 create mode 100644 public/docs/_examples/style-guide/ts/04-15/app/+heroes/index.ts
 create mode 100644 public/docs/_examples/style-guide/ts/04-15/app/app.component.avoid.ts
 create mode 100644 public/docs/_examples/style-guide/ts/04-16/app/+heroes/index.ts
 create mode 100644 public/docs/_examples/style-guide/ts/04-16/app/app.component.avoid.ts
 rename public/docs/_examples/style-guide/ts/05-02/app/heroes/{ => shared/hero-button}/hero-button.component.avoid.ts (54%)
 rename public/docs/_examples/style-guide/ts/05-02/app/heroes/{ => shared/hero-button}/hero-button.component.ts (100%)
 rename public/docs/_examples/style-guide/ts/05-03/app/heroes/{ => shared/hero-button}/hero-button.component.avoid.html (100%)
 rename public/docs/_examples/style-guide/ts/05-03/app/heroes/{ => shared/hero-button}/hero-button.component.avoid.ts (54%)
 rename public/docs/_examples/style-guide/ts/05-03/app/heroes/{ => shared/hero-button}/hero-button.component.ts (100%)
 rename public/docs/_examples/style-guide/ts/{05-17/app/heroes => 05-04/app/heroes/shared}/hero.model.ts (100%)
 rename public/docs/_examples/style-guide/ts/05-12/app/heroes/{ => shared/hero-button}/hero-button.component.avoid.ts (71%)
 rename public/docs/_examples/style-guide/ts/05-12/app/heroes/{ => shared/hero-button}/hero-button.component.ts (100%)
 rename public/docs/_examples/style-guide/ts/05-13/app/heroes/{ => shared/hero-button}/hero-button.component.avoid.ts (68%)
 rename public/docs/_examples/style-guide/ts/05-13/app/heroes/{ => shared/hero-button}/hero-button.component.ts (100%)
 rename public/docs/_examples/style-guide/ts/05-14/app/{ => shared}/toast/toast.component.avoid.ts (90%)
 rename public/docs/_examples/style-guide/ts/05-14/app/{ => shared}/toast/toast.component.ts (100%)
 delete mode 100644 public/docs/_examples/style-guide/ts/05-15/app/heroes/hero-list.component.avoid.ts
 create mode 100644 public/docs/_examples/style-guide/ts/05-15/app/heroes/hero-list/hero-list.component.avoid.ts
 rename public/docs/_examples/style-guide/ts/05-15/app/heroes/{ => hero-list}/hero-list.component.ts (89%)
 rename public/docs/_examples/style-guide/ts/05-17/app/heroes/{ => hero-list}/heroes-list.component.avoid.ts (74%)
 rename public/docs/_examples/style-guide/ts/05-17/app/heroes/{ => hero-list}/heroes-list.component.ts (90%)
 create mode 100644 public/docs/_examples/style-guide/ts/05-17/app/heroes/shared/hero.model.ts
 create mode 100644 public/docs/_examples/style-guide/ts/06-03/app/shared/validate.directive.avoid.ts
 create mode 100644 public/docs/_examples/style-guide/ts/06-03/app/shared/validate.directive.ts
 rename public/docs/_examples/style-guide/ts/07-04/app/heroes/{ => shared}/hero-arena.service.avoid.ts (50%)
 rename public/docs/_examples/style-guide/ts/07-04/app/heroes/{ => shared}/hero-arena.service.ts (85%)
 rename public/docs/_examples/style-guide/ts/09-01/app/{ => heroes/shared/hero-button}/hero-button.component.avoid.ts (71%)
 rename public/docs/_examples/style-guide/ts/09-01/app/{ => heroes/shared/hero-button}/hero-button.component.ts (100%)
 create mode 100644 public/docs/_examples/style-guide/ts/10-01/app/dashboard/dashboard.component.ts
 create mode 100644 public/docs/_examples/style-guide/ts/10-01/app/heroes/heroes.component.ts
 create mode 100644 public/docs/_examples/style-guide/ts/10-01/app/heroes/shared/hero.service.ts
 create mode 100644 public/docs/_examples/style-guide/ts/10-01/app/shared/nav/nav.component.ts

diff --git a/public/docs/_examples/style-guide/ts/.gitignore b/public/docs/_examples/style-guide/ts/.gitignore
new file mode 100644
index 0000000000..a6c7c2852d
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/.gitignore
@@ -0,0 +1 @@
+*.js
diff --git a/public/docs/_examples/style-guide/ts/01-01/app/app.component.ts b/public/docs/_examples/style-guide/ts/01-01/app/app.component.ts
index 8748c7443c..1471bb3b86 100644
--- a/public/docs/_examples/style-guide/ts/01-01/app/app.component.ts
+++ b/public/docs/_examples/style-guide/ts/01-01/app/app.component.ts
@@ -2,7 +2,7 @@
 import { Component } from 'angular2/core';
 
 import { HeroesComponent } from './heroes/heroes.component';
-import { HeroService } from './heroes/hero.service';
+import { HeroService } from './heroes/shared/hero.service';
 
 @Component({
   selector: 'toh-app',
diff --git a/public/docs/_examples/style-guide/ts/01-01/app/heroes/heroes.component.ts b/public/docs/_examples/style-guide/ts/01-01/app/heroes/heroes.component.ts
index ed21cff00b..1fdc48a338 100644
--- a/public/docs/_examples/style-guide/ts/01-01/app/heroes/heroes.component.ts
+++ b/public/docs/_examples/style-guide/ts/01-01/app/heroes/heroes.component.ts
@@ -1,8 +1,8 @@
 // #docregion
 import { Component, OnInit } from 'angular2/core';
 
-import { Hero }        from './hero.model';
-import { HeroService } from './hero.service';
+import { Hero }        from './shared/hero.model';
+import { HeroService } from './shared/hero.service';
 
 @Component({
   selector: 'toh-heroes',
diff --git a/public/docs/_examples/style-guide/ts/01-01/app/heroes/hero.model.ts b/public/docs/_examples/style-guide/ts/01-01/app/heroes/shared/hero.model.ts
similarity index 100%
rename from public/docs/_examples/style-guide/ts/01-01/app/heroes/hero.model.ts
rename to public/docs/_examples/style-guide/ts/01-01/app/heroes/shared/hero.model.ts
diff --git a/public/docs/_examples/style-guide/ts/01-01/app/heroes/hero.service.ts b/public/docs/_examples/style-guide/ts/01-01/app/heroes/shared/hero.service.ts
similarity index 78%
rename from public/docs/_examples/style-guide/ts/01-01/app/heroes/hero.service.ts
rename to public/docs/_examples/style-guide/ts/01-01/app/heroes/shared/hero.service.ts
index 877767fd87..10b25d8e43 100644
--- a/public/docs/_examples/style-guide/ts/01-01/app/heroes/hero.service.ts
+++ b/public/docs/_examples/style-guide/ts/01-01/app/heroes/shared/hero.service.ts
@@ -1,7 +1,7 @@
 // #docregion
 import { Injectable } from 'angular2/core';
 
-import { HEROES }     from './mock-heroes';
+import { HEROES } from './mock-heroes';
 
 @Injectable()
 export class HeroService {
diff --git a/public/docs/_examples/style-guide/ts/01-01/app/heroes/mock-heroes.ts b/public/docs/_examples/style-guide/ts/01-01/app/heroes/shared/mock-heroes.ts
similarity index 100%
rename from public/docs/_examples/style-guide/ts/01-01/app/heroes/mock-heroes.ts
rename to public/docs/_examples/style-guide/ts/01-01/app/heroes/shared/mock-heroes.ts
diff --git a/public/docs/_examples/style-guide/ts/02-07/app/heroes/hero.component.avoid.ts b/public/docs/_examples/style-guide/ts/02-07/app/heroes/hero.component.avoid.ts
index 7758e4a391..b6c868c53f 100644
--- a/public/docs/_examples/style-guide/ts/02-07/app/heroes/hero.component.avoid.ts
+++ b/public/docs/_examples/style-guide/ts/02-07/app/heroes/hero.component.avoid.ts
@@ -1,4 +1,6 @@
 // #docregion
+import { Component } from 'angular2/core';
+// #docregion example
 /* avoid */
 
 // HeroComponent is in the Tour of Heroes feature
@@ -6,3 +8,4 @@
   selector: 'hero'
 })
 export class HeroComponent {}
+// #enddocregion example
diff --git a/public/docs/_examples/style-guide/ts/02-07/app/users/users.component.avoid.ts b/public/docs/_examples/style-guide/ts/02-07/app/users/users.component.avoid.ts
index f87de740b5..f46fa0b76e 100644
--- a/public/docs/_examples/style-guide/ts/02-07/app/users/users.component.avoid.ts
+++ b/public/docs/_examples/style-guide/ts/02-07/app/users/users.component.avoid.ts
@@ -1,4 +1,6 @@
 // #docregion
+import { Component } from 'angular2/core';
+// #docregion example
 /* avoid */
 
 // UsersComponent is in an Admin feature
@@ -6,3 +8,4 @@
   selector: 'users'
 })
 export class UsersComponent {}
+// #enddocregion example
diff --git a/public/docs/_examples/style-guide/ts/02-08/app/shared/validate.directive.avoid.ts b/public/docs/_examples/style-guide/ts/02-08/app/shared/validate.directive.avoid.ts
index 078fafdd6e..43af3609b3 100644
--- a/public/docs/_examples/style-guide/ts/02-08/app/shared/validate.directive.avoid.ts
+++ b/public/docs/_examples/style-guide/ts/02-08/app/shared/validate.directive.avoid.ts
@@ -1,7 +1,10 @@
 // #docregion
+import { Directive } from 'angular2/core';
+// #docregion example
 /* avoid */
 
 @Directive({
   selector: '[validate]'
 })
 export class ValidateDirective {}
+// #enddocregion example
diff --git a/public/docs/_examples/style-guide/ts/03-01/app/shared/exception.service.avoid.ts b/public/docs/_examples/style-guide/ts/03-01/app/shared/exception.service.avoid.ts
new file mode 100644
index 0000000000..2d2e6bef5c
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-01/app/shared/exception.service.avoid.ts
@@ -0,0 +1,11 @@
+// #docregion
+import { Injectable } from 'angular2/core';
+
+@Injectable()
+// #docregion example
+/* avoid */
+
+export class exceptionService {
+  constructor() { }
+}
+// #enddocregion example
diff --git a/public/docs/_examples/style-guide/ts/03-01/app/shared/exception.service.ts b/public/docs/_examples/style-guide/ts/03-01/app/shared/exception.service.ts
new file mode 100644
index 0000000000..2bb3b15cc0
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-01/app/shared/exception.service.ts
@@ -0,0 +1,9 @@
+// #docregion
+import { Injectable } from 'angular2/core';
+
+@Injectable()
+// #docregion example
+export class ExceptionService {
+  constructor() { }
+}
+// #enddocregion example
diff --git a/public/docs/_examples/style-guide/ts/03-02/app/shared/data.service.avoid.ts b/public/docs/_examples/style-guide/ts/03-02/app/shared/data.service.avoid.ts
new file mode 100644
index 0000000000..49d5cb0d35
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-02/app/shared/data.service.avoid.ts
@@ -0,0 +1,7 @@
+// #docregion
+// #docregion example
+/* avoid */
+
+export const heroesUrl = 'api/heroes';
+export const villainsUrl = 'api/villains';
+// #enddocregion example
diff --git a/public/docs/_examples/style-guide/ts/03-02/app/shared/data.service.ts b/public/docs/_examples/style-guide/ts/03-02/app/shared/data.service.ts
new file mode 100644
index 0000000000..fedc4f3caf
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-02/app/shared/data.service.ts
@@ -0,0 +1,5 @@
+// #docregion
+// #docregion example
+export const HEROES_URL = 'api/heroes';
+export const VILLAIN_URL = 'api/villains';
+// #enddocregion example
diff --git a/public/docs/_examples/style-guide/ts/03-03/app/shared/hero-collector.service.avoid.ts b/public/docs/_examples/style-guide/ts/03-03/app/shared/hero-collector.service.avoid.ts
new file mode 100644
index 0000000000..983c6655a9
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-03/app/shared/hero-collector.service.avoid.ts
@@ -0,0 +1,15 @@
+// #docregion
+// #docregion example
+/* avoid */
+
+import { Injectable } from 'angular2/core';
+
+import { IHero } from './hero.model.avoid';
+
+@Injectable()
+export class HeroCollectorService {
+  hero: IHero;
+
+  constructor() { }
+}
+// #enddocregion example
diff --git a/public/docs/_examples/style-guide/ts/03-03/app/shared/hero-collector.service.ts b/public/docs/_examples/style-guide/ts/03-03/app/shared/hero-collector.service.ts
new file mode 100644
index 0000000000..4de47ea28f
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-03/app/shared/hero-collector.service.ts
@@ -0,0 +1,13 @@
+// #docregion
+// #docregion example
+import { Injectable } from 'angular2/core';
+
+import { Hero } from './hero.model';
+
+@Injectable()
+export class HeroCollectorService {
+  hero: Hero;
+
+  constructor() { }
+}
+// #enddocregion example
diff --git a/public/docs/_examples/style-guide/ts/03-03/app/shared/hero.model.avoid.ts b/public/docs/_examples/style-guide/ts/03-03/app/shared/hero.model.avoid.ts
new file mode 100644
index 0000000000..ce93b2c59a
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-03/app/shared/hero.model.avoid.ts
@@ -0,0 +1,14 @@
+// #docregion
+// #docregion example
+/* avoid */
+
+export interface IHero {
+  name: string;
+  power: string;
+}
+
+export class Hero implements IHero {
+  name: string;
+  power: string;
+}
+// #enddocregion example
diff --git a/public/docs/_examples/style-guide/ts/03-03/app/shared/hero.model.ts b/public/docs/_examples/style-guide/ts/03-03/app/shared/hero.model.ts
new file mode 100644
index 0000000000..c3277621cb
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-03/app/shared/hero.model.ts
@@ -0,0 +1,7 @@
+// #docregion
+// #docregion example
+export class Hero {
+  name: string;
+  power: string;
+}
+// #enddocregion example
diff --git a/public/docs/_examples/style-guide/ts/03-04/app/shared/toast/toast.service.avoid.ts b/public/docs/_examples/style-guide/ts/03-04/app/shared/toast/toast.service.avoid.ts
new file mode 100644
index 0000000000..9760038524
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-04/app/shared/toast/toast.service.avoid.ts
@@ -0,0 +1,27 @@
+// #docregion
+// #docregion example
+/* avoid */
+
+import { Injectable } from 'angular2/core';
+
+@Injectable()
+export class ToastService {
+  message: string;
+
+  private _toastCount: number;
+
+  hide() {
+    this._toastCount--;
+    this._log();
+  }
+
+  show() {
+    this._toastCount++;
+    this._log();
+  }
+
+  private _log() {
+    console.log(this.message);
+  }
+}
+// #enddocregion example
diff --git a/public/docs/_examples/style-guide/ts/03-04/app/shared/toast/toast.service.ts b/public/docs/_examples/style-guide/ts/03-04/app/shared/toast/toast.service.ts
new file mode 100644
index 0000000000..a647afd0b1
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-04/app/shared/toast/toast.service.ts
@@ -0,0 +1,25 @@
+// #docregion
+// #docregion example
+import { Injectable } from 'angular2/core';
+
+@Injectable()
+export class ToastService {
+  message: string;
+
+  private toastCount: number;
+
+  hide() {
+    this.toastCount--;
+    this.log();
+  }
+
+  show() {
+    this.toastCount++;
+    this.log();
+  }
+
+  private log() {
+    console.log(this.message);
+  }
+}
+// #enddocregion example
diff --git a/public/docs/_examples/style-guide/ts/03-05/app/+heroes/shared/hero.model.ts b/public/docs/_examples/style-guide/ts/03-05/app/+heroes/shared/hero.model.ts
new file mode 100644
index 0000000000..c3277621cb
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-05/app/+heroes/shared/hero.model.ts
@@ -0,0 +1,7 @@
+// #docregion
+// #docregion example
+export class Hero {
+  name: string;
+  power: string;
+}
+// #enddocregion example
diff --git a/public/docs/_examples/style-guide/ts/03-05/app/+heroes/shared/hero.service.avoid.ts b/public/docs/_examples/style-guide/ts/03-05/app/+heroes/shared/hero.service.avoid.ts
new file mode 100644
index 0000000000..e6e90da521
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-05/app/+heroes/shared/hero.service.avoid.ts
@@ -0,0 +1,33 @@
+// #docregion
+// #docregion example
+/* avoid */
+
+import {Injectable} from 'angular2/core';
+import {Http, Response} from 'angular2/http';
+
+import {Hero} from './hero.model';
+import {ExceptionService, SpinnerService, ToastService} from '../../../app/shared';
+// #enddocregion example
+
+@Injectable()
+export class HeroService {
+
+  constructor(
+    private exceptionService: ExceptionService,
+    private spinnerService: SpinnerService,
+    private toastService: ToastService,
+    private http: Http
+  ) { }
+
+  getHero(id: number) {
+    return this.http.get(`api/heroes/${id}`)
+      .map((res: Response) => res.json().data);
+  }
+
+  getHeroes() {
+    return this.http.get(`api/heroes`)
+      .map((res: Response) => res.json().data);
+  }
+
+}
+
diff --git a/public/docs/_examples/style-guide/ts/03-05/app/+heroes/shared/hero.service.ts b/public/docs/_examples/style-guide/ts/03-05/app/+heroes/shared/hero.service.ts
new file mode 100644
index 0000000000..3df0940a5a
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-05/app/+heroes/shared/hero.service.ts
@@ -0,0 +1,31 @@
+// #docregion
+// #docregion example
+import { Injectable } from 'angular2/core';
+import { Http, Response } from 'angular2/http';
+
+import { Hero } from './hero.model';
+import { ExceptionService, SpinnerService, ToastService } from '../../../app/shared';
+// #enddocregion example
+
+@Injectable()
+export class HeroService {
+
+  constructor(
+    private exceptionService: ExceptionService,
+    private spinnerService: SpinnerService,
+    private toastService: ToastService,
+    private http: Http
+  ) { }
+
+  getHero(id: number) {
+    return this.http.get(`api/heroes/${id}`)
+      .map((res: Response) => res.json().data);
+  }
+
+  getHeroes() {
+    return this.http.get(`api/heroes`)
+      .map((res: Response) => res.json().data);
+  }
+
+}
+
diff --git a/public/docs/_examples/style-guide/ts/03-05/app/shared/exception.service.ts b/public/docs/_examples/style-guide/ts/03-05/app/shared/exception.service.ts
new file mode 100644
index 0000000000..31ee9abca5
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-05/app/shared/exception.service.ts
@@ -0,0 +1,4 @@
+import { Injectable } from 'angular2/core';
+
+@Injectable()
+export class ExceptionService { }
diff --git a/public/docs/_examples/style-guide/ts/03-05/app/shared/index.ts b/public/docs/_examples/style-guide/ts/03-05/app/shared/index.ts
new file mode 100644
index 0000000000..e4e6723f91
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-05/app/shared/index.ts
@@ -0,0 +1,6 @@
+// #docregion
+// #docregion example
+export * from './exception.service';
+export * from './spinner';
+export * from './toast';
+// #enddocregion example
diff --git a/public/docs/_examples/style-guide/ts/03-05/app/shared/spinner/index.ts b/public/docs/_examples/style-guide/ts/03-05/app/shared/spinner/index.ts
new file mode 100644
index 0000000000..1d619300c0
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-05/app/shared/spinner/index.ts
@@ -0,0 +1,3 @@
+// #docregion
+export * from './spinner.component';
+export * from './spinner.service';
diff --git a/public/docs/_examples/style-guide/ts/03-05/app/shared/spinner/spinner.component.ts b/public/docs/_examples/style-guide/ts/03-05/app/shared/spinner/spinner.component.ts
new file mode 100644
index 0000000000..d3384a1eb0
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-05/app/shared/spinner/spinner.component.ts
@@ -0,0 +1,16 @@
+import {Component, OnDestroy, OnInit} from 'angular2/core';
+
+import { SpinnerService } from './spinner.service';
+
+@Component({
+  selector: 'toh-spinner',
+  template: '<div>spinner</div>'
+})
+
+export class SpinnerComponent implements OnDestroy, OnInit {
+  constructor(private spinnerService: SpinnerService) { }
+
+  ngOnInit() { }
+
+  ngOnDestroy() { }
+}
diff --git a/public/docs/_examples/style-guide/ts/03-05/app/shared/spinner/spinner.service.ts b/public/docs/_examples/style-guide/ts/03-05/app/shared/spinner/spinner.service.ts
new file mode 100644
index 0000000000..faf8b65fcd
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-05/app/shared/spinner/spinner.service.ts
@@ -0,0 +1,12 @@
+import { Injectable } from 'angular2/core';
+
+export interface ISpinnerState { }
+
+@Injectable()
+export class SpinnerService {
+  spinnerState: any;
+
+  show() { }
+
+  hide() { }
+}
diff --git a/public/docs/_examples/style-guide/ts/03-05/app/shared/toast/index.ts b/public/docs/_examples/style-guide/ts/03-05/app/shared/toast/index.ts
new file mode 100644
index 0000000000..01b41aff98
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-05/app/shared/toast/index.ts
@@ -0,0 +1,3 @@
+// #docregion
+export * from './toast.component';
+export * from './toast.service';
diff --git a/public/docs/_examples/style-guide/ts/03-05/app/shared/toast/toast.component.ts b/public/docs/_examples/style-guide/ts/03-05/app/shared/toast/toast.component.ts
new file mode 100644
index 0000000000..b20ddd8b50
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-05/app/shared/toast/toast.component.ts
@@ -0,0 +1,14 @@
+import { Component, OnInit } from 'angular2/core';
+
+import { ToastService } from './toast.service';
+
+@Component({
+  moduleId: __moduleName,
+  selector: 'toh-toast',
+  templateUrl: '<div>toast</div>'
+})
+export class ToastComponent implements OnInit {
+  constructor(toastService: ToastService) { }
+
+  ngOnInit() { }
+}
diff --git a/public/docs/_examples/style-guide/ts/03-05/app/shared/toast/toast.service.ts b/public/docs/_examples/style-guide/ts/03-05/app/shared/toast/toast.service.ts
new file mode 100644
index 0000000000..ff3d64e63d
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-05/app/shared/toast/toast.service.ts
@@ -0,0 +1,6 @@
+import { Injectable } from 'angular2/core';
+
+@Injectable()
+export class ToastService {
+  activate: (message?: string, title?: string) => void;
+}
diff --git a/public/docs/_examples/style-guide/ts/03-06/app/+heroes/shared/hero.model.ts b/public/docs/_examples/style-guide/ts/03-06/app/+heroes/shared/hero.model.ts
new file mode 100644
index 0000000000..c3277621cb
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-06/app/+heroes/shared/hero.model.ts
@@ -0,0 +1,7 @@
+// #docregion
+// #docregion example
+export class Hero {
+  name: string;
+  power: string;
+}
+// #enddocregion example
diff --git a/public/docs/_examples/style-guide/ts/03-06/app/+heroes/shared/hero.service.avoid.ts b/public/docs/_examples/style-guide/ts/03-06/app/+heroes/shared/hero.service.avoid.ts
new file mode 100644
index 0000000000..6aae641960
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-06/app/+heroes/shared/hero.service.avoid.ts
@@ -0,0 +1,32 @@
+// #docregion
+// #docregion example
+/* avoid */
+
+import { ExceptionService, SpinnerService, ToastService } from '../../../app/shared';
+import { Http, Response } from 'angular2/http';
+import { Injectable } from 'angular2/core';
+import { Hero } from './hero.model';
+// #enddocregion example
+
+@Injectable()
+export class HeroService {
+
+  constructor(
+    private exceptionService: ExceptionService,
+    private spinnerService: SpinnerService,
+    private toastService: ToastService,
+    private http: Http
+  ) { }
+
+  getHero(id: number) {
+    return this.http.get(`api/heroes/${id}`)
+      .map((res: Response) => res.json().data);
+  }
+
+  getHeroes() {
+    return this.http.get(`api/heroes`)
+      .map((res: Response) => res.json().data);
+  }
+
+}
+
diff --git a/public/docs/_examples/style-guide/ts/03-06/app/+heroes/shared/hero.service.ts b/public/docs/_examples/style-guide/ts/03-06/app/+heroes/shared/hero.service.ts
new file mode 100644
index 0000000000..3df0940a5a
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-06/app/+heroes/shared/hero.service.ts
@@ -0,0 +1,31 @@
+// #docregion
+// #docregion example
+import { Injectable } from 'angular2/core';
+import { Http, Response } from 'angular2/http';
+
+import { Hero } from './hero.model';
+import { ExceptionService, SpinnerService, ToastService } from '../../../app/shared';
+// #enddocregion example
+
+@Injectable()
+export class HeroService {
+
+  constructor(
+    private exceptionService: ExceptionService,
+    private spinnerService: SpinnerService,
+    private toastService: ToastService,
+    private http: Http
+  ) { }
+
+  getHero(id: number) {
+    return this.http.get(`api/heroes/${id}`)
+      .map((res: Response) => res.json().data);
+  }
+
+  getHeroes() {
+    return this.http.get(`api/heroes`)
+      .map((res: Response) => res.json().data);
+  }
+
+}
+
diff --git a/public/docs/_examples/style-guide/ts/03-06/app/shared/exception.service.ts b/public/docs/_examples/style-guide/ts/03-06/app/shared/exception.service.ts
new file mode 100644
index 0000000000..31ee9abca5
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-06/app/shared/exception.service.ts
@@ -0,0 +1,4 @@
+import { Injectable } from 'angular2/core';
+
+@Injectable()
+export class ExceptionService { }
diff --git a/public/docs/_examples/style-guide/ts/03-06/app/shared/index.ts b/public/docs/_examples/style-guide/ts/03-06/app/shared/index.ts
new file mode 100644
index 0000000000..e4e6723f91
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-06/app/shared/index.ts
@@ -0,0 +1,6 @@
+// #docregion
+// #docregion example
+export * from './exception.service';
+export * from './spinner';
+export * from './toast';
+// #enddocregion example
diff --git a/public/docs/_examples/style-guide/ts/03-06/app/shared/spinner/index.ts b/public/docs/_examples/style-guide/ts/03-06/app/shared/spinner/index.ts
new file mode 100644
index 0000000000..1d619300c0
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-06/app/shared/spinner/index.ts
@@ -0,0 +1,3 @@
+// #docregion
+export * from './spinner.component';
+export * from './spinner.service';
diff --git a/public/docs/_examples/style-guide/ts/03-06/app/shared/spinner/spinner.component.ts b/public/docs/_examples/style-guide/ts/03-06/app/shared/spinner/spinner.component.ts
new file mode 100644
index 0000000000..d3384a1eb0
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-06/app/shared/spinner/spinner.component.ts
@@ -0,0 +1,16 @@
+import {Component, OnDestroy, OnInit} from 'angular2/core';
+
+import { SpinnerService } from './spinner.service';
+
+@Component({
+  selector: 'toh-spinner',
+  template: '<div>spinner</div>'
+})
+
+export class SpinnerComponent implements OnDestroy, OnInit {
+  constructor(private spinnerService: SpinnerService) { }
+
+  ngOnInit() { }
+
+  ngOnDestroy() { }
+}
diff --git a/public/docs/_examples/style-guide/ts/03-06/app/shared/spinner/spinner.service.ts b/public/docs/_examples/style-guide/ts/03-06/app/shared/spinner/spinner.service.ts
new file mode 100644
index 0000000000..faf8b65fcd
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-06/app/shared/spinner/spinner.service.ts
@@ -0,0 +1,12 @@
+import { Injectable } from 'angular2/core';
+
+export interface ISpinnerState { }
+
+@Injectable()
+export class SpinnerService {
+  spinnerState: any;
+
+  show() { }
+
+  hide() { }
+}
diff --git a/public/docs/_examples/style-guide/ts/03-06/app/shared/toast/index.ts b/public/docs/_examples/style-guide/ts/03-06/app/shared/toast/index.ts
new file mode 100644
index 0000000000..01b41aff98
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-06/app/shared/toast/index.ts
@@ -0,0 +1,3 @@
+// #docregion
+export * from './toast.component';
+export * from './toast.service';
diff --git a/public/docs/_examples/style-guide/ts/03-06/app/shared/toast/toast.component.ts b/public/docs/_examples/style-guide/ts/03-06/app/shared/toast/toast.component.ts
new file mode 100644
index 0000000000..b20ddd8b50
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-06/app/shared/toast/toast.component.ts
@@ -0,0 +1,14 @@
+import { Component, OnInit } from 'angular2/core';
+
+import { ToastService } from './toast.service';
+
+@Component({
+  moduleId: __moduleName,
+  selector: 'toh-toast',
+  templateUrl: '<div>toast</div>'
+})
+export class ToastComponent implements OnInit {
+  constructor(toastService: ToastService) { }
+
+  ngOnInit() { }
+}
diff --git a/public/docs/_examples/style-guide/ts/03-06/app/shared/toast/toast.service.ts b/public/docs/_examples/style-guide/ts/03-06/app/shared/toast/toast.service.ts
new file mode 100644
index 0000000000..ff3d64e63d
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/03-06/app/shared/toast/toast.service.ts
@@ -0,0 +1,6 @@
+import { Injectable } from 'angular2/core';
+
+@Injectable()
+export class ToastService {
+  activate: (message?: string, title?: string) => void;
+}
diff --git a/public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.avoid.ts b/public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.avoid.ts
new file mode 100644
index 0000000000..5c0875a02b
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.avoid.ts
@@ -0,0 +1,25 @@
+// #docregion
+// #docregion example
+/* avoid */
+
+import { Component, OnInit } from 'angular2/core';
+
+import { CONFIG } from '../shared/config';
+import { EntityService } from '../shared/entity.service';
+import { ExceptionService } from '../shared/exception.service';
+import { FilterTextComponent } from '../shared/filter-text/filter-text.component';
+import { InitCapsPipe } from '../shared/init-caps.pipe';
+import { SpinnerService } from '../shared/spinner/spinner.service';
+import { ToastService } from '../shared/toast/toast.service';
+
+@Component({
+  selector: 'toh-heroes',
+  templateUrl: 'app/+heroes/heroes.component.html'
+})
+export class HeroesComponent implements OnInit {
+  constructor() { }
+
+  ngOnInit() { }
+}
+// #enddocregion example
+
diff --git a/public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.ts b/public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.ts
new file mode 100644
index 0000000000..74ef60cc9c
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/04-10/app/+heroes/heroes.component.ts
@@ -0,0 +1,25 @@
+// #docregion
+// #docregion example
+import { Component, OnInit } from 'angular2/core';
+
+import {
+  CONFIG,
+  EntityService,
+  ExceptionService,
+  FilterTextComponent,
+  InitCapsPipe,
+  SpinnerService,
+  ToastService
+} from '../../app/shared';
+
+@Component({
+  selector: 'toh-heroes',
+  templateUrl: 'app/+heroes/heroes.component.html'
+})
+export class HeroesComponent implements OnInit {
+  constructor() { }
+
+  ngOnInit() { }
+}
+// #enddocregion example
+
diff --git a/public/docs/_examples/style-guide/ts/04-10/app/+heroes/index.ts b/public/docs/_examples/style-guide/ts/04-10/app/+heroes/index.ts
new file mode 100644
index 0000000000..dbf3079697
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/04-10/app/+heroes/index.ts
@@ -0,0 +1 @@
+export * from './heroes.component';
diff --git a/public/docs/_examples/style-guide/ts/04-10/app/app.component.ts b/public/docs/_examples/style-guide/ts/04-10/app/app.component.ts
new file mode 100644
index 0000000000..7dced6b4d6
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/04-10/app/app.component.ts
@@ -0,0 +1,12 @@
+// #docregion
+import { Component } from 'angular2/core';
+
+// #docregion example
+import { HeroesComponent } from './+heroes/index';
+// #enddocregion example
+
+@Component({
+  selector: 'toh-app',
+  template: '<div>app</div>'
+})
+export class AppComponent { }
diff --git a/public/docs/_examples/style-guide/ts/04-10/app/shared/config.ts b/public/docs/_examples/style-guide/ts/04-10/app/shared/config.ts
new file mode 100644
index 0000000000..cf7281ecf1
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/04-10/app/shared/config.ts
@@ -0,0 +1,6 @@
+export let CONFIG = {
+  baseUrls: {
+    heroes: 'api/heroes.json',
+    villains: 'api/villains.json'
+  }
+};
diff --git a/public/docs/_examples/style-guide/ts/04-10/app/shared/entity.service.ts b/public/docs/_examples/style-guide/ts/04-10/app/shared/entity.service.ts
new file mode 100644
index 0000000000..0c97ade8b5
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/04-10/app/shared/entity.service.ts
@@ -0,0 +1,4 @@
+import {Injectable} from 'angular2/core';
+
+@Injectable()
+export class EntityService { }
diff --git a/public/docs/_examples/style-guide/ts/04-10/app/shared/exception.service.ts b/public/docs/_examples/style-guide/ts/04-10/app/shared/exception.service.ts
new file mode 100644
index 0000000000..31ee9abca5
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/04-10/app/shared/exception.service.ts
@@ -0,0 +1,4 @@
+import { Injectable } from 'angular2/core';
+
+@Injectable()
+export class ExceptionService { }
diff --git a/public/docs/_examples/style-guide/ts/04-10/app/shared/filter-text/filter-text.component.ts b/public/docs/_examples/style-guide/ts/04-10/app/shared/filter-text/filter-text.component.ts
new file mode 100644
index 0000000000..4736defb15
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/04-10/app/shared/filter-text/filter-text.component.ts
@@ -0,0 +1,19 @@
+import { Component, EventEmitter, Output } from 'angular2/core';
+
+@Component({
+  moduleId: __moduleName,
+  selector: 'toh-filter-text',
+  template: '<div>filter</div>'
+})
+export class FilterTextComponent {
+  @Output() changed: EventEmitter<string>;
+  filter: string;
+
+  constructor() { }
+
+  clear() {
+  }
+
+  filterChanged(event: any) {
+  }
+}
diff --git a/public/docs/_examples/style-guide/ts/04-10/app/shared/filter-text/filter-text.service.ts b/public/docs/_examples/style-guide/ts/04-10/app/shared/filter-text/filter-text.service.ts
new file mode 100644
index 0000000000..d5f8828f3e
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/04-10/app/shared/filter-text/filter-text.service.ts
@@ -0,0 +1,11 @@
+import { Injectable } from 'angular2/core';
+
+@Injectable()
+export class FilterService {
+  constructor() { }
+
+  filter(data: string, props: Array<string>, originalList: Array<any>) {
+    let filteredList: any[];
+    return filteredList;
+  }
+}
diff --git a/public/docs/_examples/style-guide/ts/04-10/app/shared/filter-text/index.ts b/public/docs/_examples/style-guide/ts/04-10/app/shared/filter-text/index.ts
new file mode 100644
index 0000000000..4641503ec4
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/04-10/app/shared/filter-text/index.ts
@@ -0,0 +1,3 @@
+// #docregion
+export * from './filter-text.component';
+export * from './filter-text.service';
diff --git a/public/docs/_examples/style-guide/ts/04-10/app/shared/index.ts b/public/docs/_examples/style-guide/ts/04-10/app/shared/index.ts
new file mode 100644
index 0000000000..3c20b39ad7
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/04-10/app/shared/index.ts
@@ -0,0 +1,30 @@
+// #docregion
+// #docregion example
+export * from './config';
+export * from './entity.service';
+export * from './exception.service';
+export * from './filter-text';
+export * from './init-caps.pipe';
+export * from './modal';
+export * from './nav';
+export * from './spinner';
+export * from './toast';
+// #enddocregion example
+
+import {EntityService} from './entity.service';
+import {ExceptionService} from './exception.service';
+import {FilterService} from './filter-text';
+import {InitCapsPipe} from './init-caps.pipe';
+import {ModalService} from './modal';
+import {SpinnerService} from './spinner';
+import {ToastService} from './toast';
+
+export const BLOCK_PROVIDERS = [
+  EntityService,
+  ExceptionService,
+  FilterService,
+  InitCapsPipe,
+  ModalService,
+  SpinnerService,
+  ToastService
+];
diff --git a/public/docs/_examples/style-guide/ts/04-10/app/shared/init-caps.pipe.ts b/public/docs/_examples/style-guide/ts/04-10/app/shared/init-caps.pipe.ts
new file mode 100644
index 0000000000..519bbcd81d
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/04-10/app/shared/init-caps.pipe.ts
@@ -0,0 +1,8 @@
+import { Pipe, PipeTransform } from 'angular2/core';
+
+@Pipe({ name: 'initCaps' })
+export class InitCapsPipe implements PipeTransform {
+  transform = (value: string) => value;
+}
+
+
diff --git a/public/docs/_examples/style-guide/ts/04-10/app/shared/modal/index.ts b/public/docs/_examples/style-guide/ts/04-10/app/shared/modal/index.ts
new file mode 100644
index 0000000000..03bebd34d4
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/04-10/app/shared/modal/index.ts
@@ -0,0 +1,3 @@
+// #docregion
+export * from './modal.component';
+export * from './modal.service';
diff --git a/public/docs/_examples/style-guide/ts/04-10/app/shared/modal/modal.component.ts b/public/docs/_examples/style-guide/ts/04-10/app/shared/modal/modal.component.ts
new file mode 100644
index 0000000000..6bf97351c9
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/04-10/app/shared/modal/modal.component.ts
@@ -0,0 +1,14 @@
+import { Component, OnInit } from 'angular2/core';
+
+import { ModalService } from './modal.service';
+
+@Component({
+  moduleId: __moduleName,
+  selector: 'toh-modal-confirm',
+  template: '<div>modal</div>'
+})
+export class ModalComponent implements OnInit {
+  constructor(modalService: ModalService) { }
+
+  ngOnInit() { }
+}
diff --git a/public/docs/_examples/style-guide/ts/04-10/app/shared/modal/modal.service.ts b/public/docs/_examples/style-guide/ts/04-10/app/shared/modal/modal.service.ts
new file mode 100644
index 0000000000..877005eedd
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/04-10/app/shared/modal/modal.service.ts
@@ -0,0 +1,6 @@
+import { Injectable } from 'angular2/core';
+
+@Injectable()
+export class ModalService {
+  activate: (message?: string, title?: string) => Promise<boolean>;
+}
diff --git a/public/docs/_examples/style-guide/ts/04-10/app/shared/nav/index.ts b/public/docs/_examples/style-guide/ts/04-10/app/shared/nav/index.ts
new file mode 100644
index 0000000000..4236f3e9e1
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/04-10/app/shared/nav/index.ts
@@ -0,0 +1,2 @@
+// #docregion
+export * from './nav.component';
diff --git a/public/docs/_examples/style-guide/ts/04-10/app/shared/nav/nav.component.ts b/public/docs/_examples/style-guide/ts/04-10/app/shared/nav/nav.component.ts
new file mode 100644
index 0000000000..276092ea73
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/04-10/app/shared/nav/nav.component.ts
@@ -0,0 +1,17 @@
+import { Component, OnInit } from 'angular2/core';
+
+import { ModalService } from '../';
+
+@Component({
+  moduleId: __moduleName,
+  selector: 'toh-nav',
+  template: '<div>nav</div>'
+})
+export class NavComponent implements OnInit {
+
+  ngOnInit() { }
+
+  constructor(private modalService: ModalService) { }
+
+  resetDb() { }
+}
diff --git a/public/docs/_examples/style-guide/ts/04-10/app/shared/spinner/index.ts b/public/docs/_examples/style-guide/ts/04-10/app/shared/spinner/index.ts
new file mode 100644
index 0000000000..1d619300c0
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/04-10/app/shared/spinner/index.ts
@@ -0,0 +1,3 @@
+// #docregion
+export * from './spinner.component';
+export * from './spinner.service';
diff --git a/public/docs/_examples/style-guide/ts/04-10/app/shared/spinner/spinner.component.ts b/public/docs/_examples/style-guide/ts/04-10/app/shared/spinner/spinner.component.ts
new file mode 100644
index 0000000000..d3384a1eb0
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/04-10/app/shared/spinner/spinner.component.ts
@@ -0,0 +1,16 @@
+import {Component, OnDestroy, OnInit} from 'angular2/core';
+
+import { SpinnerService } from './spinner.service';
+
+@Component({
+  selector: 'toh-spinner',
+  template: '<div>spinner</div>'
+})
+
+export class SpinnerComponent implements OnDestroy, OnInit {
+  constructor(private spinnerService: SpinnerService) { }
+
+  ngOnInit() { }
+
+  ngOnDestroy() { }
+}
diff --git a/public/docs/_examples/style-guide/ts/04-10/app/shared/spinner/spinner.service.ts b/public/docs/_examples/style-guide/ts/04-10/app/shared/spinner/spinner.service.ts
new file mode 100644
index 0000000000..faf8b65fcd
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/04-10/app/shared/spinner/spinner.service.ts
@@ -0,0 +1,12 @@
+import { Injectable } from 'angular2/core';
+
+export interface ISpinnerState { }
+
+@Injectable()
+export class SpinnerService {
+  spinnerState: any;
+
+  show() { }
+
+  hide() { }
+}
diff --git a/public/docs/_examples/style-guide/ts/04-10/app/shared/toast/index.ts b/public/docs/_examples/style-guide/ts/04-10/app/shared/toast/index.ts
new file mode 100644
index 0000000000..01b41aff98
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/04-10/app/shared/toast/index.ts
@@ -0,0 +1,3 @@
+// #docregion
+export * from './toast.component';
+export * from './toast.service';
diff --git a/public/docs/_examples/style-guide/ts/04-10/app/shared/toast/toast.component.ts b/public/docs/_examples/style-guide/ts/04-10/app/shared/toast/toast.component.ts
new file mode 100644
index 0000000000..b20ddd8b50
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/04-10/app/shared/toast/toast.component.ts
@@ -0,0 +1,14 @@
+import { Component, OnInit } from 'angular2/core';
+
+import { ToastService } from './toast.service';
+
+@Component({
+  moduleId: __moduleName,
+  selector: 'toh-toast',
+  templateUrl: '<div>toast</div>'
+})
+export class ToastComponent implements OnInit {
+  constructor(toastService: ToastService) { }
+
+  ngOnInit() { }
+}
diff --git a/public/docs/_examples/style-guide/ts/04-10/app/shared/toast/toast.service.ts b/public/docs/_examples/style-guide/ts/04-10/app/shared/toast/toast.service.ts
new file mode 100644
index 0000000000..ff3d64e63d
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/04-10/app/shared/toast/toast.service.ts
@@ -0,0 +1,6 @@
+import { Injectable } from 'angular2/core';
+
+@Injectable()
+export class ToastService {
+  activate: (message?: string, title?: string) => void;
+}
diff --git a/public/docs/_examples/style-guide/ts/04-10/app/typings.d.ts b/public/docs/_examples/style-guide/ts/04-10/app/typings.d.ts
new file mode 100644
index 0000000000..e6ff3b7ddc
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/04-10/app/typings.d.ts
@@ -0,0 +1 @@
+declare var __moduleName: any;
diff --git a/public/docs/_examples/style-guide/ts/04-13/app/+heroes/index.ts b/public/docs/_examples/style-guide/ts/04-13/app/+heroes/index.ts
new file mode 100644
index 0000000000..45d52e8c70
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/04-13/app/+heroes/index.ts
@@ -0,0 +1,2 @@
+// Needed for the .avoid code to compile
+export const HeroesComponent = 42;
diff --git a/public/docs/_examples/style-guide/ts/04-13/app/app.component.avoid.ts b/public/docs/_examples/style-guide/ts/04-13/app/app.component.avoid.ts
new file mode 100644
index 0000000000..8beaa787d5
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/04-13/app/app.component.avoid.ts
@@ -0,0 +1,11 @@
+// #docregion
+import { Component } from 'angular2/core';
+
+// #docregion example
+import { HeroesComponent } from './+heroes';
+// #enddocregion example
+
+@Component({
+  selector: 'toh-app'
+})
+export class AppComponent {}
diff --git a/public/docs/_examples/style-guide/ts/04-14/app/heroes/heroes.component.css b/public/docs/_examples/style-guide/ts/04-14/app/heroes/heroes.component.css
new file mode 100644
index 0000000000..82f0c1d0ab
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/04-14/app/heroes/heroes.component.css
@@ -0,0 +1,28 @@
+/* #docregion */
+.heroes {
+  margin: 0 0 2em 0; list-style-type: none; padding: 0; width: 15em;
+}
+.heroes li {
+  cursor: pointer;
+  position: relative;
+  left: 0;
+  background-color: #EEE;
+  margin: .5em;
+  padding: .3em 0;
+  height: 1.6em;
+  border-radius: 4px;
+}
+.heroes .badge {
+  display: inline-block;
+  font-size: small;
+  color: white;
+  padding: 0.8em 0.7em 0 0.7em;
+  background-color: #607D8B;
+  line-height: 1em;
+  position: relative;
+  left: -1px;
+  top: -4px;
+  height: 1.8em;
+  margin-right: .8em;
+  border-radius: 4px 0 0 4px;
+}
diff --git a/public/docs/_examples/style-guide/ts/04-14/app/heroes/heroes.component.html b/public/docs/_examples/style-guide/ts/04-14/app/heroes/heroes.component.html
new file mode 100644
index 0000000000..b899229cab
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/04-14/app/heroes/heroes.component.html
@@ -0,0 +1,12 @@
+<!-- #docregion -->
+<div>
+  <h2>My Heroes</h2>
+  <ul class="heroes">
+    <li *ngFor="#hero of heroes">
+      <span class="badge">{{hero.id}}</span> {{hero.name}}
+    </li>
+  </ul>
+  <div *ngIf="selectedHero">
+    <h2>{{selectedHero.name | uppercase}} is my hero</h2>
+  </div>
+</div>
diff --git a/public/docs/_examples/style-guide/ts/04-14/app/heroes/heroes.component.ts b/public/docs/_examples/style-guide/ts/04-14/app/heroes/heroes.component.ts
new file mode 100644
index 0000000000..ca8fdac1aa
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/04-14/app/heroes/heroes.component.ts
@@ -0,0 +1,19 @@
+// #docregion
+import { Component, OnInit } from 'angular2/core';
+
+import { Hero } from './shared/hero.model';
+// #docregion example
+import { Logger } from '../shared/logger.service';
+// #enddocregion example
+
+@Component({
+  selector: 'toh-heroes',
+  templateUrl: 'heroes.component.html',
+  styleUrls:  ['heroes.component.css']
+})
+export class HeroesComponent implements OnInit {
+  heroes: Hero[];
+  selectedHero: Hero;
+
+  ngOnInit() { }
+}
diff --git a/public/docs/_examples/style-guide/ts/05-04/app/heroes/hero.model.ts b/public/docs/_examples/style-guide/ts/04-14/app/heroes/shared/hero.model.ts
similarity index 100%
rename from public/docs/_examples/style-guide/ts/05-04/app/heroes/hero.model.ts
rename to public/docs/_examples/style-guide/ts/04-14/app/heroes/shared/hero.model.ts
diff --git a/public/docs/_examples/style-guide/ts/04-14/app/shared/logger.service.ts b/public/docs/_examples/style-guide/ts/04-14/app/shared/logger.service.ts
new file mode 100644
index 0000000000..7c96a99a2e
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/04-14/app/shared/logger.service.ts
@@ -0,0 +1,9 @@
+// #docregion
+import { Injectable } from 'angular2/core';
+
+@Injectable()
+export class Logger {
+
+  constructor() { }
+
+}
diff --git a/public/docs/_examples/style-guide/ts/04-15/app/+heroes/index.ts b/public/docs/_examples/style-guide/ts/04-15/app/+heroes/index.ts
new file mode 100644
index 0000000000..45d52e8c70
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/04-15/app/+heroes/index.ts
@@ -0,0 +1,2 @@
+// Needed for the .avoid code to compile
+export const HeroesComponent = 42;
diff --git a/public/docs/_examples/style-guide/ts/04-15/app/app.component.avoid.ts b/public/docs/_examples/style-guide/ts/04-15/app/app.component.avoid.ts
new file mode 100644
index 0000000000..8beaa787d5
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/04-15/app/app.component.avoid.ts
@@ -0,0 +1,11 @@
+// #docregion
+import { Component } from 'angular2/core';
+
+// #docregion example
+import { HeroesComponent } from './+heroes';
+// #enddocregion example
+
+@Component({
+  selector: 'toh-app'
+})
+export class AppComponent {}
diff --git a/public/docs/_examples/style-guide/ts/04-16/app/+heroes/index.ts b/public/docs/_examples/style-guide/ts/04-16/app/+heroes/index.ts
new file mode 100644
index 0000000000..45d52e8c70
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/04-16/app/+heroes/index.ts
@@ -0,0 +1,2 @@
+// Needed for the .avoid code to compile
+export const HeroesComponent = 42;
diff --git a/public/docs/_examples/style-guide/ts/04-16/app/app.component.avoid.ts b/public/docs/_examples/style-guide/ts/04-16/app/app.component.avoid.ts
new file mode 100644
index 0000000000..8beaa787d5
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/04-16/app/app.component.avoid.ts
@@ -0,0 +1,11 @@
+// #docregion
+import { Component } from 'angular2/core';
+
+// #docregion example
+import { HeroesComponent } from './+heroes';
+// #enddocregion example
+
+@Component({
+  selector: 'toh-app'
+})
+export class AppComponent {}
diff --git a/public/docs/_examples/style-guide/ts/05-02/app/heroes/hero-button.component.avoid.ts b/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts
similarity index 54%
rename from public/docs/_examples/style-guide/ts/05-02/app/heroes/hero-button.component.avoid.ts
rename to public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts
index 825122441f..2a24018de1 100644
--- a/public/docs/_examples/style-guide/ts/05-02/app/heroes/hero-button.component.avoid.ts
+++ b/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts
@@ -1,7 +1,10 @@
 // #docregion
+import { Component } from 'angular2/core';
+// #docregion example
 /* avoid */
 
 @Component({
   selector: 'tohHeroButton'
 })
 export class HeroButtonComponent {}
+// #enddocregion example
diff --git a/public/docs/_examples/style-guide/ts/05-02/app/heroes/hero-button.component.ts b/public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.ts
similarity index 100%
rename from public/docs/_examples/style-guide/ts/05-02/app/heroes/hero-button.component.ts
rename to public/docs/_examples/style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.ts
diff --git a/public/docs/_examples/style-guide/ts/05-03/app/heroes/hero-button.component.avoid.html b/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.html
similarity index 100%
rename from public/docs/_examples/style-guide/ts/05-03/app/heroes/hero-button.component.avoid.html
rename to public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.html
diff --git a/public/docs/_examples/style-guide/ts/05-03/app/heroes/hero-button.component.avoid.ts b/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts
similarity index 54%
rename from public/docs/_examples/style-guide/ts/05-03/app/heroes/hero-button.component.avoid.ts
rename to public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts
index 5b4c1c86ed..aa81d8bf74 100644
--- a/public/docs/_examples/style-guide/ts/05-03/app/heroes/hero-button.component.avoid.ts
+++ b/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts
@@ -1,7 +1,10 @@
 // #docregion
+import { Component } from 'angular2/core';
+// #docregion example
 /* avoid */
 
 @Component({
   selector: '[tohHeroButton]'
 })
 export class HeroButtonComponent {}
+// #enddocregion example
diff --git a/public/docs/_examples/style-guide/ts/05-03/app/heroes/hero-button.component.ts b/public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.ts
similarity index 100%
rename from public/docs/_examples/style-guide/ts/05-03/app/heroes/hero-button.component.ts
rename to public/docs/_examples/style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.ts
diff --git a/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.avoid.ts b/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.avoid.ts
index 45cb60f820..663f08d775 100644
--- a/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.avoid.ts
+++ b/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.avoid.ts
@@ -1,4 +1,7 @@
 // #docregion
+import { Component, OnInit } from 'angular2/core';
+import { Hero } from './shared/hero.model';
+// #docregion example
 /* avoid */
 
 @Component({
@@ -49,4 +52,7 @@
 export class HeroesComponent implements OnInit {
   heroes: Hero[];
   selectedHero: Hero;
+
+  ngOnInit() {}
 }
+// #enddocregion example
diff --git a/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.ts b/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.ts
index 57d119f11b..6fc22a101a 100644
--- a/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.ts
+++ b/public/docs/_examples/style-guide/ts/05-04/app/heroes/heroes.component.ts
@@ -1,7 +1,7 @@
 // #docregion
 import { Component, OnInit } from 'angular2/core';
 
-import { Hero } from './hero.model';
+import { Hero } from './shared/hero.model';
 
 // #docregion example
 @Component({
@@ -12,5 +12,7 @@ import { Hero } from './hero.model';
 export class HeroesComponent implements OnInit {
   heroes: Hero[];
   selectedHero: Hero;
+
+  ngOnInit() { }
 }
 // #enddocregion example
diff --git a/public/docs/_examples/style-guide/ts/05-17/app/heroes/hero.model.ts b/public/docs/_examples/style-guide/ts/05-04/app/heroes/shared/hero.model.ts
similarity index 100%
rename from public/docs/_examples/style-guide/ts/05-17/app/heroes/hero.model.ts
rename to public/docs/_examples/style-guide/ts/05-04/app/heroes/shared/hero.model.ts
diff --git a/public/docs/_examples/style-guide/ts/05-12/app/heroes/hero-button.component.avoid.ts b/public/docs/_examples/style-guide/ts/05-12/app/heroes/shared/hero-button/hero-button.component.avoid.ts
similarity index 71%
rename from public/docs/_examples/style-guide/ts/05-12/app/heroes/hero-button.component.avoid.ts
rename to public/docs/_examples/style-guide/ts/05-12/app/heroes/shared/hero-button/hero-button.component.avoid.ts
index 0f0aeab21c..9a02f5d108 100644
--- a/public/docs/_examples/style-guide/ts/05-12/app/heroes/hero-button.component.avoid.ts
+++ b/public/docs/_examples/style-guide/ts/05-12/app/heroes/shared/hero-button/hero-button.component.avoid.ts
@@ -1,4 +1,6 @@
 // #docregion
+import { Component, EventEmitter } from 'angular2/core';
+// #docregion example
 /* avoid */
 
 @Component({
@@ -15,3 +17,4 @@ export class HeroButtonComponent {
   change = new EventEmitter<any>();
   label: string;
 }
+// #enddocregion example
diff --git a/public/docs/_examples/style-guide/ts/05-12/app/heroes/hero-button.component.ts b/public/docs/_examples/style-guide/ts/05-12/app/heroes/shared/hero-button/hero-button.component.ts
similarity index 100%
rename from public/docs/_examples/style-guide/ts/05-12/app/heroes/hero-button.component.ts
rename to public/docs/_examples/style-guide/ts/05-12/app/heroes/shared/hero-button/hero-button.component.ts
diff --git a/public/docs/_examples/style-guide/ts/05-13/app/heroes/hero-button.component.avoid.ts b/public/docs/_examples/style-guide/ts/05-13/app/heroes/shared/hero-button/hero-button.component.avoid.ts
similarity index 68%
rename from public/docs/_examples/style-guide/ts/05-13/app/heroes/hero-button.component.avoid.ts
rename to public/docs/_examples/style-guide/ts/05-13/app/heroes/shared/hero-button/hero-button.component.avoid.ts
index f289a23624..d8e8b78d1d 100644
--- a/public/docs/_examples/style-guide/ts/05-13/app/heroes/hero-button.component.avoid.ts
+++ b/public/docs/_examples/style-guide/ts/05-13/app/heroes/shared/hero-button/hero-button.component.avoid.ts
@@ -1,4 +1,6 @@
 // #docregion
+import { Component, Input, Output, EventEmitter } from 'angular2/core';
+// #docregion example
 /* avoid */
 
 @Component({
@@ -9,3 +11,4 @@ export class HeroButtonComponent {
   @Output('changeEvent') change = new EventEmitter<any>();
   @Input('labelAttribute') label: string;
 }
+// #enddocregion example
diff --git a/public/docs/_examples/style-guide/ts/05-13/app/heroes/hero-button.component.ts b/public/docs/_examples/style-guide/ts/05-13/app/heroes/shared/hero-button/hero-button.component.ts
similarity index 100%
rename from public/docs/_examples/style-guide/ts/05-13/app/heroes/hero-button.component.ts
rename to public/docs/_examples/style-guide/ts/05-13/app/heroes/shared/hero-button/hero-button.component.ts
diff --git a/public/docs/_examples/style-guide/ts/05-14/app/toast/toast.component.avoid.ts b/public/docs/_examples/style-guide/ts/05-14/app/shared/toast/toast.component.avoid.ts
similarity index 90%
rename from public/docs/_examples/style-guide/ts/05-14/app/toast/toast.component.avoid.ts
rename to public/docs/_examples/style-guide/ts/05-14/app/shared/toast/toast.component.avoid.ts
index 87d8f9eee2..dd73d9a8a2 100644
--- a/public/docs/_examples/style-guide/ts/05-14/app/toast/toast.component.avoid.ts
+++ b/public/docs/_examples/style-guide/ts/05-14/app/shared/toast/toast.component.avoid.ts
@@ -1,4 +1,6 @@
 // #docregion
+import { OnInit } from 'angular2/core';
+// #docregion example
 /* avoid */
 export class ToastComponent implements OnInit {
 
@@ -35,3 +37,4 @@ export class ToastComponent implements OnInit {
     window.setTimeout(() => this.hide(), 2500);
   }
 }
+// #enddocregion example
diff --git a/public/docs/_examples/style-guide/ts/05-14/app/toast/toast.component.ts b/public/docs/_examples/style-guide/ts/05-14/app/shared/toast/toast.component.ts
similarity index 100%
rename from public/docs/_examples/style-guide/ts/05-14/app/toast/toast.component.ts
rename to public/docs/_examples/style-guide/ts/05-14/app/shared/toast/toast.component.ts
diff --git a/public/docs/_examples/style-guide/ts/05-15/app/heroes/hero-list.component.avoid.ts b/public/docs/_examples/style-guide/ts/05-15/app/heroes/hero-list.component.avoid.ts
deleted file mode 100644
index 4d63f02a94..0000000000
--- a/public/docs/_examples/style-guide/ts/05-15/app/heroes/hero-list.component.avoid.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-// #docregion
-/* avoid */
-
-export class HeroListComponent implements OnInit {
-  heroes: Hero[];
-  constructor(private http: Http) {}
-  getHeros() {
-    this.heroes = [];
-    this.http.get(heroesUrl)
-      .map((response: Response) => <Hero[]>response.json().data)
-      .catch(this.exceptionService.catchBadResponse)
-      .finally(() => this.spinnerService.hide())
-      .subscribe(heroes => this.heroes = heroes);
-  }
-  ngOnInit() {
-    this.getHeros();
-  }
-}
diff --git a/public/docs/_examples/style-guide/ts/05-15/app/heroes/hero-list/hero-list.component.avoid.ts b/public/docs/_examples/style-guide/ts/05-15/app/heroes/hero-list/hero-list.component.avoid.ts
new file mode 100644
index 0000000000..470db8fe26
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/05-15/app/heroes/hero-list/hero-list.component.avoid.ts
@@ -0,0 +1,35 @@
+// #docregion
+/* avoid */
+
+import { OnInit } from 'angular2/core';
+import { Http, Response } from 'angular2/http';
+import { Observable } from 'rxjs/Observable';
+
+import { Hero } from '../shared/hero.model';
+
+const heroesUrl = 'http://angular.io';
+
+export class HeroListComponent implements OnInit {
+  heroes: Hero[];
+  constructor(private http: Http) {}
+  getHeroes() {
+    this.heroes = [];
+    this.http.get(heroesUrl)
+      .map((response: Response) => <Hero[]>response.json().data)
+      .catch(this.catchBadResponse)
+      .finally(() => this.hideSpinner())
+      .subscribe(heroes => this.heroes = heroes);
+  }
+  ngOnInit() {
+    this.getHeroes();
+  }
+
+  private catchBadResponse(err: any, source: Observable<any>) {
+    // log and handle the exception
+    return new Observable();
+  }
+
+  private hideSpinner() {
+    // hide the spinner
+  }
+}
diff --git a/public/docs/_examples/style-guide/ts/05-15/app/heroes/hero-list.component.ts b/public/docs/_examples/style-guide/ts/05-15/app/heroes/hero-list/hero-list.component.ts
similarity index 89%
rename from public/docs/_examples/style-guide/ts/05-15/app/heroes/hero-list.component.ts
rename to public/docs/_examples/style-guide/ts/05-15/app/heroes/hero-list/hero-list.component.ts
index e120785da8..ee84313816 100644
--- a/public/docs/_examples/style-guide/ts/05-15/app/heroes/hero-list.component.ts
+++ b/public/docs/_examples/style-guide/ts/05-15/app/heroes/hero-list/hero-list.component.ts
@@ -1,13 +1,13 @@
 // #docregion
+// #docregion example
 import { Component, OnInit } from 'angular2/core';
 
-import { Hero, HeroService } from './shared/index';
+import { Hero, HeroService } from '../shared/index';
 
 @Component({
   selector: 'toh-hero-list',
   template: `...`
 })
-// #docregion example
 export class HeroListComponent implements OnInit {
   heroes: Hero[];
   constructor(private heroService: HeroService) {}
diff --git a/public/docs/_examples/style-guide/ts/05-16/app/heroes/hero.component.avoid.ts b/public/docs/_examples/style-guide/ts/05-16/app/heroes/hero.component.avoid.ts
index 841476d9b9..74faaee47a 100644
--- a/public/docs/_examples/style-guide/ts/05-16/app/heroes/hero.component.avoid.ts
+++ b/public/docs/_examples/style-guide/ts/05-16/app/heroes/hero.component.avoid.ts
@@ -1,7 +1,8 @@
 // #docregion
+import { Component, Output, EventEmitter } from 'angular2/core';
+// #docregion example
 /* avoid */
 
-// #docregion example
 @Component({
   selector: 'toh-hero',
   template: `...`
diff --git a/public/docs/_examples/style-guide/ts/05-17/app/heroes/heroes-list.component.avoid.ts b/public/docs/_examples/style-guide/ts/05-17/app/heroes/hero-list/heroes-list.component.avoid.ts
similarity index 74%
rename from public/docs/_examples/style-guide/ts/05-17/app/heroes/heroes-list.component.avoid.ts
rename to public/docs/_examples/style-guide/ts/05-17/app/heroes/hero-list/heroes-list.component.avoid.ts
index 0665aec60b..19e835910d 100644
--- a/public/docs/_examples/style-guide/ts/05-17/app/heroes/heroes-list.component.avoid.ts
+++ b/public/docs/_examples/style-guide/ts/05-17/app/heroes/hero-list/heroes-list.component.avoid.ts
@@ -1,4 +1,8 @@
 // #docregion
+import { Component } from 'angular2/core';
+
+import { Hero } from '../shared/hero.model';
+// #docregion example
 /* avoid */
 
 @Component({
@@ -17,3 +21,4 @@ export class HeroesListComponent {
   heroes: Hero[];
   totalPowers: number;
 }
+// #enddocregion example
diff --git a/public/docs/_examples/style-guide/ts/05-17/app/heroes/heroes-list.component.ts b/public/docs/_examples/style-guide/ts/05-17/app/heroes/hero-list/heroes-list.component.ts
similarity index 90%
rename from public/docs/_examples/style-guide/ts/05-17/app/heroes/heroes-list.component.ts
rename to public/docs/_examples/style-guide/ts/05-17/app/heroes/hero-list/heroes-list.component.ts
index f66cc4a086..4da737d6f0 100644
--- a/public/docs/_examples/style-guide/ts/05-17/app/heroes/heroes-list.component.ts
+++ b/public/docs/_examples/style-guide/ts/05-17/app/heroes/hero-list/heroes-list.component.ts
@@ -1,7 +1,7 @@
 // #docregion
 import { Component } from 'angular2/core';
 
-import { Hero } from './hero.model.ts';
+import { Hero } from '../shared/hero.model.ts';
 
 // #docregion example
 @Component({
diff --git a/public/docs/_examples/style-guide/ts/05-17/app/heroes/shared/hero.model.ts b/public/docs/_examples/style-guide/ts/05-17/app/heroes/shared/hero.model.ts
new file mode 100644
index 0000000000..8f7cc205c8
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/05-17/app/heroes/shared/hero.model.ts
@@ -0,0 +1,5 @@
+// #docregion
+export class Hero {
+  id: number;
+  name: string;
+}
diff --git a/public/docs/_examples/style-guide/ts/06-03/app/shared/validate.directive.avoid.ts b/public/docs/_examples/style-guide/ts/06-03/app/shared/validate.directive.avoid.ts
new file mode 100644
index 0000000000..c5d1f06659
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/06-03/app/shared/validate.directive.avoid.ts
@@ -0,0 +1,16 @@
+// #docregion
+import { Directive, HostBinding, HostListener } from 'angular2/core';
+
+// #docregion example
+@Directive({
+  selector: '[tohValidator]'
+})
+export class ValidatorDirective {
+  @HostBinding('attr.role') role = 'button';
+  @HostListener('mouseenter') onMouseEnter() {
+    // do work
+  }
+}
+export class ValidateDirective { }
+// #enddocregion example
+
diff --git a/public/docs/_examples/style-guide/ts/06-03/app/shared/validate.directive.ts b/public/docs/_examples/style-guide/ts/06-03/app/shared/validate.directive.ts
new file mode 100644
index 0000000000..50114e680d
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/06-03/app/shared/validate.directive.ts
@@ -0,0 +1,21 @@
+// #docregion
+import { Directive, HostBinding, HostListener } from 'angular2/core';
+
+// #docregion example
+/* avoid */
+
+@Directive({
+  selector: '[tohValidator]',
+  host: {
+    '(mouseenter)': 'onMouseEnter()',
+    'attr.role': 'button'
+  }
+})
+export class ValidatorDirective {
+  role = 'button';
+  onMouseEnter() {
+    // do work
+  }
+}
+export class ValidateDirective { }
+// #enddocregion example
diff --git a/public/docs/_examples/style-guide/ts/07-04/app/heroes/hero-arena.service.avoid.ts b/public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/hero-arena.service.avoid.ts
similarity index 50%
rename from public/docs/_examples/style-guide/ts/07-04/app/heroes/hero-arena.service.avoid.ts
rename to public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/hero-arena.service.avoid.ts
index 5d63a9fdcc..ed42e92451 100644
--- a/public/docs/_examples/style-guide/ts/07-04/app/heroes/hero-arena.service.avoid.ts
+++ b/public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/hero-arena.service.avoid.ts
@@ -1,4 +1,9 @@
 // #docregion
+import { Inject } from 'angular2/core';
+import { Http } from 'angular2/http';
+
+import { HeroService } from './hero.service';
+// #docregion example
 /* avoid */
 
 export class HeroArena {
@@ -6,3 +11,4 @@ export class HeroArena {
       @Inject(HeroService) private heroService: HeroService,
       @Inject(Http) private http: Http) {}
 }
+// #enddocregion example
diff --git a/public/docs/_examples/style-guide/ts/07-04/app/heroes/hero-arena.service.ts b/public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/hero-arena.service.ts
similarity index 85%
rename from public/docs/_examples/style-guide/ts/07-04/app/heroes/hero-arena.service.ts
rename to public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/hero-arena.service.ts
index c4f1e9ec54..a49cb99e54 100644
--- a/public/docs/_examples/style-guide/ts/07-04/app/heroes/hero-arena.service.ts
+++ b/public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/hero-arena.service.ts
@@ -2,7 +2,7 @@
 import { Injectable } from 'angular2/core';
 import { Http } from 'angular2/http';
 
-import { HeroService } from './shared/index';
+import { HeroService } from './index';
 
 // #docregion example
 @Injectable()
diff --git a/public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/index.ts b/public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/index.ts
index 330dbe676c..27516fdedd 100644
--- a/public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/index.ts
+++ b/public/docs/_examples/style-guide/ts/07-04/app/heroes/shared/index.ts
@@ -1,3 +1,3 @@
 // #docregion
-export * from './hero.model.ts';
-export * from './hero.service.ts';
+export * from './hero.model';
+export * from './hero.service';
diff --git a/public/docs/_examples/style-guide/ts/09-01/app/hero-button.component.avoid.ts b/public/docs/_examples/style-guide/ts/09-01/app/heroes/shared/hero-button/hero-button.component.avoid.ts
similarity index 71%
rename from public/docs/_examples/style-guide/ts/09-01/app/hero-button.component.avoid.ts
rename to public/docs/_examples/style-guide/ts/09-01/app/heroes/shared/hero-button/hero-button.component.avoid.ts
index f1be4819f0..b684a15041 100644
--- a/public/docs/_examples/style-guide/ts/09-01/app/hero-button.component.avoid.ts
+++ b/public/docs/_examples/style-guide/ts/09-01/app/heroes/shared/hero-button/hero-button.component.avoid.ts
@@ -1,4 +1,6 @@
 // #docregion
+import { Component } from 'angular2/core';
+// #docregion example
 /* avoid */
 
 @Component({
@@ -10,3 +12,4 @@ export class HeroButtonComponent {
     console.log('The component is initialized');
   }
 }
+// #enddocregion example
diff --git a/public/docs/_examples/style-guide/ts/09-01/app/hero-button.component.ts b/public/docs/_examples/style-guide/ts/09-01/app/heroes/shared/hero-button/hero-button.component.ts
similarity index 100%
rename from public/docs/_examples/style-guide/ts/09-01/app/hero-button.component.ts
rename to public/docs/_examples/style-guide/ts/09-01/app/heroes/shared/hero-button/hero-button.component.ts
diff --git a/public/docs/_examples/style-guide/ts/10-01/app/app.component.ts b/public/docs/_examples/style-guide/ts/10-01/app/app.component.ts
index 1299b0ad92..df41f73844 100644
--- a/public/docs/_examples/style-guide/ts/10-01/app/app.component.ts
+++ b/public/docs/_examples/style-guide/ts/10-01/app/app.component.ts
@@ -2,8 +2,10 @@
 import { Component } from 'angular2/core';
 import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
 
-import { HeroService } from './shared';
-import { NavComponent } from './layout/nav.component';
+import { NavComponent } from './shared/nav/nav.component';
+import { DashboardComponent } from './dashboard/dashboard.component';
+import { HeroesComponent } from './heroes/heroes.component';
+import { HeroService } from './heroes/shared/hero.service';
 
 @Component({
   selector: 'toh-app',
diff --git a/public/docs/_examples/style-guide/ts/10-01/app/dashboard/dashboard.component.ts b/public/docs/_examples/style-guide/ts/10-01/app/dashboard/dashboard.component.ts
new file mode 100644
index 0000000000..124031821f
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/10-01/app/dashboard/dashboard.component.ts
@@ -0,0 +1,11 @@
+import { Component, OnInit } from 'angular2/core';
+
+@Component({
+  selector: 'toh-dashboard',
+  templateUrl: 'app/dashboard/dashboard.component.html'
+})
+export class DashboardComponent implements OnInit {
+  constructor() { }
+
+  ngOnInit() { }
+}
diff --git a/public/docs/_examples/style-guide/ts/10-01/app/heroes/heroes.component.ts b/public/docs/_examples/style-guide/ts/10-01/app/heroes/heroes.component.ts
new file mode 100644
index 0000000000..aeab1c4ada
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/10-01/app/heroes/heroes.component.ts
@@ -0,0 +1,11 @@
+import { Component, OnInit } from 'angular2/core';
+
+@Component({
+  selector: 'toh-heroes',
+  templateUrl: 'app/heroes/heroes.component.html'
+})
+export class HeroesComponent implements OnInit {
+  constructor() { }
+
+  ngOnInit() { }
+}
diff --git a/public/docs/_examples/style-guide/ts/10-01/app/heroes/shared/hero.service.ts b/public/docs/_examples/style-guide/ts/10-01/app/heroes/shared/hero.service.ts
new file mode 100644
index 0000000000..6bf7bc87a9
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/10-01/app/heroes/shared/hero.service.ts
@@ -0,0 +1,8 @@
+import { Injectable } from 'angular2/core';
+
+@Injectable()
+export class HeroService {
+
+  constructor() { }
+
+}
diff --git a/public/docs/_examples/style-guide/ts/10-01/app/shared/nav/nav.component.ts b/public/docs/_examples/style-guide/ts/10-01/app/shared/nav/nav.component.ts
new file mode 100644
index 0000000000..f2ef8f7bc3
--- /dev/null
+++ b/public/docs/_examples/style-guide/ts/10-01/app/shared/nav/nav.component.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from 'angular2/core';
+
+@Component({
+  selector: 'toh-nav',
+  templateUrl: 'app/shared/nav/nav.component.html'
+})
+export class NavComponent implements OnInit {
+  constructor() { }
+
+  ngOnInit() { }
+
+}
diff --git a/public/docs/ts/latest/guide/style-guide.jade b/public/docs/ts/latest/guide/style-guide.jade
index e57104b0aa..64bd039c32 100644
--- a/public/docs/ts/latest/guide/style-guide.jade
+++ b/public/docs/ts/latest/guide/style-guide.jade
@@ -1,7 +1,7 @@
 include ../_util-fns
 
 :marked
-  Welcome to the Angular 2 Guide of Style (version 4)
+  Welcome to the Angular 2 Guide of Style (version 5)
 
   ## Purpose
 
@@ -9,6 +9,39 @@ include ../_util-fns
 
   The purpose of this style guide is to provide guidance on building Angular applications by showing the conventions we use and, more importantly, why we choose them.
 .l-main-section
+
+:marked
+  ## Style Vocabulary
+
+  Each guideline describes either a good or bad practice, and all have a consistent presentation.
+  
+  The wording of each guideline indicates how strong the recommendation is.
+  
+.s-rule.do
+  :marked
+    **Do** is one that should always be followed. 
+    _Always_ might be a bit too strong a word.
+    Guidelines that literally should always be followed are extremely rare. 
+    On the other hand, we need a really unusual case for breaking a *Do* guideline.
+  
+.s-rule.consider
+  :marked
+    **Consider** guidelines should generally be followed.    
+    If you fully understand the meaning behind the guideline and have a good reason to deviate, then do so. Please strive to be consistent.
+    
+.s-rule.avoid
+  :marked
+    **Avoid** indicates something we should almost never do. Code examples to *avoid* have an unmistakeable red header.
+.l-main-section
+    
+:marked
+  ## File Structure Conventions
+
+  Some code examples display a file that has one or more similarly named companion files. (e.g. hero.component.ts and hero.component.html). 
+  
+  The guideline will use the shortcut `hero.component.ts|html|css|spec` to represent that various files. This makes this guide's file structures easier to read and more terse.
+  
+.l-main-section
 a(id='toc')
 
 :marked
@@ -31,25 +64,34 @@ a(id='toc')
 
   We apply the [Single Responsibility Principle](https:\/\/en.wikipedia.org/wiki/Single_responsibility_principle) to all Components, Services, and other symbols we create. This helps make our app cleaner, easier to read and maintain, and more testable.  
 
-  ### Rule of 1
+  ### Rule of One
   <a id="01-01"></a>
   #### Style 01-01
-.s-rule
+.s-rule.do
   :marked
-    Define one component per file and strive for fewer than 400 lines of code.
+    **Do** define one thing (e.g. service or component) per file.
+
+.s-rule.consider
+  :marked
+    **Consider** limiting files to 400 lines of code.
+
 .s-why
   :marked
     **Why?** One component per file makes it far easier to read, maintain, and avoid collisions with teams in source control.
 
+.s-why
+  :marked
     **Why?** One component per file avoids hidden bugs that often arise when combining components in a file where they may share variables, create unwanted closures, or unwanted coupling with dependencies.
 
+.s-why
+  :marked
     **Why?** A single component can be the default export for its file which facilitates lazy loading with the Component Router.
 :marked
   The key is to make the code more reusable, easier to read, and less mistake prone.
     
   The following *negative* example defines the `AppComponent`, bootstraps the app, defines the `Hero` model object, and loads heroes from the server ... all in the same file. *Don't do this*.
 
-+makeExample('style-guide/ts/01-01/app/heroes/hero.component.avoid.ts', '', 'hero.component.ts')(avoid=1)
++makeExample('style-guide/ts/01-01/app/heroes/hero.component.avoid.ts', '', 'app/heroes/hero.component.ts')(avoid=1)
 :marked
   Better to redistribute the component and supporting activities into their own dedicated files.
 
@@ -57,16 +99,16 @@ a(id='toc')
   `style-guide/ts/01-01/app/main.ts,
   style-guide/ts/01-01/app/app.component.ts,
   style-guide/ts/01-01/app/heroes/heroes.component.ts,
-  style-guide/ts/01-01/app/heroes/hero.service.ts,
-  style-guide/ts/01-01/app/heroes/hero.model.ts,  
-  style-guide/ts/01-01/app/heroes/mock-heroes.ts`,
+  style-guide/ts/01-01/app/heroes/shared/hero.service.ts,
+  style-guide/ts/01-01/app/heroes/shared/hero.model.ts,  
+  style-guide/ts/01-01/app/heroes/shared/mock-heroes.ts`,
   '',
   `app/main.ts, 
   app/app.component.ts, 
   app/heroes/heroes.component.ts, 
-  app/heroes/hero.service.ts, 
-  app/heroes/hero.model.ts,
-  app/heroes/mock-heroes.ts`)
+  app/heroes/shared/hero.service.ts, 
+  app/heroes/shared/hero.model.ts,
+  app/heroes/shared/mock-heroes.ts`)
 
 :marked
   As the app grows, this rule becomes even more important.
@@ -78,9 +120,16 @@ a(href="#toc") Back to top
   ### Small Functions
   <a id="01-02"></a>
   #### Style 01-02
+.s-rule.do
+  :marked
+    **Do** define small functions
+    
+.s-rule.consider
+  :marked
+    **Consider** limiting to no more than 75 lines.
 
-  - Define small functions, no more than 75 LOC (less is better).
-
+.s-why
+  :marked
     **Why?** Small functions are easier to test, especially when they do one thing and serve one purpose.
 
     **Why?** Small functions promote reuse.
@@ -106,13 +155,25 @@ a(href="#toc") Back to top
   <a id="02-01"></a>
   #### Style 02-01
 
-    - Use consistent names for all symbols following a pattern that describes the symbol's feature then its type. The recommended pattern is `feature.type.ts`.
+.s-rule.do
+  :marked
+    **Do** use consistent names for all symbols.
+    
+.s-rule.do
+  :marked
+    **Do** follow a pattern that describes the symbol's feature then its type. The recommended pattern is `feature.type.ts`.
 
-      **Why?** Naming conventions help provide a consistent way to find content at a glance. Consistency within the project is vital. Consistency with a team is important. Consistency across a company provides tremendous efficiency.
+.s-why
+  :marked
+    **Why?** Naming conventions help provide a consistent way to find content at a glance. Consistency within the project is vital. Consistency with a team is important. Consistency across a company provides tremendous efficiency.
 
-      **Why?** The naming conventions should simply help we find our code faster and make it easier to understand.
+.s-why
+  :marked
+    **Why?** The naming conventions should simply help we find our code faster and make it easier to understand.
 
-      **Why?** Names of folders and files should clearly convey their intent. For example, `app/heroes/hero-list.component.ts` may contain a component that manages a list of heroes.
+.s-why
+  :marked
+    **Why?** Names of folders and files should clearly convey their intent. For example, `app/heroes/hero-list.component.ts` may contain a component that manages a list of heroes.
 
 a(href="#toc") Back to top
 
@@ -122,17 +183,33 @@ a(href="#toc") Back to top
   <a id="02-02"></a>
   #### Style 02-02
 
-    - Use dashes to separate words. Use dots to separate the descriptive name from the type.
+.s-rule.do
+  :marked
+    **Do** use dashes to separate words. 
 
-    - Use consistent names for all components following a pattern that describes the component's feature then its type. A recommended pattern is `feature.type.ts`.
+.s-rule.do
+  :marked
+    **Do** use dots to separate the descriptive name from the type.
 
-    - Use conventional suffixes for the types including `*.service.ts`, `*.component.ts`, `*.pipe.ts`. Invent other suffixes where desired for our team, but take care in having too many.
+.s-rule.do
+  :marked
+    **Do** use consistent names for all components following a pattern that describes the component's feature then its type. A recommended pattern is `feature.type.ts`.
 
-      **Why?** Provides a consistent way to quickly identify what is in the file.
+.s-rule.do
+  :marked
+    **Do** use conventional suffixes for the types including `*.service.ts`, `*.component.ts`, `*.pipe.ts`. Invent other suffixes where desired for our team, but take care in having too many.
 
-      **Why?** Provides a consistent way to quickly find a specific file using an editor or IDE's fuzzy search techniques.
+.s-why
+  :marked
+    **Why?** Provides a consistent way to quickly identify what is in the file.
 
-      **Why?** Provides pattern matching for any automated tasks.
+.s-why
+  :marked
+    **Why?** Provides a consistent way to quickly find a specific file using an editor or IDE's fuzzy search techniques.
+
+.s-why
+  :marked
+    **Why?** Provides pattern matching for any automated tasks.
 
 a(href="#toc") Back to top
 
@@ -142,28 +219,41 @@ a(href="#toc") Back to top
   <a id="02-03"></a>
   #### Style 02-03
 
-    - Use consistent names for all assets named after what they represent.
+.s-rule.do
+  :marked
+    **Do** use consistent names for all assets named after what they represent.
 
-    - Use UpperCamelCase for symbols. Match the name of the symbol to the naming of the file.
+.s-rule.do
+  :marked
+    **Do** use UpperCamelCase for symbols. Match the name of the symbol to the naming of the file.
 
-    - Append the symbol name with a suffix that it represents.
+.s-rule.do
+  :marked
+    **Do** append the symbol name with the suffix that it represents.
 
-      **Why?** Provides a consistent way to quickly identify and reference assets.
+.s-why
+  :marked
+    **Why?** Provides a consistent way to quickly identify and reference assets.
 
-      **Why?** UpperCamelCase is conventional for identifying object that can be instantiated using a constructor.
+.s-why
+  :marked
+    **Why?** UpperCamelCase is conventional for identifying object that can be instantiated using a constructor.
 
-      **Why?** The `Component` suffix is more commonly used and is more explicitly descriptive.
+.s-why
+  :marked
+    **Why?** The `Component` suffix is more commonly used and is more explicitly descriptive.
 
-    ```
-    /* recommended */
-    AppComponent         // app.component.ts
-    HeroesComponent      // heroes.component.ts
-    HeroListComponent    // hero-list.component.ts
-    HeroDetailComponent  // hero-detail.component.ts
+:marked
+  ```
+  /* recommended */
+  AppComponent         // app.component.ts
+  HeroesComponent      // heroes.component.ts
+  HeroListComponent    // hero-list.component.ts
+  HeroDetailComponent  // hero-detail.component.ts
 
-    /* recommended */
-    ValidationDirective  // validation.directive.ts
-    ```
+  /* recommended */
+  ValidationDirective  // validation.directive.ts
+  ```
 
 a(href="#toc") Back to top
 
@@ -173,14 +263,31 @@ a(href="#toc") Back to top
   <a id="02-04"></a>
   #### Style 02-04
 
-    - Use consistent names for all services named after their feature. Use UpperCamelCase for services. Suffix services with `Service` when it is not clear what they are (e.g. when they are nouns).
+.s-rule.do
+  :marked
+    **Do** use consistent names for all services named after their feature. 
+    
+.s-rule.do
+  :marked
+    **Do** use UpperCamelCase for services. 
+    
+.s-rule.do
+  :marked
+    **Do** suffix services with `Service` when it is not clear what they are (e.g. when they are nouns).
 
-      **Why?** Provides a consistent way to quickly identify and reference services.
+.s-why
+  :marked
+    **Why?** Provides a consistent way to quickly identify and reference services.
 
-      **Why?** Clear service names such as `logger` do not require a suffix.
+.s-why
+  :marked
+    **Why?** Clear service names such as `logger` do not require a suffix.
 
-      **Why?** Service names such as `Credit` are nouns and require a suffix and should be named with a suffix when it is not obvious if it is a service or something else.
+.s-why
+  :marked
+    **Why?** Service names such as `Credit` are nouns and require a suffix and should be named with a suffix when it is not obvious if it is a service or something else.
 
+:marked
   ```
   HeroDataService    // hero-data.service.ts
   CreditService      // credit.service.ts
@@ -195,13 +302,21 @@ a(href="#toc") Back to top
   <a id="02-05"></a>
   #### Style 02-05
 
-    - Place bootstrapping and platform logic for the app in a file named `main.ts`.
+.s-rule.do
+  :marked
+    **Do** put bootstrapping and platform logic for the app in a file named `main.ts`.
 
-    - Do not put app logic in the `main.ts`. Instead consider placing it in a Component or Service.
+.s-rule.avoid
+  :marked
+    **Avoid** putting app logic in the `main.ts`. Instead consider placing it in a Component or Service.
 
-      **Why?** Follows a consistent convention for the startup logic of an app.
+.s-why
+  :marked
+    **Why?** Follows a consistent convention for the startup logic of an app.
 
-      **Why?** Follows a familar convention from other technology platforms.
+.s-why
+  :marked
+    **Why?** Follows a familar convention from other technology platforms.
 
 a(href="#toc") Back to top
 
@@ -211,11 +326,17 @@ a(href="#toc") Back to top
   <a id="02-06"></a>
   #### Style 02-06
 
-    - Use lowerCamelCase for naming the selectors of our directives.
+.s-rule.do
+  :marked
+    **Do** Use lowerCamelCase for naming the selectors of our directives.
 
-      **Why?**: Keeps the names of the properties defined in the directives that are bound to the view consistent with the attribute names.
+.s-why
+  :marked
+    **Why?** Keeps the names of the properties defined in the directives that are bound to the view consistent with the attribute names.
 
-      **Why?**: The Angular 2 HTML parser is case sensitive and will recognize lowerCamelCase
+.s-why
+  :marked
+    **Why?** The Angular 2 HTML parser is case sensitive and will recognize lowerCamelCase
 
 a(href="#toc") Back to top
 
@@ -225,28 +346,36 @@ a(href="#toc") Back to top
   <a id="02-07"></a>
   #### Style 02-07
 
-    - Use a custom prefix for the selector of our components. For example, the prefix `toh` represents from **T**our **o**f **H**eroes and the prefix `admin` represents an admin feature area.
+.s-rule.do
+  :marked
+    **Do** use a custom prefix for the selector of our components. For example, the prefix `toh` represents from **T**our **o**f **H**eroes and the prefix `admin` represents an admin feature area.
     
-    - Use a prefix that identifies the feature area in the app.  
+.s-rule.do
+  :marked
+    **Do** use a prefix that identifies the feature area or the app itself.  
     
-    - In small apps, use a prefix that identifies the app.
+.s-why
+  :marked
+    **Why?** Prevents name collisions
 
-      **Why?**: Prevents name collisions
+.s-why
+  :marked
+    **Why?** Our Components and elements are easily identified
+    
+.s-why
+  :marked
+    **Why?** Makes it easier to promoted and share our feature in other apps. 
 
-      **Why?**: Our Components and elements are easily identified
-      
-      **Why?**: Makes it easier to promoted and share our feature in other apps. 
-
-+makeExample('style-guide/ts/02-07/app/heroes/hero.component.avoid.ts', '', 'hero.component.ts')(avoid=1)
++makeExample('style-guide/ts/02-07/app/heroes/hero.component.avoid.ts', '', 'app/heroes/hero.component.ts')(avoid=1)
 :marked
 
-+makeExample('style-guide/ts/02-07/app/users/users.component.avoid.ts', '', 'users.component.ts')(avoid=1)
++makeExample('style-guide/ts/02-07/app/users/users.component.avoid.ts', '', 'app/users/users.component.ts')(avoid=1)
 :marked
 
-+makeExample('style-guide/ts/02-07/app/heroes/hero.component.ts', 'example', 'hero.component.ts')
++makeExample('style-guide/ts/02-07/app/heroes/hero.component.ts', 'example', 'app/heroes/hero.component.ts')
 :marked
 
-+makeExample('style-guide/ts/02-07/app/users/users.component.ts', 'example', 'users.component.ts')
++makeExample('style-guide/ts/02-07/app/users/users.component.ts', 'example', 'app/users/users.component.ts')
 :marked
 
 :marked
@@ -254,16 +383,22 @@ a(href="#toc") Back to top
   <a id="02-08"></a>
   #### Style 02-08
 
-    - Use a custom prefix for the selector of our directives (for instance below is used the prefix `toh` from **T**our **o**f **H**eroes).
+.s-rule.do
+  :marked
+    **Do** use a custom prefix for the selector of our directives (for instance below is used the prefix `toh` from **T**our **o**f **H**eroes).
 
-      **Why?**: Prevents name collisions
+.s-why
+  :marked
+    **Why?** Prevents name collisions
 
-      **Why?**: Our Directives are easily identified
+.s-why
+  :marked
+    **Why?** Our Directives are easily identified
 
-+makeExample('style-guide/ts/02-08/app/shared/validate.directive.avoid.ts', '', 'validate.directive.ts')(avoid=1)
++makeExample('style-guide/ts/02-08/app/shared/validate.directive.avoid.ts', '', 'app/shared/validate.directive.ts')(avoid=1)
 :marked
 
-+makeExample('style-guide/ts/02-08/app/shared/validate.directive.ts', 'example', 'validate.directive.ts')
++makeExample('style-guide/ts/02-08/app/shared/validate.directive.ts', 'example', 'app/shared/validate.directive.ts')
 :marked
 
 a(href="#toc") Back to top
@@ -274,10 +409,15 @@ a(href="#toc") Back to top
   <a id="02-09"></a>
   #### Style 02-09
 
-    - Use consistent names for all pipes named after their feature.
+.s-rule.do
+  :marked
+    **Do** use consistent names for all pipes, named after their feature.
 
-      **Why?** Provides a consistent way to quickly identify and reference pipes.
+.s-why
+  :marked
+    **Why?** Provides a consistent way to quickly identify and reference pipes.
 
+:marked
   ```
   EllipsisPipe    // ellipsis.pipe.ts
   InitCapsPipe    // init-caps.pipe.ts
@@ -291,12 +431,23 @@ a(href="#toc") Back to top
   <a id="02-10"></a>
   #### Style 02-10
 
-    - Name test specifications similar to the component they test with a suffix of `.spec`.
+.s-rule.do
+  :marked
+    **Do** name test specification files the same as the component they test
+    
+.s-rule.do
+  :marked
+    **Do** name test specification files with a suffix of `.spec`.
 
+.s-why
+  :marked
       **Why?** Provides a consistent way to quickly identify tests.
 
+.s-why
+  :marked
       **Why?** Provides pattern matching for [karma](http://karma-runner.github.io/) or other test runners.
 
+:marked
   ```
   // recommended
 
@@ -324,12 +475,19 @@ a(href="#toc") Back to top
   <a id="02-11"></a>
   #### Style 02-11
 
-    - Name end-to-end test specifications similar to the feature they test with a suffix of `.e2e-spec`.
+.s-rule.do
+  :marked
+    **Do** name end-to-end test specification files after the feature they test with a suffix of `.e2e-spec`.
 
-      **Why?** Provides a consistent way to quickly identify end-to-end tests.
+.s-why
+  :marked
+    **Why?** Provides a consistent way to quickly identify end-to-end tests.
 
-      **Why?** Provides pattern matching for test runners and build automation.
+.s-why
+  :marked
+    **Why?** Provides pattern matching for test runners and build automation.
 
+:marked
   ```
   // recommended
   app.e2e-spec.ts
@@ -340,17 +498,175 @@ a(href="#toc") Back to top
 
 .l-main-section
 :marked
-  ### Route Naming
-  <a id="02-30"></a>
-  #### Style 02-30
+  ## TypeScript Conventions
 
-    - Use the naming convention for the routes with the component name without the Component suffix.
+  Have consistent set of coding, naming, and whitespace conventions.
 
-      **Why?** This maps the route name to the component and makes it easy to identify.
+.l-main-section
+:marked
+  ### Classes
+  <a id="03-01"></a>
+  #### Style 03-01
 
-  ```
-  { path: '/dashboard', name: 'Dashboard', component: DashboardComponent }
-  ```
+.s-rule.do
+  :marked
+    **Do** use upper camel case when naming classes. 
+    
+.s-why
+  :marked
+    **Why?** Follows conventional thinking for class names.
+
+.s-why
+  :marked
+    **Why?** Classes can be instantiated and construct an instance. We often use UpperCamelCase to indicate a constructable asset.
+
++makeExample('style-guide/ts/03-01/app/shared/exception.service.avoid.ts', 'example', 'app/shared/exception.service.ts')(avoid=1)
+:marked
+
++makeExample('style-guide/ts/03-01/app/shared/exception.service.ts', 'example', 'app/shared/exception.service.ts')
+:marked
+
+a(href="#toc") Back to top
+
+.l-main-section
+:marked
+  ### Constants
+  <a id="03-02"></a>
+  #### Style 03-02
+
+.s-rule.do
+  :marked
+    **Do** use uppercase with underscores when naming constants. 
+    
+.s-why
+  :marked
+    **Why?** Follows conventional thinking for constants.
+
+.s-why
+  :marked
+    **Why?** Constants can easily be identified.
+
++makeExample('style-guide/ts/03-02/app/shared/data.service.avoid.ts', 'example', 'app/shared/data.service.ts')(avoid=1)
+:marked
+
++makeExample('style-guide/ts/03-02/app/shared/data.service.ts', 'example', 'app/shared/data.service.ts')
+:marked
+
+a(href="#toc") Back to top
+
+.l-main-section
+:marked
+  ### Interfaces
+  <a id="03-03"></a>
+  #### Style 03-03
+
+.s-rule.do
+  :marked
+    **Do** name an interface using upper camel case. 
+
+.s-rule.do
+  :marked
+    **Consider** naming an interface without an `I` prefix. 
+
+.s-why
+  :marked
+    **Why?** When we use types, we can often simply use the class as the type. 
+
++makeExample('style-guide/ts/03-03/app/shared/hero-collector.service.avoid.ts', 'example', 'app/shared/hero-collector.service.ts')(avoid=1)
+:marked
+
++makeExample('style-guide/ts/03-03/app/shared/hero-collector.service.ts', 'example', 'app/shared/hero-collector.service.ts')
+:marked
+
+a(href="#toc") Back to top
+
+.l-main-section
+:marked
+  ### Properties and Methods
+  <a id="03-04"></a>
+  #### Style 03-04
+
+.s-rule.do
+  :marked
+    **Do** use lower camel case to name properties and methods. 
+    
+.s-rule.avoid
+  :marked
+    **Avoid** prefixing private properties and methods with an underscore. 
+    
+.s-why
+  :marked
+    **Why?** Follows conventional thinking for properties and methods.
+
+.s-why
+  :marked
+    **Why?** JavaScript lacks a true private property or method. 
+
+.s-why
+  :marked
+    **Why?** TypeScript tooling makes it easy to identify private vs public properties and methods. 
+
++makeExample('style-guide/ts/03-04/app/shared/toast/toast.service.avoid.ts', 'example', 'app/shared/toast/toast.service.ts')(avoid=1)
+:marked
+
++makeExample('style-guide/ts/03-04/app/shared/toast/toast.service.ts', 'example', 'app/shared/toast/toast.service.ts')
+:marked
+
+a(href="#toc") Back to top
+
+.l-main-section
+:marked
+  ### Import Destructuring Spacing
+  <a id="03-05"></a>
+  #### Style 03-05
+
+.s-rule.do
+  :marked
+    **Do** leave one whitespace character inside of the `import` statements' curly braces when destructuring. 
+    
+.s-why
+  :marked
+    **Why?** Whitespace makes it easier to read the imports. 
+
++makeExample('style-guide/ts/03-05/app/+heroes/shared/hero.service.avoid.ts', 'example', 'app/+heroes/shared/hero.service.ts')(avoid=1)
+:marked
+
++makeExample('style-guide/ts/03-05/app/+heroes/shared/hero.service.ts', 'example', 'app/+heroes/shared/hero.service.ts')
+:marked
+
+a(href="#toc") Back to top
+
+.l-main-section
+:marked
+  ### Import Line Spacing
+  <a id="03-06"></a>
+  #### Style 03-06
+
+.s-rule.do
+  :marked
+    **Do** leave one empty line between third party imports and imports of code we created. 
+    
+.s-rule.do
+  :marked
+    **Do** list import lines alphabetized by the module. 
+
+.s-rule.do
+  :marked
+    **Do** list destructured imported assets alphabetized. 
+
+.s-why
+  :marked
+    **Why?** The empty line makes it easy to read and locate imports. 
+
+.s-why
+  :marked
+    **Why?** Alphabetizing makes it easier to read and locate imports.
+
++makeExample('style-guide/ts/03-06/app/+heroes/shared/hero.service.avoid.ts', 'example', 'app/+heroes/shared/hero.service.ts')(avoid=1)
+:marked
+
++makeExample('style-guide/ts/03-06/app/+heroes/shared/hero.service.ts', 'example', 'app/+heroes/shared/hero.service.ts')
+:marked
 
 a(href="#toc") Back to top
 
@@ -370,9 +686,17 @@ a(href="#toc") Back to top
   <a id="04-01"></a>
   #### Style 04-01
 
-    - Structure the app such that we can `L`ocate our code quickly, `I`dentify the code at a glance, keep the `F`lattest structure we can, and `T`ry to stay DRY. The structure should follow these 4 basic guidelines, listed in order of importance.
+.s-rule.do
+  :marked
+    **Do** structure the app such that we can `L`ocate our code quickly, `I`dentify the code at a glance, keep the `F`lattest structure we can, and `T`ry to stay DRY. 
+    
+.s-rule.do
+  :marked
+    **Do** define the structure to follow these four basic guidelines, listed in order of importance.
 
-      *Why LIFT?*: Provides a consistent structure that scales well, is modular, and makes it easier to increase developer efficiency by finding code quickly. Another way to check our app structure is to ask ourselves: How quickly can we open and work in all of the related files for a feature?
+.s-why
+  :marked
+    **Why?** LIFT Provides a consistent structure that scales well, is modular, and makes it easier to increase developer efficiency by finding code quickly. Another way to check our app structure is to ask ourselves: How quickly can we open and work in all of the related files for a feature?
 
 a(href="#toc") Back to top
 
@@ -382,9 +706,13 @@ a(href="#toc") Back to top
   <a id="04-02"></a>
   #### Style 04-02
 
-    - Make locating our code intuitive, simple and fast.
+.s-rule.do
+  :marked
+    **Do** make locating our code intuitive, simple and fast.
 
-      **Why?** We find this to be super important for a project. If our team cannot find the files we need to work on quickly, we will not be able to work as efficiently as possible, and the structure needs to change. We may not know the file name or where its related files are, so putting them in the most intuitive locations and near each other saves a ton of time. A descriptive folder structure can help with this.
+.s-why
+  :marked
+    **Why?** We find this to be super important for a project. If our team cannot find the files we need to work on quickly, we will not be able to work as efficiently as possible, and the structure needs to change. We may not know the file name or where its related files are, so putting them in the most intuitive locations and near each other saves a ton of time. A descriptive folder structure can help with this.
 
 a(href="#toc") Back to top
 
@@ -394,11 +722,25 @@ a(href="#toc") Back to top
   <a id="04-03"></a>
   #### Style 04-03
 
-    - When we look at a file we should instantly know what it contains and represents.
+.s-rule.do
+  :marked
+    **Do** name the file such that we instantly know what it contains and represents.
 
-      **Why?** We spend less time hunting and pecking for code, and become more efficient. If this means we want longer file names, then so be it. Be descriptive with file names and keeping the contents of the file to exactly 1 component. Avoid files with multiple components, multiple services, or a mixture. 
-      
-  There are deviations of the 1 per file rule when we have a set of very small features that are all related to each other, as they are still easily identifiable. 
+.s-rule.do
+  :marked
+    **Do** be descriptive with file names and keeping the contents of the file to exactly one component.
+     
+.s-rule.avoid
+  :marked
+    **Avoid** files with multiple components, multiple services, or a mixture. 
+    
+.s-why
+  :marked
+    **Why?** We spend less time hunting and pecking for code, and become more efficient. If this means we want longer file names, then so be it.
+
+.l-sub-section
+  :marked
+    There are deviations of the 1 per file rule when we have a set of very small features that are all related to each other, as they are still easily identifiable.
 
 a(href="#toc") Back to top
 
@@ -408,9 +750,17 @@ a(href="#toc") Back to top
   <a id="04-04"></a>
   #### Style 04-04
 
-    - Keep a flat folder structure as long as possible. When we get to 7+ files, consider separation.
+.s-rule.do
+  :marked
+    **Do** keep a flat folder structure as long as possible. 
+    
+.s-rule.consider
+  :marked
+    **Consider** creating fodlers when we get to seven or more files.
 
-      **Why?** Nobody wants to search 7 levels of folders to find a file. In a folder structure there is no hard and fast number rule, but when a folder has 7-10 files, that may be time to create subfolders. We base it on our comfort level. Use a flatter structure until there is an obvious value (to help the rest of LIFT) in creating a new folder.
+.s-why
+  :marked
+    **Why?** Nobody wants to search 7 levels of folders to find a file. In a folder structure there is no hard and fast number rule, but when a folder has 7-10 files, that may be time to create subfolders. We base it on our comfort level. Use a flatter structure until there is an obvious value (to help the rest of LIFT) in creating a new folder.
 
 a(href="#toc") Back to top
 
@@ -420,217 +770,457 @@ a(href="#toc") Back to top
   <a id="04-05"></a>
   #### Style 04-05
 
-    - Be DRY, but don't go nuts and sacrifice readability.
+.s-rule.do
+  :marked
+    **Do** be DRY
+    
+.s-rule.avoid
+  :marked
+    **Avoid** being so DRY that we sacrifice readability.
 
-      **Why?** Being DRY is important, but not crucial if it sacrifices the others in LIFT, which is why we call it T-DRY. We don’t want to type `hero-view.component.html` for a view because, well, it’s obviously a view. If it is not obvious or by convention, then we name it.
+.s-why
+  :marked
+    **Why?** Being DRY is important, but not crucial if it sacrifices the others in LIFT, which is why we call it T-DRY. We don’t want to type `hero-view.component.html` for a view because, well, it’s obviously a view. If it is not obvious or by convention, then we name it.
 
 a(href="#toc") Back to top
 
 .l-main-section
 :marked
   ### Overall Structural Guidelines
-  <a id="04-50"></a>
-  #### Style 04-50
+  <a id="04-06"></a>
+  #### Style 04-06
 
-    - Have a near term view of implementation and a long term vision. In other words, start small but keep in mind on where the app is heading down the road. All of the app's code goes in a root folder named `app`. All content is 1 feature per file. Each component, service, pipe is in its own file. All 3rd party vendor scripts are stored in another root folder and not in the `app` folder. We didn't write them and we don't want them cluttering our app.
+.s-rule.do
+  :marked
+    **Do** start small but keep in mind where the app is heading down the road. 
 
-    - TODO EXAMPLE
+.s-rule.do
+  :marked
+    **Do** have a near term view of implementation and a long term vision. 
+
+.s-rule.do
+  :marked
+    **Do** put all of the app's code in a root folder named `app`. 
+
+.s-rule.consider
+  :marked
+    **Consider** creating a folder for each component including its `.ts`, `.html`, `.css` and `.spec` file. 
+
+.s-why
+  :marked
+    **Why?** Helps keep the app small and easy to maintain in the early stages, while being easy to evolve as the app grows.
+
+.s-why
+  :marked
+    **Why?** Components often have four files (e.g. `*.html`, `*.css`, `*.ts`, and `*.spec.ts`) and can clutter a folder quickly.
+
+.filetree
+  .file src
+  .children
+    .file app
+    .children
+      .file +heroes
+      .children
+        .file hero
+        .children
+          .file hero.component.ts|html|css|spec.ts
+          .file index.ts
+        .file hero-list
+        .children
+          .file hero-list.component.ts|html|css|spec.ts
+          .file index.ts
+        .file shared
+        .children
+          .file hero.model.ts
+          .file hero.service.ts|spec.ts
+          .file index.ts
+        .file heroes.component.ts|html|css|spec.ts
+        .file index.ts
+      .file shared
+      .children  
+        .file ...
+      .file app.component.ts|html|css|spec.ts
+      .file main.ts
+    .file index.html
+    .file ...
+:marked
+
+.l-sub-section
+  :marked
+    While we prefer our Components to be in their own dedicated folder, another option for small apps is to keep Components flat (not in a dedicated folder). This adds up to four files to the existing folder, but also reduces the folder nesting. Be consistent.
 
 a(href="#toc") Back to top
 
 .l-main-section
 :marked
-  ### Layout
-  <a id="04-51"></a>
-  #### Style 04-51
+  ### Shared Folder
+  <a id="04-07"></a>
+  #### Style 04-07
 
-    - Place components that define the overall layout of the application in a folder named `layout`. These may include a shell view and component may act as the container for the app, navigation, menus, content areas, and other regions.
+.s-rule.do
+  :marked
+    **Do** put all shared files within a component feature in a `shared` folder. 
 
-      **Why?** Organizes all layout in a single place re-used throughout the application.
+.s-rule.consider
+  :marked
+    **Consider** creating a folder for each component including its `.ts`, `.html`, `.css` and `.spec` file. 
+
+.s-why
+  :marked
+    **Why?** Separates shared files from the components within a feature.
+
+.s-why
+  :marked
+    **Why?** Makes it easier to locate shared files within a component feature.
+
+.filetree
+  .file src
+  .children
+    .file app
+    .children
+      .file +heroes
+      .children
+        .file hero
+        .children
+          .file ...
+        .file hero-list
+        .children
+          .file ...
+        .file shared
+        .children
+          .file hero-button
+          .children
+            .file ...
+          .file hero.model.ts
+          .file hero.service.ts|spec.ts
+          .file index.ts
+        .file heroes.component.ts|html|css|spec.ts
+        .file index.ts
+      .file shared
+      .children  
+        .file exception.service.ts|spec.ts
+        .file index.ts
+        .file nav
+        .children  
+          .file ...
+      .file app.component.ts|html|css|spec.ts
+      .file main.ts
+    .file index.html
+    .file ...
+:marked
 
 a(href="#toc") Back to top
 
 .l-main-section
 :marked
   ### Folders-by-Feature Structure
-  <a id="04-06"></a>
-  #### Style 04-06
+  <a id="04-08"></a>
+  #### Style 04-08
 
-    - Create folders named for the feature they represent. When a folder grows to contain more than 7 files, start to consider creating a folder for them. our threshold may be different, so adjust as needed.
+.s-rule.do
+  :marked
+    **Do** create folders named for the feature they represent. 
+    
+.s-why
+  :marked
+    **Why?** A developer can locate the code, identify what each file represents at a glance, the structure is flat as can be, and there is no repetitive nor redundant names.
 
-      **Why?** A developer can locate the code, identify what each file represents at a glance, the structure is flat as can be, and there is no repetitive nor redundant names.
+.s-why
+  :marked
+    **Why?** The LIFT guidelines are all covered.
 
-      **Why?** The LIFT guidelines are all covered.
+.s-why
+  :marked
+    **Why?** Helps reduce the app from becoming cluttered through organizing the content and keeping them aligned with the LIFT guidelines.
 
-      **Why?** Helps reduce the app from becoming cluttered through organizing the content and keeping them aligned with the LIFT guidelines.
+.s-why
+  :marked
+    **Why?** When there are a lot of files (e.g. 10+) locating them is easier with a consistent folder structures and more difficult in flat structures.
 
-      **Why?** When there are a lot of files (e.g. 10+) locating them is easier with a consistent folder structures and more difficult in flat structures.
-
-  Below is an example of a small app. This one is flatter, with fewer folders per component. 
-  
-  ```
-  src/
-    app/
-      +heroes/
-        shared/
-          hero.model.ts
-          hero.service.ts|spec.ts
-          sort-heroes.pipe.ts|spec.ts
-          index.ts
-        hero.component.ts|html|css|spec.ts
-        hero-list.component.ts|html|css|spec.ts
-        heroes.component.ts|html|css|spec.ts
-        index.ts
-      +villains/
-        shared/
-          sort-villains.pipe.ts|spec.ts
-          villain.model.ts
-          villain.service.ts|spec.ts
-          index.ts
-        villain.component.ts|html|css|spec.ts
-        villain-list.component.ts|html|css|spec.ts
-        villains.component.ts|html|css|spec.ts
-        index.ts
-      assets/
-      shared/  
-        config.ts
-        exception.service.ts|spec.ts
-        index.ts
-        init-caps.pipe.ts|spec.ts
-        nav.component.ts|html|css|spec.ts
-      app.component.ts|html|css|spec.ts
-      main.ts
-    index.html
-    tsconfig.json
-  ```
-  
+:marked
   Below is an example of a small app with folders per component. 
-  
-  ```
-  src/
-    app/
-      +heroes/
-        hero/
-          hero.component.ts|html|css|spec.ts
-          index.ts
-        hero-list/
-          hero-list.component.ts|html|css|spec.ts
-          index.ts
-        shared/
-          hero.model.ts
-          hero.service.ts|spec.ts
-          sort-heroes.pipe.ts|spec.ts
-          index.ts
-        heroes.component.ts|html|css|spec.ts
-        index.ts
-      +villains/
-        villain/
-          villain.component.ts|html|css|spec.ts
-          index.ts
-        villain-list/
-          villain-list.component.ts|html|css|spec.ts
-          index.ts
-        shared/
-          sort-villains.pipe.ts|spec.ts
-          villain.model.ts
-          villain.service.ts|spec.ts
-          index.ts
-        villains.component.ts|html|css|spec.ts
-        index.ts
-      assets/
-      shared/  
-        nav/
-          nav.component.ts|html|css|spec.ts
-          index.ts
-        config.ts
-        exception.service.ts|spec.ts
-        index.ts
-        init-caps.pipe.ts|spec.ts
-      app.component.ts|html|css|spec.ts
-      main.ts
-    index.html
-    tsconfig.json
-  ```
 
-  Below is an example of a medium app with folders per component. 
+.filetree
+  .file src
+  .children
+    .file app
+    .children
+      .file +heroes
+      .children
+        .file hero
+        .children
+          .file ...
+        .file hero-list
+        .children
+          .file ...
+        .file shared
+        .children
+          .file ...
+        .file heroes.component.ts|html|css|spec.ts
+        .file index.ts
+      .file +villains
+      .children
+        .file villain
+        .children
+          .file ...
+        .file villain-list
+        .children
+          .file ...
+        .file shared
+        .children
+          .file ...
+        .file villains.component.ts|html|css|spec.ts
+        .file index.ts
+      .file shared
+      .children  
+        .file nav
+        .children
+          .file ...
+        .file ...
+      .file app.component.ts|html|css|spec.ts
+      .file main.ts
+    .file index.html
+    .file ...
+:marked
 
-  ```
-  src/
-    app/
-      +dashboard/
-        shared/
-          dashboard-button/
-            dashboard-button.component.ts|html|css|spec.ts
-            index.ts
-          index.ts
-        dashboard.component.ts|html|css|spec.ts
-        index.ts
-      +heroes/
-        hero/
-          hero.component.ts|html|css|spec.ts
-          index.ts
-        hero-list/
-          hero-list.component.ts|html|css|spec.ts
-          index.ts
-        shared/
-          hero-button/
-            hero-button.component.ts|html|css|spec.ts
-            index.ts
-          hero.service.ts|spec.ts
-          sort-heroes.pipe.ts|spec.ts
-          index.ts
-        heroes.component.ts|html|css|spec.ts
-        index.ts
-      +villains/
-        villain/
-          villain.component.ts|html|css|spec.ts
-          index.ts
-        villain-list/
-          villain-list.component.ts|html|css|spec.ts
-          index.ts
-        shared/
-          villain-button/
-            villain-button.component.ts|html|css|spec.ts
-            index.ts
-          sort-villains.pipe.ts|spec.ts
-          villain.service.ts|spec.ts
-          index.ts
-        villains.component.ts|html|css|spec.ts
-        index.ts
-      assets/
-      shared/  
-        filter-text/
-          filter-text.component.ts|html|css|spec.ts
-          filter-text.service.ts|spec.ts
-          index.ts
-        modal/
-          modal.component.ts|html|css|spec.ts
-          modal.service.ts|spec.ts
-          index.ts
-        nav/
-          nav.component.ts|html|css|spec.ts
-          index.ts
-        spinner/
-          spinner.component.ts|html|css|spec.ts
-          spinner.service.ts|spec.ts
-          index.ts
-        toast/
-          toast.component.ts|html|css|spec.ts
-          toast.service.ts|spec.ts
-          index.ts
-        config.ts
-        data.service.ts|spec.ts
-        entity.service.ts|spec.ts
-        exception.service.ts|spec.ts
-        index.ts
-        init-caps.pipe.ts|spec.ts
-        message.service.ts|spec.ts
-        models.ts
-      app.component.ts|html|css|spec.ts
-      main.ts
-    index.html
-    tsconfig.json
-  ```
+a(href="#toc") Back to top
+
+.l-main-section
+:marked
+  ### Layout Components
+  <a id="04-09"></a>
+  #### Style 04-09
+
+.s-rule.do
+  :marked
+    **Do** put components that define the overall layout in a `shared` folder.
+
+.s-rule.do
+  :marked
+    **Do** put shared layout components in their own folder, under the `shared` folder. 
+
+.s-why
+  :marked
+    **Why?** We need a place to host our layout for our app. Our navigation bar, footer, and other aspects of the app that are needed for the entire app.  
+
+.s-why
+  :marked
+    **Why?** Organizes all layout in a consistent place re-used throughout the application.
+
+.filetree
+  .file src
+  .children
+    .file app
+    .children
+      .file +heroes
+      .children
+        .file ...
+      .file shared
+      .children  
+        .file nav
+        .children
+          .file index.ts
+          .file nav.component.ts|html|css|spec.ts
+        .file footer
+        .children
+          .file index.ts
+          .file footer.component.ts|html|css|spec.ts
+        .file index.ts
+        .file ...
+      .file app.component.ts|html|css|spec.ts
+      .file main.ts
+    .file index.html
+    .file ...
+:marked
+
+a(href="#toc") Back to top
+
+.l-main-section
+:marked
+  ### Create and Import Barrels
+  <a id="04-10"></a>
+  #### Style 04-10
+
+.s-rule.do
+  :marked
+    **Do** create a file that imports, aggregates, and re-exports items. We call this technique a **barrel**.
+
+.s-rule.do
+  :marked
+    **Do** name this barrel file `index.ts` 
+    
+.s-why
+  :marked
+    **Why?** A barrel aggregates many imports into a single import.
+
+.s-why
+  :marked
+    **Why?** A barrel reduces the number of imports a file may need.
+
+.s-why
+  :marked
+    **Why?** A barrel shortens import statements.
+
++makeTabs(
+  `style-guide/ts/04-10/app/shared/index.ts,
+  style-guide/ts/04-10/app/shared/filter-text/index.ts,
+  style-guide/ts/04-10/app/shared/modal/index.ts,
+  style-guide/ts/04-10/app/shared/nav/index.ts,
+  style-guide/ts/04-10/app/shared/spinner/index.ts,
+  style-guide/ts/04-10/app/shared/toast/index.ts`,
+  `example,,,,,`,
+  `app/heroes/shared/index.ts,
+  app/heroes/shared/filter-text/index.ts,
+  app/heroes/shared/modal/index.ts,
+  app/heroes/shared/nav/index.ts,
+  app/heroes/shared/spinner/index.ts,
+  app/heroes/shared/toast/index.ts`)
+:marked
+
+.filetree
+  .file src
+  .children
+    .file app
+    .children
+      .file +dashboard
+      .children
+        .file ...
+        .file index.ts
+      .file +heroes
+      .children
+        .file ...
+        .file index.ts
+      .file shared
+      .children
+        .file nav
+        .children
+          .file ...
+          .file index.ts
+        .file search
+        .children
+          .file ...
+          .file index.ts
+        .file ...
+        .file index.ts
+      .file app.component.ts|html|css|spec.ts
+      .file main.ts
+    .file index.html
+    .file ...
+:marked
+
++makeExample('style-guide/ts/04-10/app/+heroes/heroes.component.avoid.ts', 'example', 'app/+heroes/heroes.component.ts')(avoid=1)
+:marked
+
++makeExample('style-guide/ts/04-10/app/+heroes/heroes.component.ts', 'example', 'app/+heroes/heroes.component.ts')
+:marked
+
+a(href="#toc") Back to top
+
+.l-main-section
+:marked
+  ### Lazy Loaded Folders
+  <a id="04-11"></a>
+  #### Style 04-11
+  A distinct application feature or workflow may be *lazy loaded* or *loaded on demand* rather than when the application starts.
+
+.s-rule.do
+  :marked
+    **Do** put the contents of lazy loaded features in a *lazy loaded folder*. 
+    A typical *lazy loaded folder* contains a *routing component*, its child components, and their related assets and modules.
+
+.s-why
+  :marked
+    **Why?** The folder makes it easy to identify and isolate the feature content.
+
+a(href="#toc") Back to top
+
+.l-main-section
+:marked
+  ### Prefix Lazy Loaded Folders with +
+  <a id="04-12"></a>
+  #### Style 04-12
+
+.s-rule.do
+  :marked
+    **Do** prefix the name of a *lazy loaded folder* with a (+) e.g., `+dashboard/`.
+
+.s-why
+  :marked
+    **Why?** Lazy loaded code paths are easily identifiable by their `+` prefix.
+
+.s-why
+  :marked
+    **Why?** Lazy loaded code paths are easily distinguishable from non lazy loaded paths.
+
+.s-why
+  :marked
+    **Why?** If we see an `import` path that contains a `+`, we can quickly refactor to use lazy loading.
+
+.filetree
+  .file src
+  .children
+    .file app
+    .children
+      .file +dashboard
+      .children
+        .file dashboard.component.ts|html|css|spec.ts
+        .file index.ts
+:marked
+        
+a(href="#toc") Back to top
+
+.l-main-section
+:marked
+  ### Never Directly Import Lazy Loaded Folders
+  <a id="04-13"></a>
+  #### Style 04-13
+
+.s-rule.avoid
+  :marked
+    **Avoid** allowing modules in sibling and parent folders to directly import a module in a *lazy loaded feature*.
+
+.s-why
+  :marked
+    **Why?** Directly importing a module loads it immediately when our intention is to load it on demand.
+
++makeExample('style-guide/ts/04-13/app/app.component.avoid.ts', 'example', 'app/app.component.ts')(avoid=1)
+:marked
+
+a(href="#toc") Back to top
+
+.l-main-section
+:marked
+  ### Lazy Loaded Folders May Import From a Parent
+  <a id="04-14"></a>
+  #### Style 04-14
+
+.s-rule.do
+  :marked
+    **Do** allow lazy loaded modules to import a module from a parent folder.
+
+.s-why
+  :marked
+    **Why?** A parent module has already been loaded by the time the lazy loaded module imports it.
+
++makeExample('style-guide/ts/04-14/app/heroes/heroes.component.ts', 'example', 'app/heroes/heroes.component.ts')
+:marked
+
+
+a(href="#toc") Back to top
+
+.l-main-section
+:marked
+  ### Use Component Router to Lazy Load
+  <a id="04-15"></a>
+  #### Style 04-15
+
+.s-rule.do
+  :marked
+    **Do** use the Component Router to lazy load routable features.
+
+.s-why
+  :marked
+    **Why?** That's the easiest way to load a module on demand.
 
 a(href="#toc") Back to top
 
@@ -642,18 +1232,22 @@ a(href="#toc") Back to top
   <a id="05-02"></a>
   #### Style 05-02
 
-    - We use `kebab-case` for naming the element selectors of our components.
+.s-rule.do
+  :marked
+    **Do** use `kebab-case` for naming the element selectors of our components.
 
-    **Why?**: Keeps the element names consistent with the specification for [Custom Elements](https://www.w3.org/TR/custom-elements/).
+.s-why
+  :marked
+    **Why?** Keeps the element names consistent with the specification for [Custom Elements](https://www.w3.org/TR/custom-elements/).
 
-+makeExample('style-guide/ts/05-02/app/heroes/hero-button.component.avoid.ts', '', 'hero-button.component.ts')(avoid=1)
++makeExample('style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.avoid.ts', '', 'app/heroes/shared/hero-button/hero-button.component.ts')(avoid=1)
 :marked
 
 +makeTabs(
-  `style-guide/ts/05-02/app/heroes/hero-button.component.ts,
+  `style-guide/ts/05-02/app/heroes/shared/hero-button/hero-button.component.ts,
   style-guide/ts/05-02/app/app.component.html`,
   'example,',
-  `app/heroes/hero-button.component.ts, 
+  `app/heroes/shared/hero-button/hero-button.component.ts, 
   app/app.component.html`)
 :marked
 
@@ -665,25 +1259,33 @@ a(href="#toc") Back to top
   <a id="05-03"></a>
   #### Style 05-03
 
-    - Define Components as elements via the selector.
+.s-rule.do
+  :marked
+    **Do** define Components as elements via the selector.
 
-      **Why?**: Components have templates containing HTML and optional Angular template syntax. They are most associated with putting content on a page, and thus are more closely aligned with elements.
+.s-why
+  :marked
+    **Why?** Components have templates containing HTML and optional Angular template syntax. They are most associated with putting content on a page, and thus are more closely aligned with elements.
 
-      **Why?**: Components are derived from Directives, and thus their selectors can be elements, attributes, or other selectors. Defining the selector as an element provides consistency for components that represent content with a template.
-      
-      **Why?**: It is easier to recognize that a symbol is a component vs a directive by looking at the template's html.
+.s-why
+  :marked
+    **Why?** Components are derived from Directives, and thus their selectors can be elements, attributes, or other selectors. Defining the selector as an element provides consistency for components that represent content with a template.
 
-+makeExample('style-guide/ts/05-03/app/heroes/hero-button.component.avoid.ts', '', 'hero-button.component.ts')(avoid=1)
+.s-why
+  :marked
+    **Why?** It is easier to recognize that a symbol is a component vs a directive by looking at the template's html.
+
++makeExample('style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.ts', '', 'app/heroes/hero-button/hero-button.component.ts')(avoid=1)
 :marked
 
-+makeExample('style-guide/ts/05-03/app/heroes/hero-button.component.avoid.html', '', 'hero-button.component.html')(avoid=1)
++makeExample('style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.avoid.html', '', 'app/heroes/hero-button/hero-button.component.html')(avoid=1)
 :marked
 
 +makeTabs(
-  `style-guide/ts/05-03/app/heroes/hero-button.component.ts,
+  `style-guide/ts/05-03/app/heroes/shared/hero-button/hero-button.component.ts,
   style-guide/ts/05-03/app/app.component.html`,
   'example,',
-  `app/heroes/hero-button.component.ts, 
+  `app/heroes/shared/hero-button/hero-button.component.ts, 
   app/app.component.html`)
 :marked
 
@@ -695,17 +1297,27 @@ a(href="#toc") Back to top
   <a id="05-04"></a>
   #### Style 05-04
 
-    - Extract templates and styles into a separate file, when more than 3 lines.
+.s-rule.do
+  :marked
+    **Do** extract templates and styles into a separate file, when more than 3 lines.
 
-    - Name the template file `[component-name].component.html`, where [component-name] is our component name.
+.s-rule.do
+  :marked
+    **Do** name the template file `[component-name].component.html`, where [component-name] is our component name.
 
-    - Name the style file `[component-name].component.css`, where [component-name] is our component name.
+.s-rule.do
+  :marked
+    **Do** name the style file `[component-name].component.css`, where [component-name] is our component name.
 
-      **Why?**: Syntax hints for inline templates in (*.js and *.ts) code files are not supported by some editors.
+.s-why
+  :marked
+    **Why?** Syntax hints for inline templates in (*.js and *.ts) code files are not supported by some editors.
 
-      **Why?**: A component file's logic is easier to read when not mixed with inline template and styles.
+.s-why
+  :marked
+    **Why?** A component file's logic is easier to read when not mixed with inline template and styles.
 
-+makeExample('style-guide/ts/05-04/app/heroes/heroes.component.avoid.ts', '', 'heroes.component.ts')(avoid=1)
++makeExample('style-guide/ts/05-04/app/heroes/heroes.component.avoid.ts', '', 'app/heroes/heroes.component.ts')(avoid=1)
 :marked
 
 +makeTabs(
@@ -726,22 +1338,34 @@ a(href="#toc") Back to top
   <a id="05-12"></a>
   #### Style 05-12
 
-    - Use [`@Input`](https://angular.io/docs/ts/latest/api/core/Input-var.html) and [`@Output`](https://angular.io/docs/ts/latest/api/core/Output-var.html) instead of the `inputs` and `outputs` properties of the [`@Directive`](https://angular.io/docs/ts/latest/api/core/Directive-decorator.html) and [`@Component`](https://angular.io/docs/ts/latest/api/core/Component-decorator.html) decorators:
+.s-rule.do
+  :marked
+    **Do** use [`@Input`](https://angular.io/docs/ts/latest/api/core/Input-var.html) and [`@Output`](https://angular.io/docs/ts/latest/api/core/Output-var.html) instead of the `inputs` and `outputs` properties of the [`@Directive`](https://angular.io/docs/ts/latest/api/core/Directive-decorator.html) and [`@Component`](https://angular.io/docs/ts/latest/api/core/Component-decorator.html) decorators:
 
-    - Place the `@Input()` or `@Output()` on the same line as the property they decorate.
+.s-rule.do
+  :marked
+    **Do** place the `@Input()` or `@Output()` on the same line as the property they decorate.
 
-      **Why?**: It is easier and more readable to idnetify which properties in a class are inputs or outputs.
+.s-why
+  :marked
+    **Why?** It is easier and more readable to idnetify which properties in a class are inputs or outputs.
 
-      **Why?**: If we ever need to rename the name of the property, or event name associated to [`@Input`](https://angular.io/docs/ts/latest/api/core/Input-var.html) or respectively [`@Output`](https://angular.io/docs/ts/latest/api/core/Output-var.html) we can modify it on a single place.
+.s-why
+  :marked
+    **Why?** If we ever need to rename the name of the property, or event name associated to [`@Input`](https://angular.io/docs/ts/latest/api/core/Input-var.html) or respectively [`@Output`](https://angular.io/docs/ts/latest/api/core/Output-var.html) we can modify it on a single place.
 
-      **Why?**: The metadata declaration attached to the directive is shorter and thus more readable.
+.s-why
+  :marked
+    **Why?** The metadata declaration attached to the directive is shorter and thus more readable.
 
-      **Why?**: Placing the decorator on the same line makes for shorter code and still easily identifies the property as an input or output.
+.s-why
+  :marked
+    **Why?** Placing the decorator on the same line makes for shorter code and still easily identifies the property as an input or output.
 
-+makeExample('style-guide/ts/05-12/app/heroes/hero-button.component.avoid.ts', '', 'hero-button.component.ts')(avoid=1)
++makeExample('style-guide/ts/05-12/app/heroes/shared/hero-button/hero-button.component.avoid.ts', '', 'app/heroes/shared/hero-button/hero-button.component.ts')(avoid=1)
 :marked
 
-+makeExample('style-guide/ts/05-12/app/heroes/hero-button.component.ts', 'example', 'hero-button.component.ts')
++makeExample('style-guide/ts/05-12/app/heroes/shared/hero-button/hero-button.component.ts', 'example', 'app/heroes/shared/hero-button/hero-button.component.ts')
 :marked
 
 a(href="#toc") Back to top
@@ -752,21 +1376,25 @@ a(href="#toc") Back to top
   <a id="05-13"></a>
   #### Style 05-13
 
-    - Avoid renaming inputs and outputs, when possible.
+.s-rule.avoid
+  :marked
+    **Avoid** renaming inputs and outputs, when possible.
 
-      **Why?**: May lead to confusion when the output or the input properties of a given directive are named a given way but exported differently as a public API.
+.s-why
+  :marked
+    **Why?** May lead to confusion when the output or the input properties of a given directive are named a given way but exported differently as a public API.
 
-+makeExample('style-guide/ts/05-13/app/heroes/hero-button.component.avoid.ts', '', 'hero-button.component.ts')(avoid=1)
++makeExample('style-guide/ts/05-13/app/heroes/shared/hero-button/hero-button.component.avoid.ts', '', 'app/heroes/shared/hero-button/hero-button.component.ts')(avoid=1)
 :marked
 
 +makeExample('style-guide/ts/05-13/app/app.component.avoid.html', '', 'app.component.html')(avoid=1)
 :marked
 
 +makeTabs(
-  `style-guide/ts/05-13/app/heroes/hero-button.component.ts,
+  `style-guide/ts/05-13/app/heroes/shared/hero-button/hero-button.component.ts,
   style-guide/ts/05-13/app/app.component.html`,
   'example,',
-  `app/heroes/hero-button.component.ts, 
+  `app/heroes/shared/hero-button/hero-button.component.ts, 
   app/app.component.html`)
 :marked
 
@@ -778,16 +1406,22 @@ a(href="#toc") Back to top
   <a id="05-14"></a>
   #### Style 05-14
 
-    - Place properties up top followed by methods.
+.s-rule.do
+  :marked
+    **Do** place properties up top followed by methods.
 
-    - Private members follow public members, alphabetized.
+.s-rule.do
+  :marked
+    **Do** place private members after public members, alphabetized.
 
-      **Why?** Placing members in a consistent sequence makes it easy to read and helps we instantly identify which members of the component serve which purpose.
+.s-why
+  :marked
+    **Why?** Placing members in a consistent sequence makes it easy to read and helps we instantly identify which members of the component serve which purpose.
 
-+makeExample('style-guide/ts/05-14/app/toast/toast.component.avoid.ts', '', 'toast.component.ts')(avoid=1)
++makeExample('style-guide/ts/05-14/app/shared/toast/toast.component.avoid.ts', '', 'app/shared/toast/toast.component.ts')(avoid=1)
 :marked
 
-+makeExample('style-guide/ts/05-14/app/toast/toast.component.ts', 'example', 'toast.component.ts')
++makeExample('style-guide/ts/05-14/app/shared/toast/toast.component.ts', 'example', 'app/shared/toast/toast.component.ts')
 :marked
 
 a(href="#toc") Back to top
@@ -798,22 +1432,34 @@ a(href="#toc") Back to top
   <a id="05-15"></a>
   #### Style 05-15
 
-    - Defer logic in a component by delegating to services.
+.s-rule.do
+  :marked
+    **Do** defer logic in a component by delegating to services.
 
-    - Move reusable logic to services and keep components simple and focused on their intended purpose.
+.s-rule.do
+  :marked
+    **Do** move reusable logic to services and keep components simple and focused on their intended purpose.
 
-      **Why?** Logic may be reused by multiple components when placed within a service and exposed via a function.
+.s-why
+  :marked
+    **Why?** Logic may be reused by multiple components when placed within a service and exposed via a function.
 
-      **Why?** Logic in a service can more easily be isolated in a unit test, while the calling logic in the component can be easily mocked.
+.s-why
+  :marked
+    **Why?** Logic in a service can more easily be isolated in a unit test, while the calling logic in the component can be easily mocked.
 
-      **Why?** Removes dependencies and hides implementation details from the component.
+.s-why
+  :marked
+    **Why?** Removes dependencies and hides implementation details from the component.
 
-      **Why?** Keeps the component slim, trim, and focused.
+.s-why
+  :marked
+    **Why?** Keeps the component slim, trim, and focused.
 
-+makeExample('style-guide/ts/05-15/app/heroes/hero-list.component.avoid.ts', '', 'hero-list.component.ts')(avoid=1)
++makeExample('style-guide/ts/05-15/app/heroes/hero-list/hero-list.component.avoid.ts', '', 'app/heroes/hero-list/hero-list.component.ts')(avoid=1)
 :marked
 
-+makeExample('style-guide/ts/05-15/app/heroes/hero-list.component.ts', 'example', 'hero-list.component.ts')
++makeExample('style-guide/ts/05-15/app/heroes/hero-list/hero-list.component.ts', 'example', 'app/heroes/hero-list/hero-list.component.ts')
 :marked
 
 a(href="#toc") Back to top
@@ -824,18 +1470,26 @@ a(href="#toc") Back to top
   <a id="05-16"></a>
   #### Style 05-16
 
-    - Name events without the prefix `on`.
+.s-rule.do
+  :marked
+    **Do** name events without the prefix `on`.
 
-    - Name our event handler methods with the prefix `on` followed by the event name.
+.s-rule.do
+  :marked
+    **Do** name our event handler methods with the prefix `on` followed by the event name.
 
-      **Why?**: This is consistent with built-in events such as button clicks.
+.s-why
+  :marked
+    **Why?** This is consistent with built-in events such as button clicks.
 
-      **Why?**: Angular allows for an [alternative syntax](https://angular.io/docs/ts/latest/guide/template-syntax.html#!#binding-syntax) `on-*`. If the event itself was prefixed with `on` this would result in an `on-onEvent` binding expression.
+.s-why
+  :marked
+    **Why?** Angular allows for an [alternative syntax](https://angular.io/docs/ts/latest/guide/template-syntax.html#!#binding-syntax) `on-*`. If the event itself was prefixed with `on` this would result in an `on-onEvent` binding expression.
 
-+makeExample('style-guide/ts/05-16/app/heroes/hero.component.avoid.ts', '', 'hero.component.ts')(avoid=1)
++makeExample('style-guide/ts/05-16/app/heroes/hero.component.avoid.ts', '', 'app/heroes/hero.component.ts')(avoid=1)
 :marked
 
-+makeExample('style-guide/ts/05-16/app/app.component.avoid.html', '', 'app.component.html')(avoid=1)
++makeExample('style-guide/ts/05-16/app/app.component.avoid.html', '', 'app/app.component.html')(avoid=1)
 :marked
 
 +makeTabs(
@@ -854,16 +1508,22 @@ a(href="#toc") Back to top
   <a id="05-17"></a>
   #### Style 05-17
 
-    - Put presentation logic in the Component class, and not in the template.
+.s-rule.do
+  :marked
+    **Do** put presentation logic in the Component class, and not in the template.
 
-      **Why?**: Logic will be contained in one place (the Component class) instead of being spread in two places.
-      
-      **Why?**: Keeping the logic of the components in their controller, instead of template will improve testability, maintability, reusability.
+.s-why
+  :marked
+    **Why?** Logic will be contained in one place (the Component class) instead of being spread in two places.
 
-+makeExample('style-guide/ts/05-17/app/heroes/heroes-list.component.avoid.ts', '', 'heroes-list.component.ts')(avoid=1)
+.s-why
+  :marked
+    **Why?** Keeping the logic of the components in their controller, instead of template will improve testability, maintability, reusability.
+
++makeExample('style-guide/ts/05-17/app/heroes/hero-list/heroes-list.component.avoid.ts', '', 'app/heroes/hero-list/heroes-list.component.ts')(avoid=1)
 :marked
 
-+makeExample('style-guide/ts/05-17/app/heroes/heroes-list.component.ts', 'example', 'heroes-list.component.ts')
++makeExample('style-guide/ts/05-17/app/heroes/hero-list/heroes-list.component.ts', 'example', 'app/heroes/hero-list/heroes-list.component.ts')
 :marked
 
 a(href="#toc") Back to top
@@ -872,8 +1532,6 @@ a(href="#toc") Back to top
 :marked
   ## Directives
 
-    - TODO
-
 a(href="#toc") Back to top
 
 .l-main-section
@@ -882,37 +1540,23 @@ a(href="#toc") Back to top
   <a id="06-03"></a>
   #### Style 06-03
 
-    - Use @HostListener and @HostBinding instead of the host property of the @Directive and @Component decorators:
+.s-rule.do
+  :marked
+    **Do** use @HostListener and @HostBinding instead of the host property of the @Directive and @Component decorators:
 
-      **Why?**: The name of the property, or method name associated to @HostBinding or respectively @HostListener should be modified only in a single place - in the directive's controller. In contrast if we use host we need to modify both the property declaration inside the controller, and the metadata associated to the directive.
+.s-why
+  :marked
+    **Why?** The name of the property, or method name associated to @HostBinding or respectively @HostListener should be modified only in a single place - in the directive's controller. In contrast if we use host we need to modify both the property declaration inside the controller, and the metadata associated to the directive.
 
-      **Why?**: The metadata declaration attached to the directive is shorter and thus more readable.
+.s-why
+  :marked
+    **Why?** The metadata declaration attached to the directive is shorter and thus more readable.
 
-  ```
-  /* avoid */
-  @Directive({
-    selector: '[tohValidator]',
-    host: {
-      '(mouseenter)': 'onMouseEnter()',
-      'attr.role': 'button'
-    }
-  })
-  export class ValidatorDirective {
-    role = 'button';
-    onMouseEnter() {...}
-  }
-  ```
++makeExample('style-guide/ts/06-03/app/shared/validate.directive.ts', 'example', 'app/shared/validate.directive.ts')(avoid=1)
+:marked
 
-  ```
-  /* recommended */
-  @Directive({
-    selector: '[tohValidator]'
-  })
-  export class ValidatorDirective {
-    @HostBinding('attr.role') role = 'button';
-    @HostListener('mouseenter') onMouseEnter() {...}
-  }
-  ```
++makeExample('style-guide/ts/06-03/app/shared/validate.directive.ts', 'example', 'app/shared/validate.directive.ts')
+:marked
 
 a(href="#toc") Back to top
 
@@ -924,13 +1568,19 @@ a(href="#toc") Back to top
   <a id="07-01"></a>
   #### Style 07-01
 
-    - Services are singletons within the same injector. Use them for sharing data and functionality.
+.s-rule.do
+  :marked
+    **Do** use services as singletons within the same injector. Use them for sharing data and functionality.
     
-      **Why?:** Services are ideal for sharing methods across a feature area or an app.
+.s-why
+  :marked
+    **Why?** Services are ideal for sharing methods across a feature area or an app.
 
-      **Why?:** Services are ideal for sharing stateful in-memory data.
+.s-why
+  :marked
+    **Why?** Services are ideal for sharing stateful in-memory data.
 
-+makeExample('style-guide/ts/07-01/app/heroes/shared/hero.service.ts', 'example', 'hero.service.ts')
++makeExample('style-guide/ts/07-01/app/heroes/shared/hero.service.ts', 'example', 'app/heroes/shared/hero.service.ts')
 :marked
 
 a(href="#toc") Back to top
@@ -941,11 +1591,21 @@ a(href="#toc") Back to top
   <a id="07-02"></a>
   #### Style 07-02
 
-    - Services should have a single responsibility that is encapsulated by its context. Once a service begins to exceed that singular purpose, a new one should be created.
+.s-rule.do
+  :marked
+    **Do** create services with a single responsibility that is encapsulated by its context. 
     
-      **Why?:** When a service has multiple responsibilities, it becomes difficult to test.
+.s-rule.do
+  :marked
+    **Do** create a new service once the service begins to exceed that singular purpose.
+    
+.s-why
+  :marked
+    **Why?** When a service has multiple responsibilities, it becomes difficult to test.
 
-      **Why?:** When a service has multiple responsibilities, every Component or Service that injects it now carries the weight of them all.
+.s-why
+  :marked
+    **Why?** When a service has multiple responsibilities, every Component or Service that injects it now carries the weight of them all.
 
 a(href="#toc") Back to top
 
@@ -955,22 +1615,32 @@ a(href="#toc") Back to top
   <a id="07-03"></a>
   #### Style 07-03
 
-    - Services should be provided to the Angular 2 injector at the top-most component where they will be shared.
+.s-rule.do
+  :marked
+    **Do** provide services to the Angular 2 injector at the top-most component where they will be shared.
 
-      **Why?** The Angular 2 injector is hierarchical.
+.s-why
+  :marked
+    **Why?** The Angular 2 injector is hierarchical.
 
-      **Why?** When providing the service to a top level component, that instance is shared and available to all child components of that top level component.
+.s-why
+  :marked
+    **Why?** When providing the service to a top level component, that instance is shared and available to all child components of that top level component.
 
-      **Why?** This is ideal when a service is sharing methods and has no state, or state that must be shared.
+.s-why
+  :marked
+    **Why?** This is ideal when a service is sharing methods and has no state, or state that must be shared.
 
-      **Why?** This is not ideal when two different components need different instances of a service. In this scenario it would be better to provide the service at the component level that needs the new and separate instance.
+.s-why
+  :marked
+    **Why?** This is not ideal when two different components need different instances of a service. In this scenario it would be better to provide the service at the component level that needs the new and separate instance.
 
 +makeTabs(
   `style-guide/ts/07-03/app/app.component.ts,
-  style-guide/ts/07-03/app/heroes/hero-list.component.ts`,
+  style-guide/ts/07-03/app/heroes/hero-list/hero-list.component.ts`,
   '',
   `app/app.component.ts, 
-  app/heroes/hero-list.component.ts`)
+  app/heroes/hero-list/hero-list.component.ts`)
 :marked
 
 a(href="#toc") Back to top
@@ -981,16 +1651,22 @@ a(href="#toc") Back to top
   <a id="07-04"></a>
   #### Style 07-04
 
-    - Use the `@Injectable` class decorator instead of the `@Inject` parameter decorator when we are using types as tokens for the dependencies of a service.
+.s-rule.do
+  :marked
+    **Do** use the `@Injectable` class decorator instead of the `@Inject` parameter decorator when we are using types as tokens for the dependencies of a service.
 
-      **Why?**: The Angular DI mechanism resolves all the dependencies of our services based on their types declared with the services' constructors.
+.s-why
+  :marked
+    **Why?** The Angular DI mechanism resolves all the dependencies of our services based on their types declared with the services' constructors.
 
-      **Why?**: When a service accepts only dependencies associated with type tokens, the `@Injectable()` syntax is much less verbose compared to using `@Inject()` on each individual constructor parameter.
+.s-why
+  :marked
+    **Why?** When a service accepts only dependencies associated with type tokens, the `@Injectable()` syntax is much less verbose compared to using `@Inject()` on each individual constructor parameter.
 
-+makeExample('style-guide/ts/07-04/app/heroes/hero-arena.service.avoid.ts', '', 'hero-arena.service.ts')(avoid=1)
++makeExample('style-guide/ts/07-04/app/heroes/shared/hero-arena.service.avoid.ts', '', 'app/heroes/shared/hero-arena.service.ts')(avoid=1)
 :marked
 
-+makeExample('style-guide/ts/07-04/app/heroes/hero-arena.service.ts', 'example', 'hero-arena.service.ts')
++makeExample('style-guide/ts/07-04/app/heroes/shared/hero-arena.service.ts', 'example', 'app/heroes/shared/hero-arena.service.ts')
 :marked
 
 a(href="#toc") Back to top
@@ -1003,13 +1679,25 @@ a(href="#toc") Back to top
   <a id="08-01"></a>
   #### Style 08-01
 
-    - Refactor logic for making data operations and interacting with data to a service. Make data services responsible for XHR calls, local storage, stashing in memory, or any other data operations.
+.s-rule.do
+  :marked
+    **Do** refactor logic for making data operations and interacting with data to a service. 
+    
+.s-rule.do
+  :marked
+    **Do** make data services responsible for XHR calls, local storage, stashing in memory, or any other data operations.
 
-      **Why?** The component's responsibility is for the presentation and gathering of information for the view. It should not care how it gets the data, just that it knows who to ask for it. Separating the data services moves the logic on how to get it to the data service, and lets the component be simpler and more focused on the view.
+.s-why
+  :marked
+    **Why?** The component's responsibility is for the presentation and gathering of information for the view. It should not care how it gets the data, just that it knows who to ask for it. Separating the data services moves the logic on how to get it to the data service, and lets the component be simpler and more focused on the view.
 
-      **Why?** This makes it easier to test (mock or real) the data calls when testing a component that uses a data service.
+.s-why
+  :marked
+    **Why?** This makes it easier to test (mock or real) the data calls when testing a component that uses a data service.
 
-      **Why?** Data service implementation may have very specific code to handle the data repository. This may include headers, how to talk to the data, or other services such as `Http`. Separating the logic into a data service encapsulates this logic in a single place hiding the implementation from the outside consumers (perhaps a component), also making it easier to change the implementation.
+.s-why
+  :marked
+    **Why?** Data service implementation may have very specific code to handle the data repository. This may include headers, how to talk to the data, or other services such as `Http`. Separating the logic into a data service encapsulates this logic in a single place hiding the implementation from the outside consumers (perhaps a component), also making it easier to change the implementation.
 
 a(href="#toc") Back to top
 
@@ -1027,14 +1715,18 @@ a(href="#toc") Back to top
   <a id="09-01"></a>
   #### Style 09-01
 
-    - Implement the lifecycle hook interfaces.
+.s-rule.do
+  :marked
+    **Do** implement the lifecycle hook interfaces.
 
-      **Why?**: We will avoid unintentionally not calling the hook if we misspell the method.
+.s-why
+  :marked
+    **Why?** We will avoid unintentionally not calling the hook if we misspell the method.
 
-+makeExample('style-guide/ts/09-01/app/hero-button.component.avoid.ts', '', 'hero-button.component.ts')(avoid=1)
++makeExample('style-guide/ts/09-01/app/heroes/shared/hero-button/hero-button.component.avoid.ts', '', 'app/heroes/shared/hero-button/hero-button.component.ts')(avoid=1)
 :marked
 
-+makeExample('style-guide/ts/09-01/app/hero-button.component.ts', 'example', 'hero-button.component.ts')
++makeExample('style-guide/ts/09-01/app/heroes/shared/hero-button/hero-button.component.ts', 'example', 'app/heroes/shared/hero-button/hero-button.component.ts')
 :marked
 
 a(href="#toc") Back to top
@@ -1053,19 +1745,35 @@ a(href="#toc") Back to top
   <a id="10-01"></a>
   #### Style 10-01
 
-    - Separate route configuration into a routing component file, also known as a component router.
+.s-rule.do
+  :marked
+    **Do** separate route configuration into a routing component file, also known as a component router.
 
-    - Use a `<router-outlet>` in the component router, where the routes will have their component targets display their templates.
+.s-rule.do
+  :marked
+    **Do** use a `<router-outlet>` in the component router, where the routes will have their component targets display their templates.
 
-    - Focus the logic in the component router to the routing aspects and its target components. Extract other logic to services and other components.
+.s-rule.do
+  :marked
+    **Do** focus the logic in the component router to the routing aspects and its target components. 
 
-      **Why?** A component that handles routing is known as the component router, thus this follows the Angular 2 routing pattern.
+.s-rule.do
+  :marked
+    **Do** extract other logic to services and other components.
 
-      **Why?** A component that handles routing is known as the componenter router.
+.s-why
+  :marked
+    **Why?** A component that handles routing is known as the component router, thus this follows the Angular 2 routing pattern.
 
-      **Why?** The `<router-outlet>` indicates where the tempalte should be displayed for the target route.
+.s-why
+  :marked
+    **Why?** A component that handles routing is known as the componenter router.
 
-+makeExample('style-guide/ts/10-01/app/app.component.ts', '', 'app.component.ts')
+.s-why
+  :marked
+    **Why?** The `<router-outlet>` indicates where the template should be displayed for the target route.
+
++makeExample('style-guide/ts/10-01/app/app.component.ts', '', 'app/app.component.ts')
 :marked
 
 a(href="#toc") Back to top
@@ -1079,10 +1787,10 @@ a(href="#toc") Back to top
 
   ### Visual Studio Code
 
-    - [Visual Studio Code](https://code.visualstudio.com/) snippets that follow these styles and guidelines.
+  [Visual Studio Code](https://code.visualstudio.com/) snippets that follow these styles and guidelines.
 
-      - [Snippets for VS Code](https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2)
+  [Snippets for VS Code](https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2)
 
-      [![Use Extension](https://github.com/johnpapa/vscode-angular2-snippets/raw/master/images/use-extension.gif)](https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2)
+    [![Use Extension](https://github.com/johnpapa/vscode-angular2-snippets/raw/master/images/use-extension.gif)](https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2)
 
 a(href="#toc") Back to top
diff --git a/public/resources/css/module/_style-guide.scss b/public/resources/css/module/_style-guide.scss
index e937bbb6b8..843875b185 100644
--- a/public/resources/css/module/_style-guide.scss
+++ b/public/resources/css/module/_style-guide.scss
@@ -1,11 +1,42 @@
 .s-rule {
   margin-left: 12px;
-  font-style: italic;
+  padding: 0 16px;
+  font-size: 14px;
+  box-shadow: none;
+  margin-bottom: -5px;
+  z-index: 1;
+  position: relative;
+  border-radius: 0;
+  border-left-width: 4px;
+  border-left-style: solid;
+}
 
-  background: #ECEFF1;
-  padding: 0  0 0 8px;
+.s-rule.do {
+  border-left-color: #1976D2;
+}
+
+.s-rule.consider {
+  border-left-color: rgba(35, 115, 23, 0.64);
+}
+
+.s-rule.avoid {
+  border-left-color: #E0343D;
 }
 
 .s-why {
-  margin-left: 20px;
+  margin-left: 12px;
+  padding: 0 16px;
+  font-size: 14px;
+  box-shadow: none;
+  margin-bottom: -5px;
+  z-index: 1;
+  position: relative;
+  border-radius: 0;
+  border-left-width: 4px;
+  border-left-style: solid;
+  border-left-color: #EEE;
+}
+
+.filetree {
+  margin: 32px 0;
 }