Initial version (#1)

README.md

@@ -1,27 +1,83 @@
-# AngularMaterialLayoutKit
+# :rocket: Material Design Layout Kit for Angular
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.8.
+**Popular layouts for Material Design web applications.**
 
-## Development server
+\[ [Vue version](https://github.com/kekscs/vue-material-layout-kit) \]
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+The idea here is to provide ready to use Angular templates with typical [Material Design](https://material.io/) layout and navigational components.
 
-## Code scaffolding
+<p align="center">
+  <a href="http://angular-layouts.keks-code.com/" target="_blank">
+    <img src="https://kekscs.blob.core.windows.net/dev/material-layout-kit/demo-btn.png" alt="DEMO" title="DEMO">
+  </a>
+</p>
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+## :heavy_check_mark: Key Characteristics
 
-## Build
+* Built using [Angular Material](https://material.angular.io/) and Google's [Material Design Components for web](https://material.io/develop/web) (or MDC-Web).
+* You don't have to use MDC-Web for the rest of your application. MDC-Web fluently integrates with other CSS frameworks/components because it doesn't define any global CSS styles. And because the library is very modular, only used components will be bundled.
+* Each layout template is built to work on phone, tablet and desktop.
+* Some templates adapt layout and navigation based on screen size. Layout and behavior at each breakpoint is mostly based on [Material Studies examples](https://material.io/design/material-studies/about-our-material-studies.html). For example:
+  * Navigation hidden on smaller screens gets revealed when additional space becomes available.
+  * Navigational components can transform from one format to another at a designated breakpoint: side navigation can transform into tabs on a larger screen.
+* Theming is done via Angular Material's [theming API](https://material.angular.io/guide/theming). Project includes a custom theme and an example of how to integrate it with [MDC Theming API](https://github.com/material-components/material-components-web/tree/master/packages/mdc-theme). Changing colors, fonts, shapes is as easy as setting SASS variables.
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
 
-## Running unit tests
+## Usage
+
+### Option 1: Copy layout code to an existing Angular app
+
+#### Step 1: Add MDC-Web
+
+1. Run `yarn add material-components-web` or `npm install material-components-web`. The package includes all MDC components/APIs. Don't worry,
+only necessary parts will be bundled into your application.
+2. Somewhere in your application create a file - _material-components-web/styles.scss_. Usually it goes to the folder _/src/vendor/_.
+3. Copy code from this file - https://github.com/material-components/material-components-web/blob/master/packages/material-components-web/material-components-web.scss. This is root SCSS file which includes all the MDC components.
+4. Now comment all the lines in the file. Leave only components needed for a selected layout. Each layout requires only some subset of MDC components. See layout description for a list of required components.
+5. Add the following line to your root SCSS file, or to a separate vendor root SCSS file if you have it:
+
+   `@use 'src/vendor/material-components-web/styles' as mdc;`.
+
+   Note: the line should go before any `@include` command.
+6. What about Roboto font and Material icons? These components are optional, only if used.
+
+
+#### Step 2: Copy layout code
+
+1. Clone the repo, or download the latest version from [Releases](https://github.com/kekscs/angular-material-layout-kit/releases).
+2. Copy the necessary layout component files to your app. Layouts can be found in [/src/app/layouts](https://github.com/kekscs/angular-material-layout-kit/tree/master/src/app/layouts) folder.
+3. Import layout into your _src/app/app-routing.module.ts_ file:
+```ts
+import { Layout101Component } from './layouts/layout101/layout101.component'
+```
+4. Configure layout for a route like this:
+```ts
+  {
+    path: 'home',
+    component: Layout101Component,
+    children: [
+      { path: '', component: HomeComponent }
+    ]
+  }
+```
+
+
+### Option 2: Use **angular-material-layout-kit** as a starter template
+
+Go to [Releases](https://github.com/kekscs/angular-material-layout-kit/releases), download the latest version and unpack it. Rename the folder, change package name. Use it as a starting point for your new web app:
+
+``` bash
+# install dependencies
+yarn install
+
+# serve with hot reload at localhost:4200
+yarn start
+
+# build for production with minification
+yarn build
+```
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
 
-## Running end-to-end tests
 
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
 
-## Further help
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

angular.json

@@ -31,7 +31,8 @@
             "aot": true,
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              "src/web.config"
             ],
             "styles": [
               "src/styles.scss"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-material-layout-kit",
-  "version": "0.0.0",
+  "version": "0.1.0-alpha.1",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -12,13 +12,18 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~11.2.9",
+    "@angular/cdk": "11.2.8",
     "@angular/common": "~11.2.9",
     "@angular/compiler": "~11.2.9",
     "@angular/core": "~11.2.9",
+    "@angular/flex-layout": "^11.0.0-beta.33",
     "@angular/forms": "~11.2.9",
+    "@angular/material": "11.2.8",
     "@angular/platform-browser": "~11.2.9",
     "@angular/platform-browser-dynamic": "~11.2.9",
     "@angular/router": "~11.2.9",
+    "material-components-web": "^10.0.0",
+    "mdc-utility-styles": "0.1.0-alpha.4",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
     "zone.js": "~0.11.3"

src/app/app-routing.module.ts

@@ -1,7 +1,41 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-const routes: Routes = [];
+// Layouts
+import { AppLayoutComponent } from './layouts/app-layout/app-layout.component';
+import { Layout101Component } from './layouts/layout101/layout101.component';
+import { Layout203Component } from './layouts/layout203/layout203.component';
+
+// Pages
+import { HomePage } from './pages/home/home.page';
+import { Layout101Page } from './pages/layout101/layout101.page';
+import { Layout203Page } from './pages/layout203/layout203.page';
+
+
+const routes: Routes = [
+  {
+    path: '',
+    component: AppLayoutComponent,
+    pathMatch: 'full',
+    children: [
+      { path: '', component: HomePage }
+    ]
+  },
+  {
+    path: 'layout101',
+    component: Layout101Component,
+    children: [
+      { path: '', component: Layout101Page }
+    ]
+  },
+  {
+    path: 'layout203',
+    component: Layout203Component,
+    children: [
+      { path: '', component: Layout203Page }
+    ]
+  }
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],