feature(resources): docs for sketch & axure (#60)

* feature(resources): sketch & axure downloads

* update(colors): remove cite

* update(resources): axure image & links

src/app/components/style-guide/colors/colors.component.html

@@ -69,9 +69,9 @@ <h3 md-line>Blue 700</h3>
   </md-card-content>
   <md-divider></md-divider>
   <md-card-actions>
-    <cite class="text-normal"><a md-button color="primary" href="https://material.google.com/style/color.html" target="_blank">
+    <a md-button color="primary" href="https://material.google.com/style/color.html" target="_blank">
     Material Design Color Spec
-    </a></cite>
+    </a>
   </md-card-actions>
 </md-card>
 <md-card>

src/app/components/style-guide/resources/resources.component.html

@@ -0,0 +1,107 @@
+<md-card>
+   <md-card-header>
+    <md-icon md-card-avatar>cloud_download</md-icon>
+    <md-card-title class="md-display-1">Resources</md-card-title>
+  </md-card-header>
+  <md-divider></md-divider>
+  <md-card-content>
+    <p>User Experience and User Interface design templates and libraries to provide a seamless transition from visual design to prototypes to production interfaces with Covalent. </p>
+  </md-card-content>
+</md-card>
+<md-card>
+  <md-card-header>
+      <img md-card-avatar src="app/assets/icons/sketchapp.svg">
+      <md-card-title>Sketch Template</md-card-title>
+      <md-card-subtitle>Covalent template for the OSX Sketch App</md-card-subtitle>
+  </md-card-header>
+  <md-divider></md-divider>
+  <md-card-content>
+    <p>Create static mockups that are identical to the Covalent layouts and Angular-Material components!</p>
+    <a md-ripple md-tooltip="Download" tooltip-position="below" md-button color="primary" href="https://dribbble.com/shots/2846624-Covalent-Material-Design-Sketch-Template-Free-download/attachments/585808">
+      <img width="100%" class="md-whiteframe-z1" src="https://d13yacurqjgara.cloudfront.net/users/13496/screenshots/2846624/covalent-sketch-template.gif">
+    </a>
+    <md-divider></md-divider>
+    <td-expansion-panel label="Features">
+      <md-list>
+      <md-list-item>
+        <h3 md-line>4 Covalent Layouts</h3>
+        <p md-line>nav view, manage list, card over & nav list</p>
+      </md-list-item>
+      <md-list-item>
+        <h3 md-line>4 responsive formats</h3>
+        <p md-line>desktop, tablet landscape, table portrait & mobile</p>
+      </md-list-item>
+      <md-list-item>
+        <h3 md-line>All Core Material Design Components</h3>
+        <p md-line>built using scalable Sketch symbols</p>
+      </md-list-item>
+      <md-list-item>
+        <h3 md-line>Material Design Patterns</h3>
+        <p md-line>tons of cards, lists, settings & forms</p>
+      </md-list-item>
+      <md-list-item>
+        <h3 md-line>Material Design Typography & Iconography</h3>
+        <p md-line>Sketch shared text styles & SVG icons</p>
+      </md-list-item>
+    </md-list>
+    </td-expansion-panel>
+  </md-card-content>
+  <md-divider></md-divider>
+    <md-card-actions>
+      <a md-button color="accent" href="https://dribbble.com/shots/2846624-Covalent-Material-Design-Sketch-Template-Free-download/attachments/585808">
+      Download Sketch Template
+      </a>
+  </md-card-actions>
+</md-card>
+<md-card>
+  <md-card-header>
+      <img md-card-avatar src="app/assets/icons/axure.png">
+      <md-card-title>Axure Widget Library</md-card-title>
+      <md-card-subtitle>Covalent widget library for Axure RP</md-card-subtitle>
+  </md-card-header>
+  <md-divider></md-divider>
+  <md-card-content>
+    <p>Prototype interactive UX flows that perfectly complement the Sketch template and production Covalent code.</p>
+    <a md-ripple md-tooltip="Download" tooltip-position="below" md-button color="primary" href="http://jmp.sh/5CPc4lB">
+      <img width="100%" class="md-whiteframe-z1" src="https://storage.jumpshare.com/preview/1WLTjl9z_5D4Wiz9Xt_O0fXM1LRIbWE7JSkScP2FOhaJCQ1ycdC5VC0gnf8uypayxr7sWrcqS8CW5ObURJhVWn8t7wA9n-vlT_jkylN98IjJmZ_gxzDuijCC6OnKLtdF">
+    </a>
+    <md-divider></md-divider>
+    <td-expansion-panel label="Features">
+      <md-list>
+      <md-list-item>
+        <h3 md-line>4 Covalent Layouts</h3>
+        <p md-line>nav view, manage list, card over & nav list</p>
+      </md-list-item>
+      <md-list-item>
+        <h3 md-line>Interactive Prototype Elements</h3>
+        <p md-line>buttons, tabs, stepper</p>
+      </md-list-item>
+      <md-list-item>
+        <h3 md-line>Interactive Navigation Drawer</h3>
+        <p md-line>mimics the Material Design responsive sidenav</p>
+      </md-list-item>
+      <md-list-item>
+        <h3 md-line>Form and Form Components</h3>
+        <p md-line>interactive inputs, radio, checkboxes, toggles &amp; more</p>
+      </md-list-item>
+      <md-list-item>
+        <h3 md-line>Vector SVG Iconsets</h3>
+        <p md-line>Material Design sets of icons</p>
+      </md-list-item>
+      <md-list-item>
+        <h3 md-line>Pre-built Material Design Patterns</h3>
+        <p md-line>cards, lists, settings &amp; more</p>
+      </md-list-item>
+    </md-list>
+    </td-expansion-panel>
+  </md-card-content>
+  <md-divider></md-divider>
+    <md-card-actions>
+      <a md-button color="accent" href="http://jmp.sh/5CPc4lB">
+      Download Axure Library
+      </a>
+      <a md-button color="primary" href="http://gxkfh3.axshare.com/">
+      View Prototype
+      </a>
+  </md-card-actions>
+</md-card>

src/app/components/style-guide/resources/resources.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'style-guide-resources',
+  templateUrl: 'resources.component.html',
+  styleUrls: ['resources.component.css']
+})
+export class ResourcesComponent {
+
+}

