Merge branch 'release/v1.0.0-rc.0'

.angular-cli.json

@@ -23,12 +23,10 @@
       "prefix": "app",
       "styles": [
         "styles.scss",
-        "theme.scss",
-        "platform/core/common/platform.scss"
+        "theme.scss"
       ],
       "scripts": [
-        "../node_modules/hammerjs/hammer.min.js",
-        "../node_modules/showdown/dist/showdown.js"
+        "../node_modules/hammerjs/hammer.min.js"
       ],
       "environmentSource": "environments/environment.ts",
       "environments": {

.github/ISSUE_TEMPLATE.md

@@ -12,8 +12,9 @@ https://gitter.im/Teradata/covalent
 #### Bug Report
 <!--
 please provide steps to reproduce and if possible screenhots, animated Gifs and/or a Plunker (or similar).
-you can easily create animated Gif with this free PC/OSX App: http://www.cockos.com/licecap/ and a Plunker to help us reproduce it
+you can easily create animated Gif with this free PC/OSX App: http://www.cockos.com/licecap/ and a StackBlitz or Plunker to help us reproduce it
 -->
+StackBlitz template: https://stackblitz.com/edit/covalent
 Plunker template: http://plnkr.co/edit/7uZQn4mLNJkL6XN9WSNd
 
 ##### Screenshots or link to CodePen/Plunker/JSfiddle

.github/PULL_REQUEST_TEMPLATE.md

@@ -20,4 +20,4 @@
 - [ ] `npm test` passes and code coverage is not lower.
 - [ ] `npm run build` still works.
 
-##### Screenshots or link to CodePen/Plunker/JSfiddle
+##### Screenshots or link to StackBlitz/Plunker

README.md

@@ -31,7 +31,8 @@ Covalent is a reusable UI platform from Teradata for building web applications w
 * [Upgrading](docs/UPGRADE.md)
 * [Releasing](docs/RELEASE.md)
 * [Changelog](docs/CHANGELOG.md)
-* [Quickstart Repo](https://github.com/teradata/covalent-quickstart)
+* [Quickstart](docs/QUICKSTART.md)
+* [StackBlitz Template](https://stackblitz.com/edit/covalent)
 * [Plunker Template](http://plnkr.co/edit/7uZQn4mLNJkL6XN9WSNd)
 * [Nightly Build Plunker Template](http://plnkr.co/edit/XhSrUWBw2RhCkXPoE4fn)
 * [Covalent Electron](https://github.com/Teradata/covalent-electron)

docs/GETTING_STARTED.md

@@ -6,15 +6,15 @@ See the  [material getting started](https://github.com/angular/material2/blob/ma
 
 ## Install the CLI
 
- ```bash
- npm install -g @angular/cli@latest
- ```
+```bash
+npm install -g @angular/cli@latest
+```
 
 ## Create a new project
 
- ```bash
- ng new my-project
- ```
+```bash
+ng new my-project
+```
 
 The new command creates a project with a build system for your Angular app.
 
@@ -26,7 +26,7 @@ npm install --save @covalent/core
 npm install --save @covalent/http @covalent/highlight @covalent/markdown @covalent/dynamic-forms 
 ```
 
-Playing with the latest changes from develop is also possible (for now, only the `core` module has a nightly build)
+To test (__only for testing!__) the latest changes from develop, install the nightly build: **(only the core module has a nightly build)**
 
 ```bash
 npm install --save https://github.com/Teradata/covalent-nightly.git
@@ -58,10 +58,10 @@ import { CovalentDynamicFormsModule } from '@covalent/dynamic-forms';
 export class AppModule { }
 ```
 
-## Include the core and theme styles:
-This is **required** to apply all of the core and theme styles to your application. 
+## Include the core, theme and typography:
+This is **required** to apply all of the core, theme and typography styles to your application. 
 
-See the [material theming guide](https://github.com/angular/material2/blob/master/guides/theming.md) for instructions.
+See the [material theming guide](https://github.com/angular/material2/blob/master/guides/theming.md) and the [material typography guide](https://github.com/angular/material2/blob/master/guides/typography.md) for instructions.
 
 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:
 
@@ -71,19 +71,26 @@ A theme file is a simple Sass file that defines your palettes and passes them to
 
 // (optional) Additional themes
 @import '~@covalent/markdown/markdown-theme';
-@import '~@covalent/highlight/highlight-theme';\
+@import '~@covalent/highlight/highlight-theme';
+
+// Define a custom typography config that overrides the font-family
+// or any typography level.
+$typography: mat-typography-config(
+  $font-family: 'Roboto, monospace',
+  $headline: mat-typography-level(32px, 48px, 700)
+);
 
-@include mat-core();
+@include mat-core($typography); // $typography is an **optional** argument for the mat-core
 
-$primary: mat-palette($mat-orange, 800);
-$accent:  mat-palette($mat-light-blue, 600, A100, A400);
+$primary: mat-palette($mat-orange, 800, 100, 900);
+$accent:  mat-palette($mat-light-blue, 600, 100, 900);
 
-$warn:    mat-palette($mat-red, 600);
+$warn:    mat-palette($mat-red, 600, 100, 900);
 
 $theme: mat-light-theme($primary, $accent, $warn);
 
 @include angular-material-theme($theme);
-@include covalent-theme($theme);
+@include covalent-theme($theme, $typography); // $typography is an **optional** argument for the covalent-theme
 
 // (optional) Additional themes
 @include covalent-markdown-theme($theme);
@@ -94,10 +101,13 @@ You only need this single Sass file; you do not need to use Sass to style the re
 
 If you are using the Angular CLI, support for compiling Sass to css is built-in but you have to add a new entry to the "styles" list in .angular-cli.json pointing to the theme file and the platform.css as follows:
 
-### Using platform.css:
+## Covalent Utility Classes
+
+This is an **optional** set of CSS classes that will help to speed up development and standardize  your application. 
 
-- The core covalent styles need to be included either in your `index.html` or as a new entry to the "styles" list in .angular-cli.json
-load the Material Design font in your `index.html`.  
+### Add via platform.css
+
+The covalent utility CSS classes can be included via `platform.css` file either in your `index.html` or as a new entry to the "styles" list in .angular-cli.json 
 
 **src/index.html**
 ```html
@@ -112,6 +122,15 @@ or
   "../node_modules/@covalent/core/common/platform.scss"
 ],
 ```
+
+This also includes the `material icons` by default.
+
+#### Not interested in using ALL the CSS?
+
+Click [here](https://teradata.github.io/covalent/#/docs/utility-sass-mixins) if you want to cherry pick the utility classes instead of loading the `platform.css`
+
+----
+
 ### Other build tools
 
 If you're not using the Angular CLI, you can use any existing Sass tooling to build the file (such as gulp-sass or grunt-sass). The simplest approach is to use the node-sass CLI; you simply run:

docs/IE11.md

@@ -104,7 +104,7 @@ For example, `<component-name>` needs a flex wrapper inside a `layout="row"`
 
 ### Some HTML elements can't be flex containers
 
-For example, don't use `layout="row"` on `<button md-button>`
+For example, don't use `layout="row"` on `<button mat-button>`
 
 ref: https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers
 

docs/QUICKSTART.md

@@ -0,0 +1,86 @@
+# Quickstart Repo
+
+Start using the Covalent Quickstart
+
+Create a new repo based on the covalent-quickstart
+
+Clone the [covalent-quickstart](https://github.com/Teradata/covalent-quickstart) into a new project folder (e.g. my-product)
+
+## Clone the repo
+
+```bash
+git clone https://github.com/Teradata/covalent-quickstart.git my-product
+cd my-product
+```
+
+Remove the git directory to start clean
+
+```bash
+rm -rf .git
+```
+
+## Create a new Git repository for your product
+
+You could start writing code now and throw it all away when you're done. If you'd rather preserve your work under source control, consider taking the following steps.
+
+Initialize this project as a local git repo and make the first commit:
+
+```bash
+git init
+git add .
+git commit -m "Initial commit"
+```
+
+Create a remote repository for this project on the service of your choice.
+
+```bash
+git remote add origin
+git push -u origin master
+```
+
+## Start Developing!
+
+Prerequisites
+
+- Node 6.11.1+
+- NPM 3+
+- Angular CLI
+- Protractor (for testing)
+- TSLint (for code style)
+
+If you don't have the Angular CLI, install:
+
+```bash
+npm i -g @angular/cli@latest
+```
+
+Install Typescript:
+
+```bash
+npm install -g typescript
+```
+
+To install Protractor & TSLint for testing:
+
+```bash
+npm install -g protractor
+npm install -g tslint
+```
+
+Then update the webdriver manager:
+
+```bash
+webdriver-manager update
+```
+
+Install Node packages:
+
+```bash
+npm i
+```
+
+Run the Angular-CLI local server:
+
+```bash
+ng serve
+```

docs/UTILITY_MIXINS.md

@@ -0,0 +1,94 @@
+## Utility SASS Mixins
+
+You can cherry pick the `utility` classes that fit your needs with our `scss` mixins instead of including everything with the `platform.css`.
+
+After adding the `all-theme.scss`, the mixins will be available for usage:
+
+```css
+@import '~@covalent/core/theming/all-theme';
+```
+
+### Core Styles Mixin
+
+Covalent includes out of the box some styles to make your application look better, this can be used by adding the following:
+
+```css
+// Include the core styles for Covalent
+@include covalent-core();
+```
+
+We also bundle the material icons
+
+```css
+// Include pre-bundled material-icons
+$mat-font-url: '../node_modules/@covalent/core/common/styles/font/';
+@include covalent-material-icons();
+// Alternative way to include material-icons
+// @import '../node_modules/@covalent/core/common/material-icons.css';
+```
+
+### Covalent Utilities Mixin
+
+To include [utility classes](https://teradata.github.io/covalent/#/style-guide/utility-styles), add the following:
+
+```css
+// Include covalent utility classes
+@include covalent-utilities();
+```
+
+### Flex Layout Mixin
+
+To include [flex layout v1](https://teradata.github.io/covalent/#/layouts), add the following:
+
+```css
+// Include flex layout classes
+@include covalent-layout();
+```
+
+### Colors Mixin
+
+To include the [color classes](https://teradata.github.io/covalent/#/style-guide/colors), add the following:
+
+```css
+// Include covalent color classes
+@include covalent-colors();
+```
+
+### Typography Mixin
+
+To include the [typography classes](https://teradata.github.io/covalent/#/style-guide/typography), add the following:
+
+```css
+// Include covalent typography classes
+@include covalent-typography();
+```
+
+### Example including every single mixin
+
+If you want to include everything, include the following snippet (or just include the `platform.css` as described in the [getting started](http://localhost:4200/#/docs) docs)
+
+```css
+@import '~@covalent/core/theming/all-theme';
+
+// Include the core styles for Covalent
+@include covalent-core();
+
+// Include pre-bundled material-icons
+$mat-font-url: '../node_modules/@covalent/core/common/styles/font/';
+@include covalent-material-icons();
+// Alternative way to include material-icons
+// @import '../node_modules/@covalent/core/common/material-icons.css';
+
+// Include covalent utility classes
+@include covalent-utilities();
+
+// Include flex layout classes
+@include covalent-layout();
+
+// Include covalent typography classes
+@include covalent-typography();
+
+// Include covalent color classes
+@include covalent-colors();
+```
+