docs: add documentation for theme usage

README.md

@@ -8,24 +8,20 @@ A SCSS-based theme for Kendo UI components. Currently available for **Kendo UI f
 
 ## Usage
 
-### As a pre-built theme
+### With Kendo UI for Angular 2 / React
 
-This approach is recommended for a simple setup.
-
-Clone the repo and build it via `npm run build`. The file `dist/all.css` will contain the complete theme, which can be used in your project.
-
-### Via webpack
-
-For a runnable example of how to load the theme, see the [angular dashboard demo application](https://github.com/telerik/ng2-dashboard).
+See [`docs/index.md`](docs/index.md) for more information.
 
 ### With Kendo UI jQuery
 
-Use with the jQuery widgets is **currently not supported**, as this theme is focused on the React / Angular 2 offering, and requires changes in order to work with the jQuery widgets.
+Use with the jQuery widgets is **currently not supported**, but is planned for future versions of the theme.
 
 ## Customization
 
 The theme can be customized in one swoop via the colors defined in the [`styles/_variables.scss` file](styles/_variables.scss). Any change in this file is propagated to every component. To style specific components, use the variables used in their specific scss file.
 
+The theme can be built via `npm run build`. The file `dist/all.css` will contain the complete theme, which can be used in your project.
+
 ## Development
 
 Styles are split into components, and dependencies are managed by the [`import-once` mixin](styles/mixins/_import-once.scss). Styles must be defined within an `import-once` block, so that they are bundled once when required from multiple files.

docs/_meta.yml

@@ -0,0 +1,2 @@
+title: Themes & Styling
+position: 999

docs/index.md

@@ -0,0 +1,105 @@
+---
+title: Overview
+description: "Use themes to style your project with Kendo UI for Angular 2."
+---
+
+# Themes & Styling
+
+Kendo UI for Angular 2 provides two main options to include the Kendo UI theme in your project. You can either use a precompiled theme that styles all components or load the theme source files through Webpack to modify and customize its styles.
+
+## Install Themes
+
+To start using a theme, install it through npm.
+
+```sh
+npm install --save @telerik/kendo-theme-default
+```
+
+## Styling Options
+
+Currently, the available themes are:
+
+- Default ([@telerik/kendo-theme-default](https://www.npmjs.com/package/@telerik/kendo-theme-default))
+- Bootstrap ([@telerik/kendo-theme-bootstrap](https://www.npmjs.com/package/@telerik/kendo-theme-bootstrap))
+
+After its installation, the theme needs to be referenced in the project.
+
+### Use Precompiled Themes
+
+The example below demonstrates how to include the complete CSS of the default theme by using `styleUrls`. This configuration includes the styles for all components in Kendo UI for Angular 2.
+
+```ts-no-run
+@Component({
+    selector: 'my-app',
+    styleUrls: [
+        // load the default theme (use correct path to modules)
+        'node_modules/@telerik/kendo-theme-default/dist/all.css'
+    ],
+    template: `
+        <h1>My First Kendo UI Angular 2 App</h1>
+        <button kendoButton [primary]=true>
+            My Kendo UI Button
+        </button>
+    `,
+
+})
+export class AppComponent { }
+```
+
+### Build Custom Themes
+
+To change the theme colors or sizes, build a custom theme from its SCSS sources. To achieve this result, use a build system such as Webpack.
+
+```ts-no-run
+@Component({
+    selector: 'my-app',
+    styleUrls: [
+        // load the default theme (use correct path to modules)
+        'styles.scss'
+    ],
+    template: `
+        <h1>My First Kendo UI Angular 2 App</h1>
+        <button kendoButton [primary]=true>
+            My Kendo UI Button
+        </button>
+    `,
+
+})
+export class AppComponent { }
+```
+```scss
+@import "~@telerik/kendo-theme-default/styles/packages/all";
+```
+
+The setup described above allows for the theme variables to be changed directly in your application. To style the button in a lovely pink color, change the `$accent` variable before importing the theme.
+
+```scss
+$accent: #ff69b4;
+
+@import "~@telerik/kendo-theme-default/styles/packages/all";
+```
+
+The basic set of variables is located in the [`\_variables.scss` file](https://github.com/telerik/kendo-theme-default/blob/master/styles/_variables.scss).
+
+Projects that are not built using ng-cli require additional Webpack configuration to process SCSS files:
+
+```json-no-run
+{ test: /\.scss$/,
+  loaders: [
+    'css?sourceMap',
+    'sass?sourceMap'
+  ]
+},
+{
+  test: /\.(gif|png|woff|woff2|eot|ttf|svg)$/,
+  loader: 'url-loader?limit=100000'
+}
+```
+
+For a working demo that shows this approach, see the [ng2-dashboard sample app](https://github.com/telerik/ng2-dashboard).
+
+## Suggested Links
+
+* [Get Started with Kendo UI for Angular 2]({% slug getting_started_kendouiforangular %})
+* [Browse the Components](http://www.telerik.com/kendo-angular-ui/components)
+