Ported fluid grid component from stache2

skyux-spa-visual-tests/src/app/fluid-grid/fluid-grid-visual.component.html

@@ -0,0 +1,24 @@
+<div id="screenshot-fluid-grid">
+  <sky-row>
+    <sky-column screenSmall="4" screenMedium="3" screenLarge="2">
+      small 4 medium 3 large 2
+    </sky-column>
+    <sky-column screenSmall="4" screenMedium="9" screenLarge="8">
+      small 4 medium 9 large 8
+    </sky-column>
+    <sky-column screenSmall="4" screenMedium="12" screenLarge="2">
+      small 4 medium 12 large 2
+    </sky-column>
+  </sky-row>
+</div>
+
+<div id="screenshot-fluid-grid-reverse">
+  <sky-row [reverseColumnOrder]="true">
+    <sky-column screenSmall="6">
+      should be second/below
+    </sky-column>
+    <sky-column screenSmall="6">
+      should be first/on top
+    </sky-column>
+  </sky-row>
+</div>

skyux-spa-visual-tests/src/app/fluid-grid/fluid-grid-visual.component.ts

@@ -0,0 +1,14 @@
+import {
+  Component
+} from '@angular/core';
+
+@Component({
+  selector: 'fluid-grid-visual',
+  templateUrl: './fluid-grid-visual.component.html',
+  styles: [`
+    .sky-column {
+      background-color: #97eced;
+      border: 1px solid #56e0e1;
+    }`]
+})
+export class FluidGridVisualComponent { }

skyux-spa-visual-tests/src/app/fluid-grid/fluid-grid.visual-spec.ts

@@ -0,0 +1,59 @@
+import { SkyVisualTest } from '../../../config/utils/visual-test-commands';
+
+describe('Fluid grid', () => {
+
+  it('should display all columns on different rows when on a very small screen', () => {
+    return SkyVisualTest.setupTest('fluid-grid', 600)
+      .then(() => {
+        return SkyVisualTest.compareScreenshot({
+          screenshotName: 'fluid-grid-screensmallest-differentrows',
+          selector: '#screenshot-fluid-grid',
+          checkAccessibility: true
+        });
+      });
+  });
+
+  it('should display all columns evenly split on the same row when on a small screen', () => {
+    return SkyVisualTest.setupTest('fluid-grid', 800)
+      .then(() => {
+        return SkyVisualTest.compareScreenshot({
+          screenshotName: 'fluid-grid-screensmall-evenrow',
+          selector: '#screenshot-fluid-grid',
+          checkAccessibility: true
+        });
+      });
+  });
+
+  it('should display two on the top row and one on the bottom row when on a medium screen', () => {
+    return SkyVisualTest.setupTest('fluid-grid', 1100)
+      .then(() => {
+        return SkyVisualTest.compareScreenshot({
+          screenshotName: 'fluid-grid-screenmedium-tworows',
+          selector: '#screenshot-fluid-grid',
+          checkAccessibility: true
+        });
+      });
+  });
+
+  it('should display all columns distributed unevenly when on a large screen', () => {
+    return SkyVisualTest.setupTest('fluid-grid', 1400)
+      .then(() => {
+        return SkyVisualTest.compareScreenshot({
+          screenshotName: 'fluid-grid-screenlarge-unevenrow',
+          selector: '#screenshot-fluid-grid',
+          checkAccessibility: true
+        });
+      });
+  });
+
+  it('should reverse column order with reverseColumnOrder applied', () => {
+    return SkyVisualTest.setupTest('fluid-grid')
+      .then(() => {
+        return SkyVisualTest.compareScreenshot({
+          screenshotName: 'fluid-grid-reversecolumnorder',
+          selector: '#screenshot-fluid-grid-reverse',
+          checkAccessibility: true
+        });
+      });
+  });
+});

skyux-spa-visual-tests/src/app/fluid-grid/index.html

@@ -0,0 +1 @@
+<fluid-grid-visual></fluid-grid-visual>

skyux-spa-visual-tests/src/app/home.component.ts

@@ -21,6 +21,7 @@ export class HomeComponent {
     'error',
     'fileattachments',
     'filter',
+    'fluid-grid',
     'forms',
     'grid',
     'help-inline',

src/app/components/demo-components.service.ts

@@ -316,6 +316,27 @@ export class SkyDemoComponentsService {
           ];
         }
       },
