Implemented FlexGrid Demo

src/AppMenu.vue

@@ -45,6 +45,7 @@
                 <div>
                     <router-link to="/panel">&#9679; Panel</router-link>
                     <router-link to="/fieldset">&#9679; Fieldset</router-link>
+                    <router-link to="/flexgrid">&#9679; FlexGrid</router-link>
                     <router-link to="/toolbar">&#9679; Toolbar</router-link>
                 </div>
             </div>

src/assets/styles/app.scss

@@ -48,7 +48,7 @@ body {
     background-color: #f6f6f6;
     font-family: "Open Sans", "Helvetica Neue", sans-serif;
     font-weight: normal;
-    color: #333333;
+    color: #484848;
     -webkit-font-smoothing: antialiased;
     font-size: 14px;
 }
@@ -237,7 +237,7 @@ body {
             display: block;
             padding: 15px 0px 0px 25px;
             border-top: solid 1px #e3e9ea;
-            color: #333333;
+            color: #484848;
             cursor: pointer;
             user-select: none;
 
@@ -396,8 +396,9 @@ body {
         }
         
         &.introduction {
-            @include background-gradient-left2right(#41b883, #50aeae);
+            background: url('./assets/images/component-intro-bg.jpg');
-            color: #ffffff;
+            border-bottom: 1px solid #dadada;
+            color: #484848;
             
             .feature-intro {
                 h1 {
@@ -405,7 +406,7 @@ body {
                     margin: 0 0 20px 0;
                     display: block;
                     text-align: left;
-                    color: #ffffff;
+                    color: #222222;
                     font-weight: normal;
                 }
 
@@ -413,6 +414,7 @@ body {
                     margin: 0;
                     line-height: 2em;
                     font-size: 16px;
+                    color: #222222;
                 }
 
                 a {
@@ -494,7 +496,7 @@ body {
         
         &.documentation {
             h3 {
-                color:  #333333;
+                color:  #484848;
                 margin-top: 25px;
                 margin-bottom: 0px;
                 font-size: 22px;
@@ -508,7 +510,7 @@ body {
             }
 
             p {
-                color:  #333333;
+                color:  #484848;
                 font-size: 16px;
                 line-height: 24px;
                 margin: 10px 0;
@@ -585,7 +587,7 @@ body {
 
                         &.p-highlight a {
                             background: #f5f7f8;
-                            color: #333333;
+                            color: #484848;
                         }
                         
                         &:not(.p-highlight) a:hover {
@@ -774,7 +776,7 @@ body {
 
         h3 {
              font-size:24px;
-             color: #333333;
+             color: #484848;
              margin-bottom: 25px;
         }
 
@@ -805,16 +807,14 @@ body {
             margin-bottom: 30px;
 
             &.features-tagline {
-                color: #333333;
+                color: #484848;
                 margin-bottom: 0;
                 margin-top: -5px;
             }
 
             &.features-description {
-                color: #333333;
+                color: #484848;
                 text-align: left;
-
-
             }
 
             > a{
@@ -862,7 +862,7 @@ body {
         
         h3 {
              font-size:24px;
-             color: #333333;
+             color: #484848;
              margin-bottom: 25px;
         }
 

src/router.js

@@ -11,6 +11,21 @@ export default new Router({
       name: 'home',
       component: Home
     },
+    {
+        path: '/button',
+        name: 'button',
+        component: () => import('./views/button/ButtonDemo.vue')
+    },
+    {
+        path: '/fieldset',
+        name: 'fieldset',
+        component: () => import('./views/fieldset/FieldsetDemo.vue')
+    },
+    {
+        path: '/flexgrid',
+        name: 'flexgrid',
+        component: () => import('./views/flexgrid/FlexGridDemo.vue')
+    },
     {
         path: '/inputtext',
         name: 'inputtext',
@@ -21,21 +36,11 @@ export default new Router({
         name: 'listbox',
         component: () => import('./views/listbox/ListBoxDemo.vue')
     },
-    {
-        path: '/button',
-        name: 'button',
-        component: () => import('./views/button/ButtonDemo.vue')
-    },
     {
         path: '/panel',
         name: 'panel',
         component: () => import('./views/panel/PanelDemo.vue')
     },
-    {
-        path: '/fieldset',
-        name: 'fieldset',
-        component: () => import('./views/fieldset/FieldsetDemo.vue')
-    },
     {
         path: '/textarea',
         name: 'textarea',

src/views/flexgrid/FlexGridDemo.vue

@@ -0,0 +1,489 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>InputText</h1>
+                <p>Flex Grid CSS is a lightweight flex based responsive layout utility optimized for mobile phones, tablets and desktops. 
+                    Flex Grid CSS is not included in PrimeReact as it is provided by <a href="https://github.com/primefaces/primeflex">PrimeFlex</a>, a shared grid library between PrimeFaces, PrimeNG, PrimeReact and PrimeVue projects.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation flexgrid-demo">
+            <h3 class="first">Basic</h3>
+            <div class="p-grid">
+                <div class="p-col">
+                    <div class="box">1</div>
+                </div>
+                <div class="p-col">
+                    <div class="box">2</div>
+                </div>
+                <div class="p-col">
+                    <div class="box">3</div>
+                </div>
+            </div>
+    
+            <h3>Dynamic</h3>
+            <p-button type="button" icon="pi pi-plus" title="Add Column" @click="addColumn" :disabled="columns.length === 20" style="margin-right: .5em" />
+            <p-button type="button" icon="pi pi-minus" title="Remove Column" @click="removeColumn" :disabled="columns.length === 1" />
+
+            <div style="margin-top: .5em">
+                <transition-group name="dynamic-box" tag="div" class="p-grid">
+                    <div v-for="col of columns" :key="col" class="p-col">
+                        <div class="box">{{col}}</div>
+                    </div>
+                </transition-group>
+            </div>
+
+            <h3>Reverse Direction</h3>
+            <div class="p-grid p-dir-rev">
+                <div class="p-col">
+                    <div class="box">1</div>
+                </div>
+                <div class="p-col">
+                    <div class="box">2</div>
+                </div>
+                <div class="p-col">
+                    <div class="box">3</div>
+                </div>
+            </div>
+
+            <h3>Column Direction</h3>
+            <div class="p-grid p-dir-col">
+                <div class="p-col">
+                    <div class="box">1</div>
+                </div>
+                <div class="p-col">
+                    <div class="box">2</div>
+                </div>
+                <div class="p-col">
+                    <div class="box">3</div>
+                </div>
+            </div>
+
+            <h3>Reverse Column Direction</h3>
+            <div class="p-grid p-dir-col-rev">
+                <div class="p-col">
+                    <div class="box">1</div>
+                </div>
+                <div class="p-col">
+                    <div class="box">2</div>
+                </div>
+                <div class="p-col">
+                    <div class="box">3</div>
+                </div>
+            </div>
+
+            <h3>12 Column Grid</h3>
+            <div class="p-grid">
+                <div class="p-col-4">
+                    <div class="box">4</div>
+                </div>
+                <div class="p-col">
+                    <div class="box">1</div>
+                </div>
+                <div class="p-col">
+                    <div class="box">1</div>
+                </div>
+                <div class="p-col">
+                    <div class="box">1</div>
+                </div>
+                <div class="p-col">
+                    <div class="box">1</div>
+                </div>
+                <div class="p-col">
+                    <div class="box">1</div>
+                </div>
+                <div class="p-col">
+                    <div class="box">1</div>
+                </div>
+                <div class="p-col">
+                    <div class="box">1</div>
+                </div>
+                <div class="p-col">
+                    <div class="box">1</div>
+                </div>
+            </div>
+
+            <div class="p-grid">
+                <div class="p-col-2">
+                    <div class="box">2</div>
+                </div>
+                <div class="p-col-6">
+                    <div class="box">6</div>
+                </div>
+                <div class="p-col-4">
+                    <div class="box">4</div>
+                </div>
+            </div>
+
+            <div class="p-grid">
+                <div class="p-col-8">
+                    <div class="box">8</div>
+                </div>
+                <div class="p-col-2">
+                    <div class="box">2</div>
+                </div>
+                <div class="p-col-2">
+                    <div class="box">2</div>
+                </div>
+            </div>
+
+            <h3>MultiLine</h3>
+            <div class="p-grid">
+                <div class="p-col-6">
+                    <div class="box">6</div>
+                </div>
+                <div class="p-col-6">
+                    <div class="box">6</div>
+                </div>
+                <div class="p-col-6">
+                    <div class="box">6</div>
+                </div>
+                <div class="p-col-6">
+                    <div class="box">6</div>
+                </div>
+            </div>
+
+            <h3>Fixed Width Column</h3>
+            <div class="p-grid">
+                <div class="p-col-fixed" style="width:100px">
+                    <div class="box">100px</div>
+                </div>
+                <div class="p-col">
+                    <div class="box">auto</div>
+                </div>
+            </div>
+
+            <h3>Responsive</h3>
+            <div class="p-grid">
+                <div class="p-col-12 p-md-6 p-lg-3">
+                    <div class="box">p-col-12 p-md-6 p-lg-3</div>
+                </div>
+                <div class="p-col-12 p-md-6 p-lg-3">
+                    <div class="box">p-col-12 p-md-6 p-lg-3</div>
+                </div>
+                <div class="p-col-12 p-md-6 p-lg-3">
+                    <div class="box">p-col-12 p-md-6 p-lg-3</div>
+                </div>
+                <div class="p-col-12 p-md-6 p-lg-3">
+                    <div class="box">p-col-12 p-md-6 p-lg-3</div>
+                </div>
+            </div>
+
+            <h3>Horizontal Alignment - Start</h3>
+            <div class="p-grid p-justify-start">
+                <div class="p-col-2">
+                    <div class="box">2</div>
+                </div>
+                <div class="p-col-1">
+                    <div class="box">1</div>
+                </div>
+                <div class="p-col-4">
+                    <div class="box">4</div>
+                </div>
+            </div>
+
+            <h3>Horizontal Alignment - End</h3>
+            <div class="p-grid p-justify-end">
+                <div class="p-col-2">
+                    <div class="box">2</div>
+                </div>
+                <div class="p-col-1">
+                    <div class="box">1</div>
+                </div>
+                <div class="p-col-4">
+                    <div class="box">4</div>
+                </div>
+            </div>
+
+            <h3>Horizontal Alignment - Center</h3>
+            <div class="p-grid p-justify-center">
+                <div class="p-col-2">
+                    <div class="box">2</div>
+                </div>
+                <div class="p-col-1">
+                    <div class="box">1</div>
+                </div>
+                <div class="p-col-4">
+                    <div class="box">4</div>
+                </div>
+            </div>
+
+            <h3>Horizontal Alignment - Between</h3>
+            <div class="p-grid p-justify-between">
+                <div class="p-col-2">
+                    <div class="box">2</div>
+                </div>
+                <div class="p-col-1">
+                    <div class="box">1</div>
+                </div>
+                <div class="p-col-4">
+                    <div class="box">4</div>
+                </div>
+            </div>
+
+            <h3>Horizontal Alignment - Around</h3>
+            <div class="p-grid p-justify-around">
+                <div class="p-col-2">
+                    <div class="box">2</div>
+                </div>
+                <div class="p-col-1">
+                    <div class="box">1</div>
+                </div>
+                <div class="p-col-4">
+                    <div class="box">4</div>
+                </div>
+            </div>
+
+            <h3>Horizontal Alignment - Even</h3>
+            <div class="p-grid p-justify-even">
+                <div class="p-col-2">
+                    <div class="box">2</div>
+                </div>
+                <div class="p-col-1">
+                    <div class="box">1</div>
+                </div>
+                <div class="p-col-4">
+                    <div class="box">4</div>
+                </div>
+            </div>
+
+            <h3>Vertical Alignment - Start</h3>
+            <div class="p-grid p-align-start vertical-container">
+                <div class="p-col">
+                    <div class="box">4</div>
+                </div>
+                <div class="p-col">
+                    <div class="box">4</div>
+                </div>
+                <div class="p-col">
+                    <div class="box">4</div>
+                </div>
+            </div>
+
+            <h3>Vertical Alignment - End</h3>
+            <div class="p-grid p-align-end vertical-container">
+                <div class="p-col">
+                    <div class="box">4</div>
+                </div>
+                <div class="p-col">
+                    <div class="box">4</div>
+                </div>
+                <div class="p-col">
+                    <div class="box">4</div>
+                </div>
+            </div>
+
+            <h3>Vertical Alignment - Center</h3>
+            <div class="p-grid p-align-center vertical-container">
+                <div class="p-col">
+                    <div class="box">4</div>
+                </div>
+                <div class="p-col">
+                    <div class="box">4</div>
+                </div>
+                <div class="p-col">
+                    <div class="box">4</div>
+                </div>
+            </div>
+
+            <h3>Vertical Alignment - Stretch</h3>
+            <div class="p-grid p-align-stretch vertical-container">
+                <div class="p-col">
+                    <div class="box box-stretched">4</div>
+                </div>
+                <div class="p-col">
+                    <div class="box box-stretched">4</div>
+                </div>
+                <div class="p-col">
+                    <div class="box box-stretched">4</div>
+                </div>
+            </div>
+
+            <h3>Vertical Alignment - Per Column</h3>
+            <div class="p-grid vertical-container">
+                <div class="p-col p-col-align-start">
+                    <div class="box">4</div>
+                </div>
+                <div class="p-col p-col-align-center">
+                    <div class="box">4</div>
+                </div>
+                <div class="p-col p-col-align-end">
+                    <div class="box">4</div>
+                </div>
+            </div>
+
+            <h3>Offset</h3>
+            <div class="p-grid">
+                <div class="p-col-6 p-offset-3">
+                    <div class="box">6</div>
+                </div>
+            </div>
+
+            <div class="p-grid">
+                <div class="p-col-4">
+                    <div class="box">4</div>
+                </div>
+                <div class="p-col-4 p-offset-4">
+                    <div class="box">4</div>
+                </div>
+            </div>
+
+            <h3>Nested</h3>
+            <div class="p-grid nested-grid">
+                <div class="p-col-8">
+                    <div class="p-grid">
+                        <div class="p-col-6">
+                            <div class="box">6</div>
+                        </div>
+                        <div class="p-col-6">
+                            <div class="box">6</div>
+                        </div>
+                        <div class="p-col-12">
+                            <div class="box">12</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="p-col-4">
+                    <div class="box box-stretched">4</div>
+                </div>
+            </div>
+
+            <h3>Panels</h3>
+            <div class="p-grid">
+                <div class="p-col">
+                    <p-panel header="Godfather">
+                        The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
+                        His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
+                        Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
+                        kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
+                    </p-panel>
+                </div>
+                <div class="p-col">
+                    <p-panel header="Godfather">
+                        The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
+                        His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
+                        Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
+                        kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
+                    </p-panel>
+                </div>
+                <div class="p-col">
+                    <p-panel header="Godfather">
+                        The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
+                        His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
+                        Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
+                        kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
+                    </p-panel>
+                </div>
+            </div>
+
+            <h3>Sample Layout</h3>
+            <div class="p-grid sample-layout">
+                <div class="p-col-12 p-md-2">
+                    Menu
+                </div>
+                <div class="p-col-12 p-md-10 p-col-nogutter">
+                    <div class="p-col-12 p-col-nogutter">
+                        Top Bar
+                    </div>
+                    <div class="p-col-12">
+                        <div class="p-grid">
+                            <div class="p-col-12 p-md-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet, orci nec
+                                dictum convallis, ligula mauris vestibulum turpis, nec varius tortor quam at diam. Nullam a viverra nibh.
+                                In tincidunt tempor lectus quis vulputate. Pellentesque nec dui aliquam, lobortis est in, lobortis ante</div>
+                            <div class="p-col-12 p-md-4">Maecenas vel nisi aliquet, vulputate tortor id, laoreet massa. Maecenas mattis
+                                tristique bibendum. Suspendisse vel mi dictum, vestibulum lacus quis, pulvinar quam. Proin vulputate, nibh
+                                at finibus varius, leo eros lacinia elit, nec blandit odio tellus a justo. Donec nec ex auctor, tristique
+                                nulla nec, rutrum sapien.</div>
+                            <div class="p-col-12 p-md-4">Proin efficitur in leo eget ornare. Nam vestibulum neque sed velit sagittis
+                                sodales. Sed scelerisque hendrerit magna a hendrerit. Cras tempor sem at justo pharetra convallis.
+                                Curabitur vel sodales purus. Vestibulum interdum facilisis nulla imperdiet suscipit. Quisque lectus felis,
+                                condimentum eget hendrerit sit amet.</div>
+
+                            <div class="p-col-6 p-md-3"><img alt="Galleria 1" src="/demo/images/nature/nature1.jpg" style="width: 100%" /></div>
+                            <div class="p-col-6 p-md-3"><img alt="Galleria 2" src="/demo/images/nature/nature2.jpg" style="width: 100%" /></div>
+                            <div class="p-col-6 p-md-3"><img alt="Galleria 3" src="/demo/images/nature/nature3.jpg" style="width: 100%" /></div>
+                            <div class="p-col-6 p-md-3"><img alt="Galleria 4" src="/demo/images/nature/nature4.jpg" style="width: 100%" /></div>
+        
+                            <div class="p-col-12 p-md-6">Phasellus faucibus purus volutpat mauris lacinia sodales. Ut sit amet sapien
+                                facilisis, commodo dui non, fringilla tellus. Quisque tempus facilisis nisi sodales finibus. Pellentesque
+                                neque orci, ullamcorper vitae ligula quis, dignissim euismod augue.</div>
+                            <div class="p-col-12 p-md-6">Fusce ullamcorper congue massa, eget ullamcorper nunc lobortis egestas. Lorem
+                                ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultrices dui eget dolor feugiat dapibus. Aliquam
+                                pretium leo et egestas luctus. Nunc facilisis gravida tellus.</div>
+                        </div>     
+                    </div>
+                </div>
+                <div class="p-col-12">
+                    Footer
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            columns: [0, 1, 2, 3, 4, 5]
+        }
+    },
+    methods: {
+        addColumn() {
+            this.columns = [...this.columns, this.columns.length];
+        },
+        removeColumn() {
+            this.columns.pop();
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.flexgrid-demo {
+    .box,
+    .sample-layout > div {
+        background-color: #cce4f7;
+        text-align: center;
+        padding-top: 1em;
+        padding-bottom: 1em;
+        border-radius: 4px;
+    }
+
+    .box-stretched {
+        height: 100%;
+    }
+
+    .sample-layout {
+        margin: 0;
+    }
+
+    .sample-layout > div {
+        border: 1px solid #ffffff;
+    }
+
+    .vertical-container {
+        margin: 0;
+        height: 200px;
+        background: #efefef;
+        border-radius: 4px;
+    }
+
+    .nested-grid .p-col-4 {
+        padding-bottom: 1em;
+    }
+
+    .dynamic-box-enter-active, .dynamic-box-leave-active {
+        transition: all .5s;
+    }
+
+    .dynamic-box-enter, .dynamic-box-leave-to {
+        opacity: 0;
+    }
+
+    .dynamic-box-enter, .dynamic-box-leave-to {
+        transform: translateX(30px);
+    }    
+}
+</style>