helpers page done...

src/app/core/components/navigation/navigation.model.ts

@@ -258,6 +258,12 @@ export class FuseNavigation
                 'icon' : 'text_fields',
                 'url'  : '/ui/typography'
             },
+            {
+                'title': 'Helper Classes',
+                'type' : 'nav-item',
+                'icon' : 'help',
+                'url'  : '/ui/helper-classes'
+            },
             {
                 'title'   : 'Page Layouts',
                 'type'    : 'nav-collapse',

src/app/main/content/ui/helper-classes/helper-classes.component.html

@@ -0,0 +1,38 @@
+<div id="helper-classes" class="page-layout simple tabbed" fxLayout="column">
+
+    <!-- HEADER -->
+    <div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
+        <div fxLayout="column" fxLayoutAlign="center start">
+            <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
+                <md-icon class="secondary-text s-16">home</md-icon>
+                <md-icon class="secondary-text s-16">chevron_right</md-icon>
+                <span class="secondary-text">User Interface</span>
+            </div>
+            <div class="h2 mt-16">Helper Classes</div>
+        </div>
+    </div>
+    <!-- / HEADER -->
+
+    <!-- CONTENT -->
+    <div class="content">
+
+        <md-tab-group md-dynamic-height="true">
+
+            <md-tab label="Padding & Margin Helpers">
+
+                <fuse-helper-classes-padding-margin></fuse-helper-classes-padding-margin>
+
+            </md-tab>
+
+            <md-tab label="Width & Height Helpers">
+
+                <fuse-helper-classes-width-height></fuse-helper-classes-width-height>
+
+            </md-tab>
+
+        </md-tab-group>
+
+    </div>
+    <!-- / CONTENT -->
+
+</div>

src/app/main/content/ui/helper-classes/helper-classes.component.scss

@@ -0,0 +1,3 @@
+:host {
+
+}

src/app/main/content/ui/helper-classes/helper-classes.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'fuse-helper-classes',
+    templateUrl: './helper-classes.component.html',
+    styleUrls  : ['./helper-classes.component.scss']
+})
+export class HelperClassesComponent
+{
+    constructor()
+    {
+    }
+
+}

src/app/main/content/ui/helper-classes/helper-classes.module.ts

@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../../../core/modules/shared.module';
+import { RouterModule, Routes } from '@angular/router';
+
+import { HelperClassesComponent } from './helper-classes.component';
+import { HelperClassesPaddingMarginComponent } from './tabs/padding-margin/padding-margin.component';
+import { HelperClassesWidthHeightComponent } from './tabs/width-height/width-height.component';
+
+const routes: Routes = [
+    {
+        path     : 'ui/helper-classes',
+        component: HelperClassesComponent
+    }
+];
+
+@NgModule({
+    imports     : [
+        SharedModule,
+        RouterModule.forChild(routes)
+    ],
+    declarations: [
+        HelperClassesComponent,
+        HelperClassesPaddingMarginComponent,
+        HelperClassesWidthHeightComponent
+    ]
+})
+export class UIHelperClassesModule
+{
+}

src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.html

@@ -0,0 +1,225 @@
+<div id="helper-classes-padding-margin" class="p-24">
+
+    <div class="mat-title">Padding Helpers</div>
+
+    <div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+            
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <span>p-0</span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <span class="p-0">No padding</span>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="mat-caption mb-16">Min:0 - Max:256, Multiples of 4</div>
+                <span>p-4</span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <span class="p-4">4px padding</span>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="mat-caption mb-16">Min:0 - Max:256, Multiples of 4</div>
+                <span>p-12</span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <span class="p-12">12px padding</span>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+    </div>
+
+    <div class="mat-title mt-20">Direction Specific Padding Helpers</div>
+
+    <div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="mat-caption mb-16">Min:0 - Max:256, Multiples of 4</div>
+                <span>pt-0</span>
+                <span>pr-0</span>
+                <span>pb-0</span>
+                <span>pl-0</span>
+                <span>px-0</span>
+                <span>py-0</span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <span class="pt-0">0 padding from top</span>
+                    <span class="pr-0">0 padding from right</span>
+                    <span class="pb-0">0 padding from bottom</span>
+                    <span class="pl-0">0 padding from left</span>
+                    <span class="px-0">0 padding from left and right</span>
+                    <span class="py-0">0 padding from top and bottom</span>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="mat-caption mb-16">Min:0 - Max:256, Multiples of 4</div>
+                <span>pt-4</span>
+                <span>pr-4</span>
+                <span>pb-4</span>
+                <span>pl-4</span>
+                <span>px-4</span>
+                <span>py-4</span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <span class="pt-4">4px padding from top</span>
+                    <span class="pr-4">4px padding from right</span>
+                    <span class="pb-4">4px padding from bottom</span>
+                    <span class="pl-4">4px padding from left</span>
+                    <span class="px-4">4px padding from left and right</span>
+                    <span class="py-4">4px padding from top and bottom</span>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+    </div>
+
+    <div class="mat-title mt-20">Margin Helpers</div>
+
+    <div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <span>m-0</span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <span class="m-0">No margin</span>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="mat-caption mb-16">Min:0 - Max:256, Multiples of 4</div>
+                <span>m-4</span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <span class="m-4">4px margin</span>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="mat-caption mb-16">Min:0 - Max:256, Multiples of 4</div>
+                <span>m-12</span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <span class="m-12">12px margin</span>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+    </div>
+
+    <div class="mat-title mt-20">Direction Specific Margin Helpers</div>
+
+    <div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="mat-caption mb-16">Min:0 - Max:256, Multiples of 4</div>
+                <span>mt-0</span>
+                <span>mr-0</span>
+                <span>mb-0</span>
+                <span>ml-0</span>
+                <span>mx-0</span>
+                <span>my-0</span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <span class="mt-0">0 margin from top</span>
+                    <span class="mr-0">0 margin from right</span>
+                    <span class="mb-0">0 margin from bottom</span>
+                    <span class="ml-0">0 margin from left</span>
+                    <span class="mx-0">0 margin from left and right</span>
+                    <span class="my-0">0 margin from top and bottom</span>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="mat-caption mb-16">Min:0 - Max:256, Multiples of 4</div>
+                <span>mt-4</span>
+                <span>mr-4</span>
+                <span>mb-4</span>
+                <span>ml-4</span>
+                <span>mx-4</span>
+                <span>my-4</span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <span class="mt-4">4px margin from top</span>
+                    <span class="mr-4">4px margin from right</span>
+                    <span class="mb-4">4px margin from bottom</span>
+                    <span class="ml-4">4px margin from left</span>
+                    <span class="mx-4">4px margin from left and right</span>
+                    <span class="my-4">4px margin from top and bottom</span>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+    </div>
+
+</div>