+      {
+        name: 'Fluid grid',
+        icon: 'table',
+        // tslint:disable-next-line
+        summary: `Provides a responsive 12-column layout to organize content for all device sizes.`,
+        url: '/components/fluid-grid',
+        getCodeFiles: function () {
+          return [
+            {
+              name: 'fluid-grid.component.html',
+              fileContents: require('!!raw-loader!./fluid-grid/fluid-grid-demo.component.html')
+            },
+            {
+              name: 'fluid-grid-demo.component.ts',
+              fileContents: require('!!raw-loader!./fluid-grid/fluid-grid-demo.component.ts'),
+              componentName: 'SkyFluidGridDemoComponent',
+              bootstrapSelector: 'sky-fluid-grid-demo'
+            }
+          ];
+        }
+      },
       {
         name: 'Form',
         icon: 'keyboard-o',

src/app/components/fluid-grid/fluid-grid-demo.component.html

@@ -0,0 +1,163 @@
+<div class="highlight-columns">
+  <sky-row>
+    <sky-column screenSmall="1">
+      small="1"
+    </sky-column>
+    <sky-column screenSmall="1">
+      small="1"
+    </sky-column>
+    <sky-column screenSmall="1">
+      small="1"
+    </sky-column>
+    <sky-column screenSmall="1">
+      small="1"
+    </sky-column>
+    <sky-column screenSmall="1">
+      small="1"
+    </sky-column>
+    <sky-column screenSmall="1">
+      small="1"
+    </sky-column>
+    <sky-column screenSmall="1">
+      small="1"
+    </sky-column>
+    <sky-column screenSmall="1">
+      small="1"
+    </sky-column>
+    <sky-column screenSmall="1">
+      small="1"
+    </sky-column>
+    <sky-column screenSmall="1">
+      small="1"
+    </sky-column>
+    <sky-column screenSmall="1">
+      small="1"
+    </sky-column>
+    <sky-column screenSmall="1">
+      small="1"
+    </sky-column>
+  </sky-row>
+
+  <sky-row>
+    <sky-column screenSmall="2">
+      small="2"
+    </sky-column>
+    <sky-column screenSmall="2">
+      small="2"
+    </sky-column>
+    <sky-column screenSmall="2">
+      small="2"
+    </sky-column>
+    <sky-column screenSmall="2">
+      small="2"
+    </sky-column>
+    <sky-column screenSmall="2">
+      small="2"
+    </sky-column>
+    <sky-column screenSmall="2">
+      small="2"
+    </sky-column>
+  </sky-row>
+
+  <sky-row>
+    <sky-column screenSmall="3">
+      small="3"
+    </sky-column>
+    <sky-column screenSmall="3">
+      small="3"
+    </sky-column>
+    <sky-column screenSmall="3">
+      small="3"
+    </sky-column>
+    <sky-column screenSmall="3">
+      small="3"
+    </sky-column>
+  </sky-row>
+
+  <sky-row>
+    <sky-column screenSmall="4">
+      small="4"
+    </sky-column>
+    <sky-column screenSmall="4">
+      small="4"
+    </sky-column>
+    <sky-column screenSmall="4">
+      small="4"
+    </sky-column>
+  </sky-row>
+
+  <sky-row>
+    <sky-column screenSmall="5">
+      small="5"
+    </sky-column>
+    <sky-column screenSmall="7">
+      small="7"
+    </sky-column>
+  </sky-row>
+
+  <sky-row>
+    <sky-column screenSmall="6">
+      small="6"
+    </sky-column>
+    <sky-column screenSmall="6">
+      small="6"
+    </sky-column>
+  </sky-row>
+
+  <sky-row>
+    <sky-column screenSmall="8">
+      small="8"
+    </sky-column>
+    <sky-column screenSmall="4">
+      small="4"
+    </sky-column>
+  </sky-row>
+
+  <sky-row>
+    <sky-column screenSmall="9">
+      small="9"
+    </sky-column>
+    <sky-column screenSmall="3">
+      small="3"
+    </sky-column>
+  </sky-row>
+
+  <sky-row>
+    <sky-column screenSmall="10">
+      small="10"
+    </sky-column>
+    <sky-column screenSmall="2">
+      small="2"
+    </sky-column>
+  </sky-row>
+
+  <sky-row>
+    <sky-column screenSmall="11">
+      small="11"
+    </sky-column>
+    <sky-column screenSmall="1">
+      small="1"
+    </sky-column>
+  </sky-row>
+
+  <sky-row>
+    <sky-column screenSmall="8" screenMedium="9" screenLarge="10">
+      small="8" medium="9" large="10"
+    </sky-column>
+    <sky-column screenSmall="4" screenMedium="3" screenLarge="2">
+      small="4" medium="3" large="2"
+    </sky-column>
+  </sky-row>
+
+  <sky-row [reverseColumnOrder]="true">
+    <sky-column screenSmall="4">
+      First column
+    </sky-column>
+    <sky-column screenSmall="4">
+      Second column
+    </sky-column>
+    <sky-column screenSmall="4">
+      Third column
+    </sky-column>
+  </sky-row>
+</div>

src/app/components/fluid-grid/fluid-grid-demo.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sky-fluid-grid-demo',
+  templateUrl: './fluid-grid-demo.component.html',
+  styles: [`
+  .highlight-columns .sky-column {
+      background-color: #97eced;
+      border: 1px solid #56e0e1;
+      overflow-wrap: break-word;
+    }`]
+})
+export class SkyFluidGridDemoComponent {
+
+}

