From a0f11bdacf2be048ef449768bf582a9c9cb00158 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Thu, 27 Aug 2020 11:52:20 +0300
Subject: [PATCH] Fixed #434 - Docs for PrimeFlex Setup

---
 src/AppMenu.vue                        |   1 +
 src/router.js                          |   7 +-
 src/views/formlayout/FormLayoutDoc.vue |  11 ---
 src/views/grid/GridDoc.vue             |  12 ---
 src/views/primeflex/PrimeFlexSetup.vue | 120 +++++++++++++++++++++++++
 5 files changed, 127 insertions(+), 24 deletions(-)
 create mode 100644 src/views/primeflex/PrimeFlexSetup.vue

diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index f9eb5ca28..927d08a09 100755
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -20,6 +20,7 @@
 
             <div class="menu-category">PrimeFlex</div>
             <div class="menu-items">
+                <router-link to="/primeflex">Setup</router-link>
                 <router-link to="/display">Display</router-link>
                 <router-link to="/elevation">Elevation</router-link>
                 <router-link to="/flexbox">FlexBox</router-link>
diff --git a/src/router.js b/src/router.js
index 1743d9db0..b0cda94c9 100755
--- a/src/router.js
+++ b/src/router.js
@@ -460,7 +460,12 @@ export default new Router({
 			path: '/progressspinner',
 			name: 'progressspinner',
 			component: () => import('./views/progressspinner/ProgressSpinnerDemo.vue')
-		},
+        },
+        {
+			path: '/primeflex',
+			name: 'primeflex',
+			component: () => import('./views/primeflex/PrimeFlexSetup.vue')
+        },
 		{
 			path: '/radiobutton',
 			name: 'radiobutton',
diff --git a/src/views/formlayout/FormLayoutDoc.vue b/src/views/formlayout/FormLayoutDoc.vue
index f4964c40e..81e2c87d1 100644
--- a/src/views/formlayout/FormLayoutDoc.vue
+++ b/src/views/formlayout/FormLayoutDoc.vue
@@ -2,17 +2,6 @@
 	<div class="content-section documentation">
 		<TabView>
 			<TabPanel header="Documentation">
-				<h5>Install</h5>
-                <p>PrimeFlex is available at npm, if you have an existing application run the following command to download it to your project.</p>
-<CodeHighlight lang="js">
-npm install primeflex --save
-</CodeHighlight>
-
-                <p>Then add the primeflex.css to your application</p>
-<CodeHighlight lang="js">
-import 'primeflex/primeflex.css';
-</CodeHighlight>
-
 				<h5>Getting Started</h5>
 				<p>Core member of the FormLayout is the <i>.p-field</i> class that wraps the input field and the associated label.</p>
 <CodeHighlight>
diff --git a/src/views/grid/GridDoc.vue b/src/views/grid/GridDoc.vue
index d8e6ab483..000ed6c29 100755
--- a/src/views/grid/GridDoc.vue
+++ b/src/views/grid/GridDoc.vue
@@ -2,18 +2,6 @@
 	<div class="content-section documentation flexgrid-demo">
 		<TabView>
 			<TabPanel header="Documentation">
-                <h5>Install</h5>
-                <p>PrimeFlex is available at npm, if you have an existing application run the following command to download it to your project.</p>
-<CodeHighlight lang="js">
-npm install primeflex --save
-</CodeHighlight>
-
-                <p>Then add the primeflex.css to your application</p>
-<CodeHighlight lang="js">
-import 'primeflex/primeflex.css';
-</CodeHighlight>
-
-
 				<h5>Getting Started</h5>
 				<p>FlexGrid is a CSS utility based on flexbox. For more information about Flex, visit <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">A Complete Guide to Flexbox</a>. A basic grid is defined by giving
 					a container <i>p-grid</i> class and children the <i>p-col</i> class. Children of the grid will have the same width and scale according to the width of the parent.</p>
diff --git a/src/views/primeflex/PrimeFlexSetup.vue b/src/views/primeflex/PrimeFlexSetup.vue
new file mode 100644
index 000000000..d6c53023c
--- /dev/null
+++ b/src/views/primeflex/PrimeFlexSetup.vue
@@ -0,0 +1,120 @@
+<template>
+    <div>
+        <div class="content-section documentation">
+            <h1>PrimeFlex</h1>
+            <p>PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more. Although it is not required, it is highly
+                recommended to add PrimeFlex as it is likely to need such utilities when developing applications with PrimeVue.</p>
+
+            <h5>Download</h5>
+            <p>PrimeFlex is available at <a href="https://www.npmjs.com/package/primeflex">npm</a>, if you have an existing application run the following commands to install it.</p>
+
+            <h5>Import</h5>
+            <p>Next step is adding the primeflex.css to your application to include all utilities. If you prefer to pick the utilities, move to next step instead.</p>
+
+<CodeHighlight lang="css">
+import 'primeflex/primeflex.css';
+</CodeHighlight>
+
+            <p>PrimeFlex is a lightweight library still if you have an application such as one based on vue-cli 
+                that is able to import scss then you will be able to pick the utilities you need to make the app bundle even smaller.</p>
+<CodeHighlight lang="css">
+import 'primeflex/src/_variables.scss';
+import 'primeflex/src/_grid.scss';
+import 'primeflex/src/_formlayout.scss';
+import 'primeflex/src/_display.scss';
+import 'primeflex/src/_text.scss';
+import 'primeflex/src/flexbox/_flexbox.scss';
+import 'primeflex/src/_spacing.scss';
+import 'primeflex/src/_elevation.scss';
+</CodeHighlight>
+
+            <h5>Variables</h5>
+            <p>PrimeFlex uses sensible defaults for the variables.</p>
+
+            <div class="doc-tablewrapper">
+                <table class="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Variable</th>
+                            <th>Description</th>
+                            <th>Default</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>$sm</td>
+                            <td>Breakpoint of screens such as phones.</td>
+                            <td>576px</td>
+                        </tr>
+                        <tr>
+                            <td>$md</td>
+                            <td>Breakpoint of screens such as tablets.</td>
+                            <td>768px</td>
+                        </tr>
+                        <tr>
+                            <td>$lg</td>
+                            <td>Breakpoint of screens such as notebook monitors.</td>
+                            <td>992px</td>
+                        </tr>
+                        <tr>
+                            <td>$xl</td>
+                            <td>Breakpoint of smaller screens such as desktop monitors.</td>
+                            <td>1200px</td>
+                        </tr>
+                        <tr>
+                            <td>$gutter</td>
+                            <td>Padding of a grid column.</td>
+                            <td>.5rem</td>
+                        </tr>
+                        <tr>
+                            <td>$fieldMargin</td>
+                            <td>Spacing of a field. Can be vertical of horizontal depending on form layout.</td>
+                            <td>.5rem</td>
+                        </tr>
+                        <tr>
+                            <td>$fieldLabelMargin</td>
+                            <td>Spacing of a field label. Can be vertical of horizontal depending on form layout.</td>
+                            <td>.5rem</td>
+                        </tr>
+                        <tr>
+                            <td>$helperTextMargin</td>
+                            <td>Top spacing of a helper text.</td>
+                            <td>.5rem</td>
+                        </tr>
+                        <tr>
+                            <td>$spacer</td>
+                            <td>Base value to use in spacing utilities, view spacing documentation for details.</td>
+                            <td>.5rem</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <p>There are two ways to use these variables, one option is getting the source code of PrimeFlex from github, compile your own primeflex and importing the css file. Other
+                alternative is importing your own variables to override the defaults if your application can import scss files. Example below overrides breakpoints;
+            </p>
+
+            <p><b>_overrides.scss</b></p>
+<CodeHighlight lang="css">
+$sm:640px;
+$md:720px;
+$lg:960px;
+$xl:1080px;
+</CodeHighlight>
+
+            <CodeHighlight lang="css">
+import './assets/myoverrides.scss';
+import 'primeflex/src/_variables.css';
+import 'primeflex/src/_grid.css';
+import 'primeflex/src/_formlayour.css';
+import 'primeflex/src/_display.css';
+import 'primeflex/src/_text.css';
+import 'primeflex/src/flexbox/_flexbox.css';
+import 'primeflex/src/_spacing.css';
+import 'primeflex/src/_elevation.css';
+</CodeHighlight>
+        </div>
+    </div>
+</template>
+
+<script>
\ No newline at end of file