src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.scss

@@ -0,0 +1,31 @@
+:host {
+
+    #helper-classes-padding-margin {
+
+        .source-code {
+            position: relative;
+            background: #F3F4F6;
+            margin-bottom: 24px;
+            min-height: 180px;
+
+            code {
+                background: none !important;
+            }
+        }
+
+        .preview {
+            font-size: 16px;
+            padding: 16px;
+            margin-bottom: 24px;
+            min-height: 180px;
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+
+            .mat-caption {
+                margin-bottom: 16px;
+            }
+        }
+    }
+}

src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'fuse-helper-classes-padding-margin',
+    templateUrl: './padding-margin.component.html',
+    styleUrls  : ['./padding-margin.component.scss']
+})
+export class HelperClassesPaddingMarginComponent
+{
+
+    constructor()
+    {
+
+    }
+}

src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.html

@@ -0,0 +1,141 @@
+<div id="helper-classes-width-height" class="p-24">
+
+    <div class="mat-title">Width Helpers</div>
+
+    <div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+            
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <span>w-0</span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <span class="w-0">0px width</span>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="mat-caption mb-16">Min:0 - Max:512, Multiples of 4</div>
+                <span>w-100</span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <span class="w-100">100px width</span>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="mat-caption mb-16">Min:0 - Max:100, Multiples of 5</div>
+                <span>w-25-p</span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <span class="w-25-p">25% width</span>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="mat-caption mb-16">Min:0 - Max:100, Multiples of 5</div>
+                <span>w-100-p</span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <span class="w-100-p">100% width</span>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+    </div>
+
+    <div class="mat-title mt-20">Height Helpers</div>
+
+    <div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <span>h-0</span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <span class="h-0">0px height</span>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="mat-caption mb-16">Min:0 - Max:512, Multiples of 4</div>
+                <span>h-100</span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <span class="h-100">100px height</span>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="mat-caption mb-16">Min:0 - Max:100, Multiples of 5</div>
+                <span>h-25-p</span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <span class="h-25-p">25% height</span>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+        <div fxLayout="column" fxLayout.gt-md="row">
+
+            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
+                <div class="mat-caption mb-16">Min:0 - Max:100, Multiples of 5</div>
+                <span>h-100-p</span>
+            </div>
+
+            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+                       fxFlex="50">
+                <textarea #source hidden="hidden">
+                    <span class="h-100-p">100% height</span>
+                </textarea>
+            </fuse-hljs>
+
+        </div>
+
+    </div>
+
+</div>

src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.scss

@@ -0,0 +1,31 @@
+:host {
+
+    #helper-classes-width-height {
+
+        .source-code {
+            position: relative;
+            background: #F3F4F6;
+            margin-bottom: 24px;
+            min-height: 180px;
+
+            code {
+                background: none !important;
+            }
+        }
+
+        .preview {
+            font-size: 16px;
+            padding: 16px;
+            margin-bottom: 24px;
+            min-height: 180px;
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+
+            .mat-caption {
+                margin-bottom: 16px;
+            }
+        }
+    }
+}

src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector   : 'fuse-helper-classes-width-height',
+    templateUrl: './width-height.component.html',
+    styleUrls  : ['./width-height.component.scss']
+})
+export class HelperClassesWidthHeightComponent
+{
+
+    constructor()
+    {
+
+    }
+}

src/app/main/content/ui/ui.module.ts

@@ -3,12 +3,14 @@ import { NgModule } from '@angular/core';
 import { UIPageLayoutsModule } from './page-layouts/page-layouts.module';
 import { UIColorsModule } from './colors/colors.module';
 import { UITypographyModule } from './typography/typography.module';
+import { UIHelperClassesModule } from './helper-classes/helper-classes.module';
 
 @NgModule({
     imports: [
         UIColorsModule,
         UIPageLayoutsModule,
-        UITypographyModule
+        UITypographyModule,
+        UIHelperClassesModule
     ]
 })
 export class UIModule