src/app/components/style-guide/style-guide.component.ts

@@ -48,6 +48,11 @@ export class StyleGuideComponent {
     icon: 'build',
     route: 'utility-styles',
     title: 'Utility Styles',
+  }, {
+    description: 'Design templates & libraries',
+    icon: 'cloud_download',
+    route: 'resources',
+    title: 'Resources',
   }];
 
 }

src/app/components/style-guide/style-guide.module.ts

@@ -11,6 +11,7 @@ import { ColorsComponent } from './colors/colors.component';
 import { MaterialComponentsComponent } from './material-components/material-components.component';
 import { CardsComponent } from './cards/cards.component';
 import { UtilityStylesComponent } from './utility-styles/utility-styles.component';
+import { ResourcesComponent } from './resources/resources.component';
 
 import { CovalentCoreModule } from '../../../platform/core';
 import { CovalentHighlightModule } from '../../../platform/highlight';
@@ -26,6 +27,7 @@ import { CovalentHighlightModule } from '../../../platform/highlight';
     MaterialComponentsComponent,
     CardsComponent,
     UtilityStylesComponent,
+    ResourcesComponent,
   ],
   imports: [
     CovalentCoreModule.forRoot(),

src/app/components/style-guide/style-guide.routes.ts

@@ -9,6 +9,7 @@ import { ColorsComponent } from './colors/colors.component';
 import { MaterialComponentsComponent } from './material-components/material-components.component';
 import { CardsComponent } from './cards/cards.component';
 import { UtilityStylesComponent } from './utility-styles/utility-styles.component';
+import { ResourcesComponent } from './resources/resources.component';
 
 const routes: Routes = [{
   children: [{
@@ -35,6 +36,9 @@ const routes: Routes = [{
     }, {
       component: UtilityStylesComponent,
       path: 'utility-styles',
+    }, {
+      component: ResourcesComponent,
+      path: 'resources',
     },
   ],
   component: StyleGuideComponent,