feature(docs): add utility styles docs

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

@@ -57,6 +57,11 @@ export class StyleGuideComponent {
     icon: 'view_agenda',
     route: 'cards',
     title: 'Cards',
+  }, {
+    description: 'Utility CSS classes',
+    icon: 'build',
+    route: 'utility-styles',
+    title: 'Utility Styles',
   }];
 
 }

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

@@ -8,6 +8,7 @@ import { IconographyComponent } from './iconography';
 import { ColorsComponent } from './colors';
 import { MaterialComponentsComponent } from './material-components';
 import { CardsComponent } from './cards';
+import { UtilityStylesComponent } from './utility-styles';
 
 export const styleGuideRoutes: RouterConfig = [{
   children: [{
@@ -31,6 +32,9 @@ export const styleGuideRoutes: RouterConfig = [{
     }, {
       component: CardsComponent,
       path: 'cards',
+    }, {
+      component: UtilityStylesComponent,
+      path: 'utility-styles',
     },
   ],
   component: StyleGuideComponent,

src/app/components/style-guide/utility-styles/index.ts

@@ -0,0 +1 @@
+export * from './utility-styles.component';

src/app/components/style-guide/utility-styles/utility-styles.component.html

@@ -0,0 +1,227 @@
+<md-card>
+   <md-card-header>
+    <md-icon md-card-avatar>build</md-icon>
+    <md-card-title class="md-display-1">Utility Styles</md-card-title>
+  </md-card-header>
+  <md-divider></md-divider>
+  <md-card-content>
+    <p>Covalent includes many utility styles to save you time. If each UI element is an atom, think of these classes as subatomic particles. They're equally reusable to help tweak a particular atom.</p>
+    <p>We've included general utilities, padding (pad), margin (push), negative margin (pull), sizing, and text classes.</p>
+  </md-card-content>
+</md-card>
+<md-card>
+  <md-card-title>General Utilities</md-card-title>
+  <md-card-content>
+    <td-highlight lang="css">
+      .radius-none // no border radius
+      .overflow-hidden // hide overflow
+      .overflow-auto // normal overflow
+      .block // display block
+      .inline-block // display inline block
+      .relative // relative positioning
+      .fixed // fixed positioning
+      .height-auto // 0 min height
+      .z-3 // z index 3
+      .z-2 // z index 2
+      .z-1 // z index 1
+    </td-highlight>
+  </md-card-content>
+</md-card>
+<md-card>
+  <md-card-title>Sizing Utilities</md-card-title>
+  <md-card-content>
+    <td-highlight lang="css">
+      /* Sizing avail in 12 16 24 32 50 64 72 100 128 256 */
+      .size-256 // 256 height and width
+      .size-height-256 // 256 height and auto width
+      .size-width-256 // 256 width and auto height
+    </td-highlight>
+  </md-card-content>
+</md-card>
+<md-card>
+  <md-card-title>Text Utilities</md-card-title>
+  <md-card-content>
+    <td-highlight lang="css">
+      .text-normal // normal font size
+      .text-center // text align center
+      .text-left // text align left
+      .text-right // text align right
+      .text-micro // font size 10px
+      .text-xs // font size 50%
+      .text-sm // font size 70%
+      .text-md // font size 80%
+      .text-lg // font size 110%
+      .text-xl // font size 120%
+      .text-xxl // font size 130%
+      .text-30 // font size 30px
+      .text-super // font size 60px
+      .text-wrap // normal white space
+      .text-upper // uppercase
+      .text-truncate // single line of truncated text w/ ...
+    </td-highlight>
+  </md-card-content>
+</md-card>
+<div layout-gt-xs="row">
+  <div flex>
+    <md-card>
+      <md-card-title class="md-subhead">Pad (Padding) Utilities</md-card-title>
+      <md-card-content>
+        <td-highlight lang="css">
+          .pad 
+          .pad-xxl 
+          .pad-xl 
+          .pad-lg 
+          .pad-md 
+          .pad-sm 
+          .pad-xs 
+          .pad-none 
+
+          .pad-top 
+          .pad-top-xxl 
+          .pad-top-xl 
+          .pad-top-lg 
+          .pad-top-md 
+          .pad-top-sm 
+          .pad-top-xs 
+          .pad-top-none 
+
+          .pad-right 
+          .pad-right-xxl 
+          .pad-right-xl 
+          .pad-right-lg 
+          .pad-right-md 
+          .pad-right-sm 
+          .pad-right-xs 
+          .pad-right-none 
+
+          .pad-bottom 
+          .pad-bottom-button 
+          .pad-bottom-xxl 
+          .pad-bottom-xl 
+          .pad-bottom-lg 
+          .pad-bottom-md 
+          .pad-bottom-sm 
+          .pad-bottom-xs 
+          .pad-bottom-none 
+
+          .pad-left 
+          .pad-left-xxl 
+          .pad-left-xl 
+          .pad-left-lg 
+          .pad-left-md 
+          .pad-left-sm 
+          .pad-left-xs 
+          .pad-left-none 
+        </td-highlight>
+      </md-card-content>
+    </md-card>
+  </div>
+  <div flex>
+    <md-card>
+      <md-card-title class="md-subhead">Push (Margin) Utilities</md-card-title>
+      <md-card-content>
+        <td-highlight lang="css">
+          .push 
+          .push-xxl 
+          .push-xl 
+          .push-lg 
+          .push-md 
+          .push-sm 
+          .push-xs 
+          .push-none 
+
+          .push-top 
+          .push-top-xxl 
+          .push-top-xl 
+          .push-top-lg 
+          .push-top-md 
+          .push-top-sm 
+          .push-top-xs 
+          .push-top-none 
+
+          .push-right 
+          .push-right-xxl 
+          .push-right-xl 
+          .push-right-lg 
+          .push-right-md 
+          .push-right-sm 
+          .push-right-xs 
+          .push-right-none 
+
+          .push-bottom 
+          .push-bottom-button 
+          .push-bottom-xxl 
+          .push-bottom-xl 
+          .push-bottom-lg 
+          .push-bottom-md 
+          .push-bottom-sm 
+          .push-bottom-xs 
+          .push-bottom-none 
+
+          .push-left 
+          .push-left-xxl 
+          .push-left-xl 
+          .push-left-lg 
+          .push-left-md 
+          .push-left-sm 
+          .push-left-xs 
+          .push-left-none 
+        </td-highlight>
+      </md-card-content>
+    </md-card>
+  </div>
+  <div flex>
+    <md-card>
+      <md-card-title class="md-subhead">Pull (Negative Margin) Utilities</md-card-title>
+      <md-card-content>
+        <td-highlight lang="css">
+          .pull 
+          .pull-xxl 
+          .pull-xl 
+          .pull-lg 
+          .pull-md 
+          .pull-sm 
+          .pull-xs 
+          .pull-none 
+
+          .pull-top 
+          .pull-top-xxl 
+          .pull-top-xl 
+          .pull-top-lg 
+          .pull-top-md 
+          .pull-top-sm 
+          .pull-top-xs 
+          .pull-top-none 
+
+          .pull-right 
+          .pull-right-xxl 
+          .pull-right-xl 
+          .pull-right-lg 
+          .pull-right-md 
+          .pull-right-sm 
+          .pull-right-xs 
+          .pull-right-none 
+
+          .pull-bottom 
+          .pull-bottom-button 
+          .pull-bottom-xxl 
+          .pull-bottom-xl 
+          .pull-bottom-lg 
+          .pull-bottom-md 
+          .pull-bottom-sm 
+          .pull-bottom-xs 
+          .pull-bottom-none 
+
+          .pull-left 
+          .pull-left-xxl 
+          .pull-left-xl 
+          .pull-left-lg 
+          .pull-left-md 
+          .pull-left-sm 
+          .pull-left-xs 
+          .pull-left-none 
+        </td-highlight>
+      </md-card-content>
+    </md-card>
+  </div>
+</div>

src/app/components/style-guide/utility-styles/utility-styles.component.spec.ts

@@ -0,0 +1,44 @@
+import {
+  beforeEach,
+  beforeEachProviders,
+  describe,
+  expect,
+  it,
+  inject,
+} from '@angular/core/testing';
+import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing';
+import { Component, DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { UtilityStylesComponent } from './utility-styles.component';
+
+describe('Component: UtilityStyles', () => {
+  let builder: TestComponentBuilder;
+
+  beforeEachProviders(() => [UtilityStylesComponent]);
+  beforeEach(inject([TestComponentBuilder], function (tcb: TestComponentBuilder): void {
+    builder = tcb;
+  }));
+
+  it('should inject the component', inject([UtilityStylesComponent], (component: UtilityStylesComponent) => {
+    expect(component).toBeTruthy();
+  }));
+
+  it('should create the component', inject([], () => {
+    return builder.createAsync(UtilityStylesTestControllerComponent)
+      .then((fixture: ComponentFixture<any>) => {
+        let query: DebugElement = fixture.debugElement.query(By.directive(UtilityStylesComponent));
+        expect(query).toBeTruthy();
+        expect(query.componentInstance).toBeTruthy();
+      });
+  }));
+});
+
+@Component({
+  directives: [UtilityStylesComponent],
+  selector: 'td-test',
+  template: `
+    <td-utility-styles></td-utility-styles>
+  `,
+})
+class UtilityStylesTestControllerComponent {
+}

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

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+
+import { MD_CARD_DIRECTIVES } from '@angular2-material/card';
+import { MdIcon } from '@angular2-material/icon';
+import { MD_BUTTON_DIRECTIVES } from '@angular2-material/button';
+
+import { TdHighlightComponent } from '../../../../platform/highlight';
+
+@Component({
+  directives: [
+    MD_CARD_DIRECTIVES,
+    MdIcon,
+    TdHighlightComponent,
+    MD_BUTTON_DIRECTIVES,
+  ],
+  moduleId: module.id,
+  selector: 'td-utility-styles',
+  templateUrl: 'utility-styles.component.html',
+  styleUrls: ['utility-styles.component.css'],
+})
+export class UtilityStylesComponent {
+
+}

src/system-config.ts

@@ -70,6 +70,7 @@ const barrels: string[] = [
   'app/components/style-guide/typography',
   'app/components/style-guide/material-components',
   'app/components/style-guide/cards',
+  'app/components/style-guide/utility-styles',
   /** @cli-barrel */
 ];