docs: update getting started for alpha.9 (#1338)

Author: jelbourn

CHANGELOG.md

@@ -9,6 +9,9 @@ Angular Material has changed from `@angular2-material/...` packages to a single
 contains all of the components. Build tools such as [`rollup.js`](http://rollupjs.org/) can perform
 tree-shaking to eliminate the code for components that you aren't using.
 
+The addition of theming as also changed the directory structure for bringing the core css into your
+application. See the new [theming guide](docs/theming.md) for more information.
+
 
 ### Features
 

GETTING_STARTED.md

@@ -14,54 +14,37 @@ Get started with Angular Material 2 using the Angular CLI.
 
 The new command creates a project with a build system for your Angular app.
 
-## Install Angular Material 2 components 
-
-Angular Material 2 components are set up in separate modules. This allows you to only pull into your app what you need, reducing the size of your app. Components are installed individually. You can see our [list of published packages here](https://www.npmjs.com/~angular2-material).
-
-Note that only packages published under the `@latest` npm tag are officially released.
+## Install Angular Material components 
 
 ```bash
-npm install --save @angular2-material/core @angular2-material/button @angular2-material/card
+npm install --save @angular/material
 ```
 
-> The core module is required as a peer dependency of other components
-
-## Add components to your app module
-Now you should be able to import the components normally wherever you'd like to use them. Import the components in your application module:
+## Import the Angular Material NgModule
 
 **src/app/app.module.ts**
 ```ts
-import { MdButtonModule } from '@angular2-material/button';
-import { MdCardModule } from '@angular2-material/card';
+import { MaterialModule } from '@angular/material';
 // other imports 
 @NgModule({
-  imports: [MdButtonModule.forRoot(), MdCardModule.forRoot()],
+  imports: [MaterialModule.forRoot()],
   ...
 })
+export class PizzaPartyAppModule { }
 ```
 
-### Sample Angular Material 2 project
-- [Material 2 Sample App](https://github.com/jelbourn/material2-app)
-
+### Including core and theme styles:
+See the [theming guide](docs/theming.md) for more information.
 
-### Additional setup for `md-menu` and `md-tooltip`:
-For alpha.7, you need to include the overlay styles in your app via a `link` element. This will
-look something like
-```html
-<link href="vendor/@angular2-material/core/overlay/overlay.css" rel="stylesheet">
-```
-
-In future releases, all of the core styles will be combined into a single distributed css file.
 
 ### Additional setup for `md-slide-toggle` and `md-slider`:
 The slide-toggle and slider components have a dependency on [HammerJS](http://hammerjs.github.io/).
-1) Add HammerJS to your application via [npm](https://www.npmjs.com/package/hammerjs), a CDN 
-   (such as the [Google CDN](https://developers.google.com/speed/libraries/#hammerjs)), 
-   or served directly from your app.
-2) Include the typings for HammerJS in your typescript build ([more info on @types](https://blogs.msdn.microsoft.com/typescript/2016/06/15/the-future-of-declaration-files))
 
+Add HammerJS to your application via [npm](https://www.npmjs.com/package/hammerjs), a CDN 
+(such as the [Google CDN](https://developers.google.com/speed/libraries/#hammerjs)), or served 
+directly from your app.
 
-### Additional setup for `md-icon`:
+### [Optional] Using Material Design icons with `md-icon`:
 
 - If you want to use Material Design icons, load the Material Design font in your `index.html`.  
 `md-icon` supports any font icons or svg icons, so this is only one potential option.
@@ -70,3 +53,7 @@ The slide-toggle and slider components have a dependency on [HammerJS](http://ha
 ```html
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 ```
+
+### Sample Angular Material 2 projects
+- [Material 2 Sample App](https://github.com/jelbourn/material2-app)
+- [Angular Connect 2016 Demo](https://github.com/kara/leashed-in)

docs/theming.md

@@ -24,17 +24,17 @@ include all of the styles for core (styles common to all components), so you onl
 single css file for Angular Material in your app. 
 
 You can include a theme file directly into your application from 
-`@angular2-material/core/theming/prebuilt`
+`@angular/material/core/theming/prebuilt`
 
 If you're using Angular CLI, this is as simple as including one line
 in your `style.css`  file:
 ```css
-@import '~@angular2-material/core/theming/prebuilt/deeppurple-amber.css';
+@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';
 ```
 
 Alternatively, you can just reference the file directly. This would look something like
 ```html
-<link href="node_modules/@angular2-material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
+<link href="node_modules/@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
 ``` 
 The actual path will depend on your server setup. 
 
@@ -46,10 +46,7 @@ When you want more customization than a pre-built theme offers, you can create y
 A theme file is a simple Sass file that defines your palettes and passes them to mixins that output
 the corresponding styles. A typical theme file will look something like this:
 ```scss
-@import '~@angular2-material/core/theming/theming';
-@import '~@angular2-material/core/theming/palette';
-@import '~@angular2-material/core/core';
-@import '~@angular2-material/button/button-theme';
+@import '~@angular/material/core/theming/all-theme';
 // Plus imports for other components in your app.
 
 // Include the base styles for Angular Material core. We include this here so that you only
@@ -61,15 +58,17 @@ the corresponding styles. A typical theme file will look something like this:
 // hue.
 $primary: md-palette($md-indigo);
 $accent:  md-palette($md-pink, A200, A100, A400);
+
+// The warn palette is optional (defaults to red).
 $warn:    md-palette($md-red);
 
 // Create the theme object (a Sass map containing all of the palettes).
 $theme: md-light-theme($primary, $accent, $warn);
 
 // Include theme styles for core and each component used in your app.
-@include md-core-theme($theme);
-@include md-button-theme($theme);
-// Plus includes for other components in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@include angular-material-theme($theme);
 ```
 
 You only need this single Sass file; you do not need to use Sass to style the rest of your app.
@@ -99,8 +98,7 @@ secondary dark theme:
 
   $dark-theme: md-dark-theme($dark-primary, $dark-accent, $dark-warn);
 
-  @include md-core-theme($dark-theme);
-  @include md-button-theme($dark-theme);    
+@include angular-material-theme($dark-theme);   
 }
 ```
 
@@ -111,7 +109,7 @@ dark theme.
 In order to style your own components with our tooling, the component's styles must be defined 
 with Sass. 
 
-You can consume the theming functions and variables from the `@angular2-material/core/theming`.
+You can consume the theming functions and variables from the `@angular/material/core/theming`.
 You can use the `md-color` function to extract a specific color from a palette. For example:
 ```scss
 .unicorn-carousel {
@@ -121,7 +119,5 @@ You can use the `md-color` function to extract a specific color from a palette.
 ```
 
 ### Future work
-* When the "all" package is released, there will be a mixin that captures all of the component's
-  theme styles so that you don't have to include them all individually.
 * Once CSS variables (custom properties) are available in all the browsers we support,
   we will explore how to take advantage of them to make theming even simpler.