src/app/components/fluid-grid/index.html

@@ -0,0 +1,29 @@
+<sky-demo-page title="Fluid grid">
+  <sky-demo-page-summary>
+The fluid grid component provides a responsive 12-column layout to organize content for all device sizes. The fluid grid consists of <code>sky-row</code> and <code>sky-column</code> tags. You place column elements in row elements, and then you can specify how much of the layout to use for each column element on small, medium, and large screens. For extra small screens (less than 768px), the fluid grid automatically stacks columns vertically across the entire 12-column layout.
+  </sky-demo-page-summary>
+
+  <sky-demo-page-properties sectionHeading="Sky row properties">
+    <sky-demo-page-property propertyName="reverseColumnOrder" defaultValue="false" isOptional="true">
+      Indicates whether to reverse the display order for columns in the row.
+    </sky-demo-page-property>
+
+  </sky-demo-page-properties>
+  <sky-demo-page-properties sectionHeading="Sky column properties">
+    <sky-demo-page-property propertyName="screenSmall" isOptional="true">
+      Specifies the number of columns (1-12) to use for the element on small screens (768-991px). If you do not specify a value, the fluid grid displays the element vertically across the entire layout.
+    </sky-demo-page-property>
+    <sky-demo-page-property propertyName="screenMedium" isOptional="true">
+      Specifies the number of columns (1-12) to use for the element on medium screens (992-1199px). If you do not specify a value, the element inherits the screenSmall value.
+    </sky-demo-page-property>
+    <sky-demo-page-property propertyName="screenLarge" isOptional="true">
+Specifies the number of columns (1-12) to use for the element on large screens (greater than 1200px). If you do not specify a value, the element inherits the screenMedium value.
+    </sky-demo-page-property>
+  </sky-demo-page-properties>
+
+  <sky-demo-page-example>
+    <sky-fluid-grid-demo></sky-fluid-grid-demo>
+    <sky-demo-page-code demoName="Fluid grid"></sky-demo-page-code>
+  </sky-demo-page-example>
+
+</sky-demo-page>

src/core.ts

@@ -18,6 +18,7 @@ import { SkyEmailValidationModule } from './modules/email-validation';
 import { SkyErrorModule } from './modules/error';
 import { SkyFileAttachmentsModule } from './modules/fileattachments';
 import { SkyFilterModule } from './modules/filter';
+import { SkyFluidGridModule } from './modules/fluid-grid/fluid-grid.module';
 import { SkyGridModule } from './modules/grid';
 import { SkyHelpInlineModule } from './modules/help-inline';
 import { SkyKeyInfoModule } from './modules/key-info';
@@ -65,6 +66,7 @@ import { SkyWaitModule } from './modules/wait';
     SkyErrorModule,
     SkyFileAttachmentsModule,
     SkyFilterModule,
+    SkyFluidGridModule,
     SkyGridModule,
     SkyHelpInlineModule,
     SkyKeyInfoModule,
@@ -204,6 +206,11 @@ export {
   SkyFilterSummaryComponent,
   SkyFilterSummaryItemComponent
 } from './modules/filter';
+export {
+  SkyColumnComponent,
+  SkyFluidGridModule,
+  SkyRowComponent
+} from './modules/fluid-grid';
 export {
   SkyFormat
 } from './modules/format';

src/modules/fluid-grid/column.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

src/modules/fluid-grid/column.component.scss

@@ -0,0 +1,21 @@
+@import '../../scss/_variables';
+@import '../../scss/_mixins';
+
+:host.sky-column {
+  padding-right: $sky-fluid-grid-gutter;
+  padding-left: $sky-fluid-grid-gutter;
+  width: 100%;
+  min-height: 1px;
+}
+
+@media (min-width: $sky-screen-sm-min) {
+  @include create_columns(sm);
+}
+
+@media (min-width: $sky-screen-md-min) {
+  @include create_columns(md);
+}
+
+@media (min-width: $sky-screen-lg-min) {
+  @include create_columns(lg);
+}