first pass at layout

angular-cli.json

@@ -7,7 +7,7 @@
     {
       "root": "src",
       "outDir": "dist",
-      "assets": "assets",
+      "assets": ["assets", "node_modules"],
       "index": "index.html",
       "main": "main.ts",
       "test": "test.ts",

package.json

@@ -17,6 +17,7 @@
     "@angular/core": "2.0.0",
     "@angular/forms": "2.0.0",
     "@angular/http": "2.0.0",
+    "@angular/material": "^2.0.0-alpha.9-3",
     "@angular/platform-browser": "2.0.0",
     "@angular/platform-browser-dynamic": "2.0.0",
     "@angular/router": "3.0.0",

src/app/app.component.css

@@ -0,0 +1,7 @@
+.app-toolbar-filler {
+  flex: 1 1 auto;
+}
+
+md-card {
+  margin: 20px;
+}

src/app/app.component.html

@@ -1,3 +1,26 @@
-<h1>
-  {{title}}
-</h1>
+<md-sidenav-layout>
+  <md-toolbar color="primary">
+    Angular 2 named routes
+
+    <span class="app-toolbar-filler"></span>
+    <button md-button>TOGGLE DARK THEME</button>
+  </md-toolbar>
+
+  <div class="app-content">
+
+    <md-card>
+      <button md-button>FLAT</button>
+      <button md-raised-button md-tooltip="This is a tooltip!">RAISED</button>
+      <button md-raised-button color="primary">PRIMARY RAISED</button>
+      <button md-raised-button color="accent">ACCENT RAISED</button>
+    </md-card>
+
+    <md-card>
+      <md-checkbox>Unchecked</md-checkbox>
+      <md-checkbox [checked]="true">Checked</md-checkbox>
+      <md-checkbox [indeterminate]="true">Indeterminate</md-checkbox>
+      <md-checkbox [disabled]="true">Disabled</md-checkbox>
+    </md-card>
+
+  </div>
+</md-sidenav-layout>

src/app/app.module.ts

@@ -2,6 +2,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
+import { MaterialModule } from '@angular/material';
 
 import { AppComponent } from './app.component';
 
@@ -12,7 +13,8 @@ import { AppComponent } from './app.component';
   imports: [
     BrowserModule,
     FormsModule,
-    HttpModule
+    HttpModule,
+    MaterialModule.forRoot()
   ],
   providers: [],
   bootstrap: [AppComponent]

src/styles.css

@@ -1 +1,6 @@
-/* You can add global styles to this file, and also import other style files */
+/* You can add global styles to this file, and also import other style files */
+@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';
+
+body {
+  margin: 0;
+}