# Documentation: General Docs Product documentation, plugin reference, and online help

- Introduction
- Gulp Installation For Advanced Usage
- Build.json For Gulp Usage
- Configuration JS
- Layout Options
- Skins & Themes
- Seed & Slim Projects
- File Structure
- Plugin Reference & Dependency
- RTL Support
- Product Support
- Changing Component Colors
- Browser Support
- Components

## Introduction First of all, thank you so much for supporting our product! We are excited to have you as our customer and as with any Theme and/or Product, good documentation is essential to provide you with that first solid impression and we hope we have delivered on that expectation.

You can use the Table of Contents below to quickly jump to each section and find a quick reference to all the pages that we currently have available. However, if you do find something missing, do feel free to voice your opinion and/or requests on our Support Forum! We check these on a near daily basis and many customers have already contributed great ideas that have made it into updates of the Theme and the documentation!

Once again it is great to have you onboard and thank you -very- much for supporting this project!

This template and projects demonstrates the core principles and concepts of how you can integrate SmartAdmin 4 with your favorite backend platform. We aim, and do our best, to create a reference project based on community adopted guidelines and principles. That said, with our years of experience and our focus on quality we believe that this template will provide you with a great starting point that you can use for your own project purposes and customizations.

What this template, and documentation is not however, is a tutorial and/or introduction in all things HTML. For that we would kindly ask you to check the Resources listed below and go through all the pages for all the components, each component has either a link to its documentation source or examples of usage. Some level of knowledge on these topics will be required when explaining and discussing the theme and project, but we will do our best to ensure that all levels of experience can benefit and read along.

Where to Start?

The best area to start is with this documentation page. If you are looking for a blank slate, a nice bet would be to go with Blank Page, it has everything you need to get started with the barebone essentials only.

## Gulp Installation For Advanced Usage This webapp UI toolkit is based on Bootstrap 4 framework that provides a complete frontend user interface to build any type of web or mobile application. The package includes state of the art build tools to manage and deploy project assets with ease. This documentation will provide information you need to be able to use SmartAdmin WebApp in your applications, customising it to match your development needs and requirements at a fast pace environment.
This section guides you to install all required software and libraries in order to fully utilize this UI toolkit for your project(s).
Watch the video ►

1. Install Git (important)

   Before you start using Git, you have to make it available on your computer. Even if it’s already installed, it’s probably a good idea to update to the latest version. You can either install it as a package or via another installer, or download the source code and compile it yourself

2. Install Node.js

   Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js is required in order to run the application build tools. Download the latest version of Node and install it: nodejs.org/en/download/

3. Install NPM

   Npm is the package manager for JavaScript and the world’s largest software registry. Npm is a separate project from Node.js, and tends to update more frequently. As a result, even if you’ve just downloaded Node.js (and therefore npm), you’ll probably need to update your npm.

   `npm install npm@latest -g`

   Verify that npm in successfully installed, and version of installed npm will appear.

   `npm --version`
4. Install Gulp

   Gulp is a toolkit that helps you automate your time-consuming tasks in development workflow. To install gulp globally.

   `npm install gulp-cli -g`

   If you have previously installed a version of `gulp` globally, please remove it to make sure old version doesn't collide with new `gulp-cli`

   `npm rm --global gulp`

   Verify that gulp in successfully installed, and version of installed gulp will appear.

   `gulp --version`
5. Install NPM Packages

   NPM packages are a great way to ensure your files are up to date and everyone in your development tree is using the same version for the files. To install the npm you simple type:

   `npm install`
   You may or may not see some messages regarding vulnerabilities, we and the npm community, are aware of these issues and you can choose to ignore them or upgrade your jquery to the latest version (warning: doing so may break IE10 Datatables responsive plugin)

   Check outdated files and versions by typing:

   `npm outdated`

   If you are updating the npm packages, please be sure to read their changelogs for any breaking changes before you do any major update. To update a package, simple open your package.json file and change the version number run `npm i` command

6. Build project

   Once all your NPM packages are installed you can now run the command to build your project. The build project will compile your project and create the necessary HTML files, CSS, and JS scripts related for each page. Once the compilation is completed, gulp will switch to 'watch' mode and watch for changes in your JS/HBS templates/SCSS files. Any changes you make, gulp will auto compile the project in seconds.

   `gulp build`

   Once the compilation is complete, you can go to http://localhost:4000 to view your compiled project

7. Other commands

   Gulp watch will initialize the file watch process and start the server

   `gulp watch`

   Gulp build-nav will build the _nav.hbs file from your nav.json file

   `gulp build-nav`

## Build.json For Gulp Usage Configure your project files `build.json`. You can completely slim down your project through the build.json file.

File app.config.js contents

    {
    	"config": {
    		"debug": false,
    		"data" : {
    			"app": "SmartAdmin",
    			"app-name": "SmartAdmin WebApp",
    			"app-flavor": "SmartAdmin WebApp",
    			"app-flavor-subscript": "",
    			"user": "Dr. Codex Lantern",
    			"email": "drlantern@gotbootstrap.com",
    			"twitter": "codexlantern",
    			"avatar": "avatar-admin.png",
    			"version": "4.6.0",
    			"bs4v": "4.6.0",
    			"logo": "logo.png",
    			"logo-m": "logo.png",
    			"copyright": "2024 © SmartAdmin by&nbsp;<a href='https://www.gotbootstrap.com' class='text-primary fw-500' title='gotbootstrap.com' target='_blank'>gotbootstrap.com</a>",
    			"copyright-inverse": "2024 © SmartAdmin by&nbsp;<a href='https://www.gotbootstrap.com' class='text-white opacity-40 fw-500' title='gotbootstrap.com' target='_blank'>gotbootstrap.com</a>",
    			"iconPrefix": "fal",
    			"layoutSettings": true,
    			"chatInterface": true,
    			"shortcutMenu": true,
    			"appLayoutShortcut": true,
    			"appShortcutModal": true,
    			"appHeader": true,
    			"appFooter": true,
    			"appSidebar": true
    		},
    		"compile": {
    			"jsUglify": false,
    			"cssMinify": false,
    			"jsSourcemaps": false,
    			"cssSourcemaps": true,
    			"autoprefixer": true,
    			"seedOnly": false,
    			"rtl": false
    		},
    		"path": {
    			"src": "./src",
    			"node_modules": "./node_modules",
    			"exportPath": "./src/template/include/_nav.hbs",
    			"outputPath": "./src/template/include"
    		},
    		"dist": {
    			"theme": {
    				"path": "./dist"
    			}
    		}
    	},
    	"build": {
    		"vendors": {
    			"base": {
    				"src": {
    					"required": {
    						"pace-js": {
    							"scripts": [
    								"{$config.path.node_modules}/pace-js/pace.js"
    							]
    						},
    						"jquery": {
    							"scripts": [
    								"{$config.path.node_modules}/jquery/dist/jquery.js"
    							]
    						},
    						"jquery-ui": {
    							"scripts": [
    								"{$config.path.src}/custom/plugins/jquery-ui-cust/jquery-ui-cust.js"
    							]
    						},
    						"bootstrap": {
    							"styles": [
    								"{$config.path.src}/scss/bootstrap.scss"
    							],
    							"scripts": [
    								"{$config.path.node_modules}/popper.js/dist/umd/popper.js",
    								"{$config.path.node_modules}/bootstrap/dist/js/bootstrap.js"
    							]
    						},
    						"bootbox": {
    							"scripts": [
    								"{$config.path.src}/custom/plugins/bootbox/bootbox-cust.js",
    								"{$config.path.src}/custom/plugins/bootbox/bootbox-config.js"
    							]
    						},
    						"jquery-snippets": {
    							"scripts": [
    								"{$config.path.src}/custom/plugins/jquery-snippets/jquery-snippets.js"
    							]
    						},
    						"throttle-debounce": {
    							"scripts": [
    								"{$config.path.node_modules}/jquery-throttle-debounce/jquery.ba-throttle-debounce.js"
    							]
    						},
    						"webfonts": {
    							"styles": [
    								"{$config.path.src}/scss/app.icons.scss"
    							],
    							"fonts": [
    								"{$config.path.src}/custom/webfonts/fontawesome-pro-master/webfonts/**",
    								"{$config.path.src}/custom/webfonts/nextgen-fonts-master/webfonts/**",
    								"{$config.path.src}/custom/webfonts/plugins/summernote/**"
    							]
    						}
    					},
    					"optional": {
    						"jquery-slimscroll": {
    							"scripts": [
    								"{$config.path.node_modules}/jquery-slimscroll/jquery.slimscroll.js"
    							]
    						},
    						"waves": {
    							"scripts": [
    								"{$config.path.node_modules}/node-waves/dist/waves.js"
    							]
    						},
    						"smartpanels": {
    							"scripts": [
    								"{$config.path.src}/custom/plugins/smartpanels/smartpanels.js"
    							]
    						},
    						"app-images" : {
    							"images" : [
    								"{$config.path.src}/img/**"
    							]
    						},
    						"app-data": {
    							"json" : [
    								"{$config.path.src}/custom/webfonts/fontawesome-pro-master/used-for-demo-pages/*.json",
    								"{$config.path.src}/custom/webfonts/nextgen-fonts-master/used-for-demo-pages/*.json",
    								"{$config.path.src}/custom/plugins/datatables/demo-data/*.json",
    								"{$config.path.src}/custom/docs-data/*.json",
    								"{$config.path.src}/custom/lang/*.json"

    							]
    						},
    						"app-media": {
    							"media" : [
    								"{$config.path.src}/custom/media/**"
    							]
    						}
    					}
    				},
    				"bundle": {
    					"styles": "{$config.output}/css/vendors.bundle.css",
    					"scripts": "{$config.output}/js/vendors.bundle.js",
    					"images": "{$config.output}/img",
    					"fonts": "{$config.output}/webfonts",
    					"json": "{$config.output}/media/data/",
    					"media": "{$config.output}/media"
    				}
    			},
    			"custom": {
    				"i18next": {
    					"src": {
    						"scripts": [
    							"{$config.path.node_modules}/i18next-client/i18next.js"
    						]
    					},
    					"bundle": {
    						"scripts": "{$config.output}/js/i18n/i18n.js"
    					}
    				},
    				"fontawesome": {
    					"light" : {
    						"src": {
    							"styles":[
    								"{$config.path.src}/custom/webfonts/fontawesome-pro-master/scss/light.scss"
    							]
    						},
    						"bundle": {
    							"styles": "{$config.output}/css/fa-light.scss"
    						}
    					},
    					"regular" : {
    						"src": {
    							"styles":[
    								"{$config.path.src}/custom/webfonts/fontawesome-pro-master/scss/regular.scss"
    							]
    						},
    						"bundle": {
    							"styles": "{$config.output}/css/fa-regular.scss"
    						}
    					},
    					"solid" : {
    						"src": {
    							"styles":[
    								"{$config.path.src}/custom/webfonts/fontawesome-pro-master/scss/solid.scss"
    							]
    						},
    						"bundle": {
    							"styles": "{$config.output}/css/fa-solid.scss"
    						}
    					},
    					"duotone" : {
    						"src": {
    							"styles":[
    								"{$config.path.src}/custom/webfonts/fontawesome-pro-master/scss/duotone.scss"
    							]
    						},
    						"bundle": {
    							"styles": "{$config.output}/css/fa-duotone.scss"
    						}
    					},
    					"brand" : {
    						"src": {
    							"styles":[
    								"{$config.path.src}/custom/webfonts/fontawesome-pro-master/scss/brands.scss"
    							]
    						},
    						"bundle": {
    							"styles": "{$config.output}/css/fa-brands.scss"
    						}
    					}
    				}
    			},
    			"addons": {
    				"statistics" : {
    					"dygraph" : {
    						"plugin" : {
    							"src": {
    								"styles":[
    									"{$config.path.node_modules}/dygraphs/dist/dygraph.css"
    								],
    								"scripts": [
    									"{$config.path.node_modules}/dygraphs/dist/dygraph.min.js"
    								]
    							},
    							"bundle": {
    								"styles": "{$config.output}/css/statistics/dygraph/dygraph.css",
    								"scripts": "{$config.output}/js/statistics/dygraph/dygraph.js"
    							}
    						},
    						"demo-data" : {
    							"src": {
    								"scripts": [
    									"{$config.path.src}/custom/demo-data/demo-data-dygraph.js"
    								]
    							},
    							"bundle": {
    								"scripts": "{$config.output}/js/statistics/demo-data/demo-data-dygraph.js"
    							}
    						}
    					},
    					"flotchart" : {
    						"src": {
    							"scripts": [
    								"{$config.path.node_modules}/flot/jquery.flot.js",
    								"{$config.path.node_modules}/flot/jquery.colorhelpers.js",
    								"{$config.path.node_modules}/flot/jquery.flot.canvas.js",
    								"{$config.path.node_modules}/flot/jquery.flot.categories.js",
    								"{$config.path.node_modules}/flot/jquery.flot.crosshair.js",
    								"{$config.path.node_modules}/flot/jquery.flot.errorbars.js",
    								"{$config.path.node_modules}/flot/jquery.flot.fillbetween.js",
    								"{$config.path.node_modules}/flot/jquery.flot.image.js",
    								"{$config.path.node_modules}/flot/jquery.flot.navigate.js",
    								"{$config.path.node_modules}/flot/jquery.flot.pie.js",
    								"{$config.path.node_modules}/flot/jquery.flot.resize.js",
    								"{$config.path.node_modules}/flot/jquery.flot.selection.js",
    								"{$config.path.node_modules}/flot/jquery.flot.stack.js",
    								"{$config.path.node_modules}/flot-spline/js/jquery.flot.spline.js",
    								"{$config.path.node_modules}/flot/jquery.flot.symbol.js",
    								"{$config.path.node_modules}/flot/jquery.flot.threshold.js",
    								"{$config.path.node_modules}/jquery.flot.tooltip/js/jquery.flot.tooltip.js",
    								"{$config.path.node_modules}/flot/jquery.flot.time.js"
    							]
    						},
    						"bundle": {"scripts": "{$config.output}/js/statistics/flot/flot.bundle.js"}
    					},
    					"chartjs" : {
    						"src": {
    							"styles":[
    								"{$config.path.node_modules}/chart.js/dist/Chart.css"
    							],
    							"scripts": [
    								"{$config.path.node_modules}/chart.js/dist/Chart.bundle.js"
    							]
    						},
    						"bundle": {
    							"styles": "{$config.output}/css/statistics/chartjs/chartjs.css",
    							"scripts": "{$config.output}/js/statistics/chartjs/chartjs.bundle.js"
    						}
    					},
    					"chartist" : {
    						"src": {
    							"styles":[
    								"{$config.path.src}/custom/plugins/chartist/chartist.scss"
    							],
    							"scripts": [
    								"{$config.path.node_modules}/chartist/dist/chartist.js"
    							]
    						},
    						"bundle": {
    							"styles": "{$config.output}/css/statistics/chartist/chartist.css",
    							"scripts": "{$config.output}/js/statistics/chartist/chartist.js"
    						}
    					},
    					"d3" : {
    						"src": {
    							"scripts": [
    								"{$config.path.node_modules}/d3/dist/d3.js"
    							]
    						},
    						"bundle": {
    							"scripts": "{$config.output}/js/statistics/d3/d3.js"
    						}
    					},
    					"c3" : {
    						"plugin": {
    							"src": {
    								"styles":[
    									"{$config.path.node_modules}/c3/c3.css"
    								],
    								"scripts": [
    									"{$config.path.node_modules}/c3/c3.js"
    								]
    							},
    							"bundle": {
    								"styles": "{$config.output}/css/statistics/c3/c3.css",
    								"scripts": "{$config.output}/js/statistics/c3/c3.js"
    							}
    						},
    						"demo-data": {
    							"src": {
    								"scripts": [
    									"{$config.path.src}/custom/demo-data/demo-c3.js"
    								]
    							},
    							"bundle": {
    								"scripts": "{$config.output}/js/statistics/demo-data/demo-c3.js"
    							}
    						}
    					},
    					"peity" : {
    						"src": {
    							"scripts": [
    								"{$config.path.node_modules}/peity/jquery.peity.js",
    								"{$config.path.src}/custom/plugins/peity/jquery.peity.config.js"
    							]
    						},
    						"bundle": {
    							"scripts": "{$config.output}/js/statistics/peity/peity.bundle.js"
    						}
    					},
    					"sparkline" : {
    						"src": {
    							"scripts": [
    								"{$config.path.node_modules}/jquery-sparkline/jquery.sparkline.js",
    								"{$config.path.src}/custom/plugins/jquery-sparkline/jquery-sparkline.config.js"
    							]
    						},
    						"bundle": {
    							"scripts": "{$config.output}/js/statistics/sparkline/sparkline.bundle.js"
    						}
    					},
    					"easypiechart" : {
    						"src": {
    							"scripts": [
    								"{$config.path.node_modules}/easy-pie-chart/dist/jquery.easypiechart.js",
    								"{$config.path.src}/custom/plugins/easy-pie-chart/jquery.easypiechart.config.js"
    							]
    						},
    						"bundle": {
    							"scripts": "{$config.output}/js/statistics/easypiechart/easypiechart.bundle.js"
    						}
    					}
    				},
    				"datagrid" : {
    					"datatables" : {
    						"core" : {
    							"src": {
    								"styles":[
    									"{$config.path.node_modules}/datatables.net-bs4/css/dataTables.bootstrap4.css",
    									"{$config.path.node_modules}/datatables.net-autofill-bs4/css/autoFill.bootstrap4.css",
    									"{$config.path.node_modules}/datatables.net-buttons-bs4/css/buttons.bootstrap4.css",
    									"{$config.path.node_modules}/datatables.net-colreorder-bs4/css/colReorder.bootstrap4.css",
    									"{$config.path.node_modules}/datatables.net-fixedcolumns-bs4/css/fixedColumns.bootstrap4.css",
    									"{$config.path.node_modules}/datatables.net-fixedheader-bs4/css/fixedHeader.bootstrap4.css",
    									"{$config.path.node_modules}/datatables.net-keytable-bs4/css/keyTable.bootstrap4.css",
    									"{$config.path.node_modules}/datatables.net-responsive-bs4/css/responsive.bootstrap4.css",
    									"{$config.path.node_modules}/datatables.net-rowgroup-bs4/css/rowGroup.bootstrap4.css",
    									"{$config.path.node_modules}/datatables.net-rowreorder-bs4/css/rowReorder.bootstrap4.css",
    									"{$config.path.node_modules}/datatables.net-scroller-bs4/css/scroller.bootstrap4.css",
    									"{$config.path.node_modules}/datatables.net-select-bs4/css/select.bootstrap4.css",
    									"{$config.path.src}/custom/plugins/datatables/datatables.styles.app.scss"
    								],
    								"scripts": [
    									"{$config.path.node_modules}/datatables.net/js/jquery.dataTables.js",
    									"{$config.path.node_modules}/datatables.net-bs4/js/dataTables.bootstrap4.js",
    									"{$config.path.src}/custom/plugins/datatables/datatables.styles.app.js",
    									"{$config.path.node_modules}/datatables.net-autofill/js/dataTables.autoFill.js",
    									"{$config.path.node_modules}/datatables.net-autofill-bs4/js/autoFill.bootstrap4.js",
    									"{$config.path.node_modules}/datatables.net-buttons/js/dataTables.buttons.js",
    									"{$config.path.node_modules}/datatables.net-buttons-bs4/js/buttons.bootstrap4.js",
    									"{$config.path.node_modules}/datatables.net-buttons/js/buttons.html5.js",
    									"{$config.path.node_modules}/datatables.net-buttons/js/buttons.print.js",
    									"{$config.path.node_modules}/datatables.net-buttons/js/buttons.colVis.js",
    									"{$config.path.src}/custom/plugins/datatables/datatables.styles.buttons.app.js",
    									"{$config.path.node_modules}/datatables.net-colreorder/js/dataTables.colReorder.js",
    									"{$config.path.node_modules}/datatables.net-colreorder-bs4/js/colReorder.bootstrap4.js",
    									"{$config.path.node_modules}/datatables.net-fixedcolumns/js/dataTables.fixedColumns.js",
    									"{$config.path.node_modules}/datatables.net-fixedcolumns-bs4/js/fixedColumns.bootstrap4.js",
    									"{$config.path.node_modules}/datatables.net-fixedheader/js/dataTables.fixedHeader.js",
    									"{$config.path.node_modules}/datatables.net-fixedheader-bs4/js/fixedHeader.bootstrap4.js",
    									"{$config.path.node_modules}/datatables.net-keytable/js/dataTables.keyTable.js",
    									"{$config.path.node_modules}/datatables.net-keytable-bs4/js/keyTable.bootstrap4.js",
    									"{$config.path.node_modules}/datatables.net-responsive/js/dataTables.responsive.js",
    									"{$config.path.node_modules}/datatables.net-responsive-bs4/js/responsive.bootstrap4.js",
    									"{$config.path.node_modules}/datatables.net-rowgroup/js/dataTables.rowGroup.js",
    									"{$config.path.node_modules}/datatables.net-rowgroup-bs4/js/rowGroup.bootstrap4.js",
    									"{$config.path.node_modules}/datatables.net-rowreorder/js/dataTables.rowReorder.js",
    									"{$config.path.node_modules}/datatables.net-rowreorder-bs4/js/rowReorder.bootstrap4.js",
    									"{$config.path.node_modules}/datatables.net-scroller/js/dataTables.scroller.js",
    									"{$config.path.node_modules}/datatables.net-scroller-bs4/js/scroller.bootstrap4.js",
    									"{$config.path.node_modules}/datatables.net-select/js/dataTables.select.js",
    									"{$config.path.node_modules}/datatables.net-select-bs4/js/select.bootstrap4.js",
    									"{$config.path.src}/custom/plugins/datatables-alteditor/datatables-alteditor.js"
    								]
    							},
    							"bundle": {
    								"styles": "{$config.output}/css/datagrid/datatables/datatables.bundle.css",
    								"scripts": "{$config.output}/js/datagrid/datatables/datatables.bundle.js"
    							}
    						},
    						"export" : {
    							"src": {
    								"scripts": [
    									"{$config.path.node_modules}/jszip/dist/jszip.js",
    									"{$config.path.node_modules}/pdfmake/build/pdfmake.js",
    									"{$config.path.node_modules}/pdfmake/build/vfs_fonts.js"
    								]
    							},
    							"bundle": {
    								"scripts": "{$config.output}/js/datagrid/datatables/datatables.export.js"
    							}
    						}
    					}
    				},
    				"notifications" : {
    					"toastr" : {
    						"src": {
    							"styles":[
    								"{$config.path.node_modules}/toastr/toastr.scss",
    								"{$config.path.src}/custom/plugins/toastr/toastr-custom.scss"
    							],
    							"scripts": [
    								"{$config.path.node_modules}/toastr/toastr.js"
    							]
    						},
    						"bundle": {
    							"styles": "{$config.output}/css/notifications/toastr/toastr.css",
    							"scripts": "{$config.output}/js/notifications/toastr/toastr.js"
    						}
    					},
    					"sweetalert2" : {
    						"src": {
    							"styles":[
    								"{$config.path.src}/custom/plugins/sweetalert2/sweetalert2.scss"
    							],
    							"scripts": [
    								"{$config.path.node_modules}/es6-promise-polyfill/promise.js",
    								"{$config.path.node_modules}/sweetalert2/dist/sweetalert2.js"
    							]
    						},
    						"bundle": {
    							"styles": "{$config.output}/css/notifications/sweetalert2/sweetalert2.bundle.css",
    							"scripts": "{$config.output}/js/notifications/sweetalert2/sweetalert2.bundle.js"
    						}
    					}
    				},
    				"formplugins" : {
    					"colorpicker" : {
    						"src": {
    							"styles":[
    								"{$config.path.node_modules}/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css"
    							],
    							"scripts": [
    								"{$config.path.node_modules}/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.js"
    							]
    						},
    						"bundle": {
    							"styles": "{$config.output}/css/formplugins/bootstrap-colorpicker/bootstrap-colorpicker.css",
    							"scripts": "{$config.output}/js/formplugins/bootstrap-colorpicker/bootstrap-colorpicker.js"
    						}
    					},
    					"datepicker" : {
    						"src": {
    							"styles": [
    								"{$config.path.node_modules}/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css",
    								"{$config.path.src}/custom/plugins/datepicker/datepicker-custom.scss"
    							],
    							"scripts": [
    								"{$config.path.node_modules}/bootstrap-datepicker/dist/js/bootstrap-datepicker.js"
    							]
    						},
    						"bundle": {
    							"styles": "{$config.output}/css/formplugins/bootstrap-datepicker/bootstrap-datepicker.css",
    							"scripts": "{$config.output}/js/formplugins/bootstrap-datepicker/bootstrap-datepicker.js"
    						}
    					},
    					"daterangepicker" : {
    						"src": {
    							"styles": [
    								"{$config.path.node_modules}/bootstrap-daterangepicker/daterangepicker.css",
    								"{$config.path.src}/custom/plugins/daterangepicker/daterangepicker-custom.scss"
    							],
    							"scripts": [
    								"{$config.path.node_modules}/bootstrap-daterangepicker/daterangepicker.js"
    							]
    						},
    						"bundle": {
    							"styles": "{$config.output}/css/formplugins/bootstrap-daterangepicker/bootstrap-daterangepicker.css",
    							"scripts": "{$config.output}/js/formplugins/bootstrap-daterangepicker/bootstrap-daterangepicker.js"
    						}
    					},
    					"dropzone" : {
    						"src": {
    							"styles": [
    								"{$config.path.node_modules}/dropzone/dist/dropzone.css",
    								"{$config.path.src}/custom/plugins/dropzone/dropzone-custom.scss"
    							],
    							"scripts": [
    								"{$config.path.node_modules}/dropzone/dist/dropzone.js"
    							]
    						},
    						"bundle": {
    							"styles": "{$config.output}/css/formplugins/dropzone/dropzone.css",
    							"scripts": "{$config.output}/js/formplugins/dropzone/dropzone.js"
    						}
    					},
    					"ion-rangeslider": {
    						"src": {
    							"styles": [
    								"{$config.path.node_modules}/ion-rangeslider/css/ion.rangeSlider.css",
    								"{$config.path.src}/custom/plugins/ion-rangeslider/ion.rangeslider-custom.scss"
    							],
    							"scripts": [
    								"{$config.path.node_modules}/ion-rangeslider/js/ion.rangeSlider.js"
    							]
    						},
    						"bundle": {
    							"styles": "{$config.output}/css/formplugins/ion-rangeslider/ion-rangeslider.css",
    							"scripts": "{$config.output}/js/formplugins/ion-rangeslider/ion-rangeslider.js"
    						}
    					},
    					"inputmusk": {
    						"src": {
    							"scripts": [
    								"{$config.path.node_modules}/inputmask/dist/jquery.inputmask.bundle.js"
    							]
    						},
    						"bundle": {
    							"scripts": "{$config.output}/js/formplugins/inputmask/inputmask.bundle.js"
    						}
    					},
    					"cropper": {
    						"src": {
    							"styles": [
    								"{$config.path.node_modules}/cropperjs/dist/cropper.css",
    								"{$config.path.src}/custom/plugins/cropperjs/cropper-demo.scss"
    							],
    							"scripts": [
    								"{$config.path.node_modules}/cropperjs/dist/cropper.js",
    								"{$config.path.node_modules}/jquery-cropper/dist/jquery-cropper.js"

    							]
    						},
    						"bundle": {
    							"styles": "{$config.output}/css/formplugins/cropperjs/cropper.css",
    							"scripts": "{$config.output}/js/formplugins/cropperjs/cropper.js"
    						}
    					},
    					"select2": {
    						"src": {
    							"styles": [
    								"{$config.path.node_modules}/select2/dist/css/select2.css",
    								"{$config.path.src}/custom/plugins/select2/select2-cust.scss"
    							],
    							"scripts": [
    								"{$config.path.node_modules}/select2/dist/js/select2.full.js"
    							]
    						},
    						"bundle": {
    							"styles": "{$config.output}/css/formplugins/select2/select2.bundle.css",
    							"scripts": "{$config.output}/js/formplugins/select2/select2.bundle.js"
    						}
    					},
    					"summernote": {
    						"src": {
    							"styles": [
    								"{$config.path.node_modules}/summernote/dist/summernote-bs4.css",
    								"{$config.path.src}/custom/plugins/summernote/summernote-custom.scss"
    							],
    							"scripts": [
    								"{$config.path.node_modules}/summernote/dist/summernote-bs4.js"
    							]
    						},
    						"bundle": {
    							"styles": "{$config.output}/css/formplugins/summernote/summernote.css",
    							"scripts": "{$config.output}/js/formplugins/summernote/summernote.js"
    						}
    					},
    					"markdown": {
    						"src": {
    							"styles": [
    								"{$config.path.node_modules}/bootstrap-markdown/css/bootstrap-markdown.min.css"
    							],
    							"scripts": [
    								"{$config.path.node_modules}/markdown/lib/markdown.js",
    								"{$config.path.node_modules}/bootstrap-markdown/js/bootstrap-markdown.js"
    							]
    						},
    						"bundle": {
    							"styles": "{$config.output}/css/formplugins/bootstrap-markdown/bootstrap-markdown.css",
    							"scripts": "{$config.output}/js/formplugins/bootstrap-markdown/bootstrap-markdown.js"
    						}
    					},
    					"nouislider": {
    						"src": {
    							"styles": [
    								"{$config.path.node_modules}/nouislider/distribute/nouislider.css"
    							],
    							"scripts": [
    								"{$config.path.node_modules}/nouislider/distribute/nouislider.js"
    							]
    						},
    						"bundle": {
    							"styles": "{$config.output}/css/formplugins/nouislider/nouislider.css",
    							"scripts": "{$config.output}/js/formplugins/nouislider/nouislider.js"
    						}
    					},
    					"wizard": {
    						"src": {
    							"styles": [
    								"{$config.path.node_modules}/smartwizard/dist/css/smart_wizard.css",
    								"{$config.path.node_modules}/smartwizard/dist/css/smart_wizard_theme_arrows.css",
    								"{$config.path.node_modules}/smartwizard/dist/css/smart_wizard_theme_circles.css",
    								"{$config.path.node_modules}/smartwizard/dist/css/smart_wizard_theme_dots.css"
    							],
    							"scripts": [
    								"{$config.path.node_modules}/smartwizard/dist/js/jquery.smartWizard.js"
    							]
    						},
    						"bundle": {
    							"styles": "{$config.output}/css/formplugins/smartwizard/smartwizard.css",
    							"scripts": "{$config.output}/js/formplugins/smartwizard/smartwizard.js"
    						}
    					}
    				},
    				"miscellaneous" : {
    					"fullcalendar" : {
    						"src": {
    							"styles":[
    								"{$config.path.node_modules}/@fullcalendar/core/main.css",
    								"{$config.path.node_modules}/@fullcalendar/daygrid/main.css",
    								"{$config.path.node_modules}/@fullcalendar/list/main.css",
    								"{$config.path.node_modules}/@fullcalendar/timegrid/main.css",
    								"{$config.path.node_modules}/@fullcalendar/bootstrap/main.css",
    								"{$config.path.src}/custom/plugins/@fullcalendar/core-main-override.scss"
    							],
    							"scripts": [
    								"{$config.path.node_modules}/@fullcalendar/core/main.js",
    								"{$config.path.node_modules}/@fullcalendar/daygrid/main.js",
    								"{$config.path.node_modules}/@fullcalendar/list/main.js",
    								"{$config.path.node_modules}/@fullcalendar/timegrid/main.js",
    								"{$config.path.node_modules}/@fullcalendar/interaction/main.js",
    								"{$config.path.src}/custom/plugins/@fullcalendar/bootstrap-main-cust.js"
    							]
    						},
    						"bundle": {
    							"styles": "{$config.output}/css/miscellaneous/fullcalendar/fullcalendar.bundle.css",
    							"scripts": "{$config.output}/js/miscellaneous/fullcalendar/fullcalendar.bundle.js"
    						}
    					},
    					"lightgallery" : {
    						"src": {
    							"styles":[
    								"{$config.path.node_modules}/justifiedGallery/dist/css/justifiedGallery.css",
    								"{$config.path.src}/custom/plugins/lightgallery/lightgallery.scss"
    							],
    							"scripts": [
    								"{$config.path.node_modules}/justifiedGallery/dist/js/jquery.justifiedGallery.js",
    								"{$config.path.node_modules}/jquery-mousewheel/jquery.mousewheel.js",
    								"{$config.path.node_modules}/lightgallery/src/js/lightgallery.js",
    								"{$config.path.node_modules}/lightgallery/modules/lg-autoplay.js",
    								"{$config.path.node_modules}/lightgallery/modules/lg-fullscreen.js",
    								"{$config.path.node_modules}/lightgallery/modules/lg-hash.js",
    								"{$config.path.node_modules}/lightgallery/modules/lg-pager.js",
    								"{$config.path.node_modules}/lightgallery/modules/lg-thumbnail.js",
    								"{$config.path.node_modules}/lightgallery/modules/lg-zoom.js"
    							]
    						},
    						"bundle": {
    							"styles": "{$config.output}/css/miscellaneous/lightgallery/lightgallery.bundle.css",
    							"scripts": "{$config.output}/js/miscellaneous/lightgallery/lightgallery.bundle.js"
    						}
    					},
    					"smartvoice" : {
    						"src": {
    							"scripts": [
    								"{$config.path.src}/custom/plugins/smartvoice/smartvoice-config.js",
    								"{$config.path.src}/custom/plugins/smartvoice/smartvoice.js"
    							]
    						},
    						"bundle": {
    							"scripts": "{$config.output}/js/miscellaneous/lightgallery/smartvoice.bundle.js"
    						}
    					},
    					"reactions" : {
    						"src": {
    							"styles":[
    								"{$config.path.src}/custom/plugins/reactions/reactions.scss"
    							]
    						},
    						"bundle": {
    							"styles": "{$config.output}/css/miscellaneous/reactions/reactions.css"
    						}
    					},
    					"jqvmap" : {
    						"core" : {
    							"src": {
    								"styles":[
    									"{$config.path.node_modules}/jqvmap/dist/jqvmap.css",
    									"{$config.path.src}/custom/plugins/jqvmap/jqvmap-cust.scss"
    								],
    								"scripts": [
    									"{$config.path.node_modules}/jqvmap/dist/jquery.vmap.js",
    									"{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.world.js"
    								]
    							},
    							"bundle": {
    								"styles": "{$config.output}/css/miscellaneous/jqvmap/jqvmap.bundle.css",
    								"scripts": "{$config.output}/js/miscellaneous/jqvmap/jqvmap.bundle.js"
    							}
    						},
    						"maps" : {
    							"algeria" : {
    								"src": {
    									"scripts": [
    										"{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.algeria.js"
    									]
    								},
    								"bundle": {
    									"scripts": "{$config.output}/js/miscellaneous/jqvmap/maps/jquery.vmap.algeria.js"
    								}
    							},
    							"argentina" : {
    								"src": {
    									"scripts": [
    										"{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.argentina.js"
    									]
    								},
    								"bundle": {
    									"scripts": "{$config.output}/js/miscellaneous/jqvmap/maps/jquery.vmap.argentina.js"
    								}
    							},
    							"brazil" : {
    								"src": {
    									"scripts": [
    										"{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.brazil.js"
    									]
    								},
    								"bundle": {
    									"scripts": "{$config.output}/js/miscellaneous/jqvmap/maps/jquery.vmap.brazil.js"
    								}
    							},
    							"canada" : {
    								"src": {
    									"scripts": [
    										"{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.canada.js"
    									]
    								},
    								"bundle": {
    									"scripts": "{$config.output}/js/miscellaneous/jqvmap/maps/jquery.vmap.canada.js"
    								}
    							},
    							"europe" : {
    								"src": {
    									"scripts": [
    										"{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.europe.js"
    									]
    								},
    								"bundle": {
    									"scripts": "{$config.output}/js/miscellaneous/jqvmap/maps/jquery.vmap.europe.js"
    								}
    							},
    							"france" : {
    								"src": {
    									"scripts": [
    										"{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.france.js"
    									]
    								},
    								"bundle": {
    									"scripts": "{$config.output}/js/miscellaneous/jqvmap/maps/jquery.vmap.france.js"
    								}
    							},
    							"germany" : {
    								"src": {
    									"scripts": [
    										"{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.germany.js"
    									]
    								},
    								"bundle": {
    									"scripts": "{$config.output}/js/miscellaneous/jqvmap/maps/jquery.vmap.germany.js"
    								}
    							},
    							"greece" : {
    								"src": {
    									"scripts": [
    										"{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.greece.js"
    									]
    								},
    								"bundle": {
    									"scripts": "{$config.output}/js/miscellaneous/jqvmap/maps/jquery.vmap.greece.js"
    								}
    							},
    							"iran" : {
    								"src": {
    									"scripts": [
    										"{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.iran.js"
    									]
    								},
    								"bundle": {
    									"scripts": "{$config.output}/js/miscellaneous/jqvmap/maps/jquery.vmap.iran.js"
    								}
    							},
    							"iraq" : {
    								"src": {
    									"scripts": [
    										"{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.iraq.js"
    									]
    								},
    								"bundle": {
    									"scripts": "{$config.output}/js/miscellaneous/jqvmap/maps/jquery.vmap.iraq.js"
    								}
    							},
    							"russia" : {
    								"src": {
    									"scripts": [
    										"{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.russia.js"
    									]
    								},
    								"bundle": {
    									"scripts": "{$config.output}/js/miscellaneous/jqvmap/maps/jquery.vmap.russia.js"
    								}
    							},
    							"tunisia" : {
    								"src": {
    									"scripts": [
    										"{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.tunisia.js"
    									]
    								},
    								"bundle": {
    									"scripts": "{$config.output}/js/miscellaneous/jqvmap/maps/jquery.vmap.tunisia.js"
    								}
    							},
    							"turkey" : {
    								"src": {
    									"scripts": [
    										"{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.turkey.js"
    									]
    								},
    								"bundle": {
    									"scripts": "{$config.output}/js/miscellaneous/jqvmap/maps/jquery.vmap.turkey.js"
    								}
    							},
    							"usa" : {
    								"src": {
    									"scripts": [
    										"{$config.path.node_modules}/jqvmap/dist/maps/jquery.vmap.usa.js"
    									]
    								},
    								"bundle": {
    									"scripts": "{$config.output}/js/miscellaneous/jqvmap/maps/jquery.vmap.usa.js"
    								}
    							}
    						}
    					},
    					"nestable" : {
    						"src": {
    							"styles":[
    								"{$config.path.src}/custom/plugins/nestable/nestable.scss"
    							],
    							"scripts": [
    								"{$config.path.node_modules}/nestable/jquery.nestable.js"
    							]
    						},
    						"bundle": {
    							"styles": "{$config.output}/css/miscellaneous/nestable/nestable.css",
    							"scripts": "{$config.output}/js/miscellaneous/nestable/nestable.js"
    						}
    					},
    					"treeview" : {
    						"src": {
    							"styles":[
    								"{$config.path.src}/custom/plugins/treeview/treeview.scss"
    							],
    							"scripts": [
    								"{$config.path.src}/custom/plugins/treeview/treeview.js"
    							]
    						},
    						"bundle": {
    							"styles": "{$config.output}/css/miscellaneous/treeview/treeview.css",
    							"scripts": "{$config.output}/js/miscellaneous/treeview/treeview.js"
    						}
    					}
    				},
    				"dependencyplugins" : {
    					"moment" : {
    						"src": {
    							"scripts": [
    								"{$config.path.node_modules}/moment/min/moment.min.js"
    							]
    						},
    						"bundle": {
    							"scripts": "{$config.output}/js/dependency/moment/moment.js"
    						}
    					}
    				}
    			}
    		},
    		"app": {
    			"base": {
    				"src": {
    					"styles": [
    						"{$config.path.src}/scss/app.core.scss"
    					],
    					"scripts": [
    						"{$config.path.src}/js/_config/app.config.js",
    						"{$config.path.src}/js/_modules/app.navigation.js",
    						"{$config.path.src}/js/_modules/app.menu.slider.js",
    						"{$config.path.src}/js/_modules/app.init.js",
    						"{$config.path.src}/js/_modules/app.resize.trigger.js",
    						"{$config.path.src}/js/_modules/app.scroll.trigger.js",
    						"{$config.path.src}/js/_modules/app.domReady.js",
    						"{$config.path.src}/js/_modules/app.orientationchange.js",
    						"{$config.path.src}/js/_modules/app.window.load.js",
    						"{$config.path.src}/js/_config/app.colors.js"

    					]
    				},
    				"bundle": {
    					"styles": "{$config.output}/css/app.bundle.css",
    					"scripts": "{$config.output}/js/app.bundle.js"
    				}
    			},
    			"custom": {
    				"auth" : {
    					"login" : {
    						"src": {
    							"styles":[
    								"{$config.path.src}/content/pages/page_login_alt/page-login-alt.scss"
    							]
    						},
    						"bundle": {
    							"styles": "{$config.output}/css/page-login-alt.css"
    						}
    					}
    				},
    				"invoice" : {
    					"src": {
    						"styles":[
    							"{$config.path.src}/content/pages/page_invoice/page-invoice.scss"
    						]
    					},
    					"bundle": {
    						"styles": "{$config.output}/css/page-invoice.css"
    					}
    				}
    			},
    			"demo": {
    				"theme": {
    					"src": {
    						"styles": [
    							"{$config.path.src}/scss/theme-demo.scss"
    						]
    					},
    					"bundle": {
    						"styles": "{$config.output}/css/theme-demo.css"

    					}
    				}
    			},
    			"themes": {
    				"theme-1": {
    					"src": {
    						"styles": [
    							"{$config.path.src}/scss/_themes/cust-theme-1.scss"
    						]
    					},
    					"bundle": {
    						"styles": "{$config.output}/css/themes/cust-theme-1.css"

    					}
    				},
    				"theme-2": {
    					"src": {
    						"styles": [
    							"{$config.path.src}/scss/_themes/cust-theme-2.scss"
    						]
    					},
    					"bundle": {
    						"styles": "{$config.output}/css/themes/cust-theme-2.css"

    					}
    				},
    				"theme-3": {
    					"src": {
    						"styles": [
    							"{$config.path.src}/scss/_themes/cust-theme-3.scss"
    						]
    					},
    					"bundle": {
    						"styles": "{$config.output}/css/themes/cust-theme-3.css"

    					}
    				},
    				"theme-4": {
    					"src": {
    						"styles": [
    							"{$config.path.src}/scss/_themes/cust-theme-4.scss"
    						]
    					},
    					"bundle": {
    						"styles": "{$config.output}/css/themes/cust-theme-4.css"

    					}
    				},
    				"theme-5": {
    					"src": {
    						"styles": [
    							"{$config.path.src}/scss/_themes/cust-theme-5.scss"
    						]
    					},
    					"bundle": {
    						"styles": "{$config.output}/css/themes/cust-theme-5.css"

    					}
    				},
    				"theme-6": {
    					"src": {
    						"styles": [
    							"{$config.path.src}/scss/_themes/cust-theme-6.scss"
    						]
    					},
    					"bundle": {
    						"styles": "{$config.output}/css/themes/cust-theme-6.css"

    					}
    				},
    				"theme-7": {
    					"src": {
    						"styles": [
    							"{$config.path.src}/scss/_themes/cust-theme-7.scss"
    						]
    					},
    					"bundle": {
    						"styles": "{$config.output}/css/themes/cust-theme-7.css"

    					}
    				},
    				"theme-8": {
    					"src": {
    						"styles": [
    							"{$config.path.src}/scss/_themes/cust-theme-8.scss"
    						]
    					},
    					"bundle": {
    						"styles": "{$config.output}/css/themes/cust-theme-8.css"

    					}
    				},
    				"theme-9": {
    					"src": {
    						"styles": [
    							"{$config.path.src}/scss/_themes/cust-theme-9.scss"
    						]
    					},
    					"bundle": {
    						"styles": "{$config.output}/css/themes/cust-theme-9.css"

    					}
    				},
    				"theme-10": {
    					"src": {
    						"styles": [
    							"{$config.path.src}/scss/_themes/cust-theme-10.scss"
    						]
    					},
    					"bundle": {
    						"styles": "{$config.output}/css/themes/cust-theme-10.css"

    					}
    				},
    				"theme-11": {
    					"src": {
    						"styles": [
    							"{$config.path.src}/scss/_themes/cust-theme-11.scss"
    						]
    					},
    					"bundle": {
    						"styles": "{$config.output}/css/themes/cust-theme-11.css"

    					}
    				},
    				"theme-12": {
    					"src": {
    						"styles": [
    							"{$config.path.src}/scss/_themes/cust-theme-12.scss"
    						]
    					},
    					"bundle": {
    						"styles": "{$config.output}/css/themes/cust-theme-12.css"

    					}
    				},
    				"theme-13": {
    					"src": {
    						"styles": [
    							"{$config.path.src}/scss/_themes/cust-theme-13.scss"
    						]
    					},
    					"bundle": {
    						"styles": "{$config.output}/css/themes/cust-theme-13.css"

    					}
    				}
    			}
    		}
    	}
    }

variable | value | description
--- | --- | ---
config.debug | `boolean` | spits out debugging data and error messages on npm log file
config.data.* | `string` | global data for the template, control profile images, user names, etc
config.compile.jsUglify | `boolean` | minifies all javascript files in the project
config.compile.cssMinify | `boolean` | minifies all css files in the project
config.compile.jsSourcemaps | `boolean` | generates js source maps from the scss files for easier debugging options using the browser's inspection tool
config.compile.cssSourcemaps | `boolean` | generates css source maps from the scss files for easier debugging options using the browser's inspection tool
config.compile.autoprefixer | `boolean` | we recommend you leave this set to true. This will auto-generate all the necessary CSS browser prefixes for different browser types
config.compile.seedOnly | `boolean` | generates the seed project navigation menu, all other assets will be intact, can be removed manually (but will not be called into the main project)
config.path.* | `string` | addresses source and dist path of your porject files, change this if you change your source file path
build.vendor.* | `string` | link all sources for plugins from the node_modules directory, you can concatinte files here and also rename them if needed
build.app.* | `string` | concatinates all the main core files for the theme

## Configuration JS (app.config.js) Your `app.config.js` mainly controls the behaviour of your application, you can configure the navigation speed, disable visual effects, and change localstorage settings. To learn more about app configuration and how it works, check out the app.core.js page

File app.config.js contents

    var myapp_config = {
     VERSION: '4.6.0',
     root_: $('body'), // used for core app reference
     root_logo: $('.page-sidebar > .page-logo'), // used for core app reference
     throttleDelay: 450, // for window.scrolling & window.resizing
     filterDelay: 150,   // for keyup.functions
     thisDevice: null, // desktop or mobile
     isMobile: (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase())), //popular device types available on the market
     mobileMenuTrigger: null, // used by pagescrolling and appHeight script, do not change!
     mobileResolutionTrigger: 992, //the resolution when the mobile activation fires
     isWebkit: ((!!window.chrome && !!window.chrome.webstore) === true || Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0 === true),
     isChrome: (/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())),
     isIE: ( (window.navigator.userAgent.indexOf('Trident/') ) > 0 === true ),
     debugState: true, // outputs debug information on browser console
     rippleEffect: true, // material design effect that appears on all buttons
     mythemeAnchor: '#mytheme',
     activateLastTab: true,
     navAnchor: $('#js-primary-nav'), //changing this may implicate slimscroll plugin target
     navHooks: $('#js-nav-menu'), //changing this may implicate CSS targets
     navAccordion: true, //nav item when one is expanded the other closes
     navInitalized: 'js-nav-built', //nav finished class
     navFilterInput: $('#nav_filter_input'), //changing this may implicate CSS targets
     navHorizontalWrapperId: 'js-nav-menu-wrapper',
     navSpeed: 500, //ms
     mythemeColorProfileID: $('#js-color-profile'),
     navClosedSign: 'fal fa-angle-down',
     navOpenedSign: 'fal fa-angle-up',
     appIconPrefix: 'fal',
     appDateHook: $('.js-get-date'),
     storeLocally: true,
     /*
     * Used with initApp.loadScripts
     * DOC: Please leave it blank
     */
     jsArray : []
    };

Config file definition

variable | value | description
--- | --- | ---
myapp_config.VERSION | `integer` | application version number
myapp_config.root_ | `string` | used for core app reference
myapp_config.root_logo | `boolean` | used for core app reference to detect logo click behaviour
myapp_config.throttleDelay | `boolean` | for window.scrolling & window.resizing
myapp_config.filterDelay | `boolean` | keyup.functions for the search filter
myapp_config.mobileResolutionTrigger | `boolean` | the resolution when the mobile activation fires
myapp_config.debugState | `boolean` | outputs debug information on browser console
myapp_config.rippleEffect | `boolean` | global configuration for material design effect that appears on all buttons
myapp_config.mythemeAnchor | `string` | this anchor is created dynamically and CSS is loaded as an override theme
myapp_config.navAnchor | `string` | this is the root anchor point where the menu script will begin its build
myapp_config.navAccordion | `string` | nav item when one is expanded the other closes
myapp_config.navSpeed | `integer` | the rate at which the menu expands revealing child elements on click, lower rate reels faster expansion of nav childs
myapp_config.navClosedSign | `string` | main navigation's collapse icon
myapp_config.navOpenedSign | `string` | main navigation's expand icon
myapp_config.storeLocally | `boolean` | saveSettings to localStorage, to store settings to a DB instead of LocalStorage use initApp.pushSettings("className1 className2")

## Layout Options SmartAdmin WebApp has over 285 layout combinations, you can check them out at Layout Options page.

You can also try them out through the Settings Panel. The classes comes with 3 unique prefixes, `.header-*`, `.nav-*`, and `.mod-*`. You can also save your state settings to your database using `initApp.pushSettings()` and `initApp.getSettings()` methods, more info found in the Saving to Database page.

Add the following classes to your `body` tag in order to see the effect. You may need to clear your `localStorage` first if you intend to add it manually.

class name | description
--- | ---
`.header-function-fixed` | header is in a fixed position at all times, effecting mobile & desktop view
`.nav-function-fixed` | Left panel position becomes fixed, activates custom scroll plugin
`.nav-function-minify` | Navigation text are collapsed. Only visible portion are the icons. Hover the icons to reveal any child elements
`.nav-function-hidden` | Navigation is revealed upon user hovering the visible portion of the navigation
`.nav-function-top` | Main navigation shifts to the top (horizontal nav)
`.mod-main-boxed` | Contain layout to 1200px max width. Some classes are not compatible with this setting
`.nav-mobile-push` | Content panel pushed on menu reveal
`.nav-mobile-no-overlay` | Removes mesh on menu reveal
`.nav-mobile-slide-out` | Content overlaps menu
`.mod-bigger-font` | Fonts are bigger for readability
`.mod-high-contrast` | 4.5:1 text contrast ratio to meet WCAG 2 AA standards
`.mod-color-blind` | Color vision deficiency (this is a progressive UI option)
`.mod-pace-custom` | Preloader will be inside content
`.mod-clean-page-bg` | A white background for your webapp
`.mod-hide-nav-icons` | Hides navigation icons for a slick and clean look (some classes will be incompatible)
`.mod-disable-animation` | Disables css based animations
`.mod-hide-info-card` | Hides info card from left panel
`.mod-lean-subheader` | Distinguished page header
`.mod-nav-link` | Clear breakdown of nav links (some options will be incompatble)

## Skins & Themes SmartAdmin WebApp contains over 10 pre-built CSS skins to choose from. All located inside `dist/css/themes` or you would like to edit the source, go to `src/scss/_themes`. The skin files generated are very lightweight, ranging from 10-20kb in size, which only contains the color overrides.

#### How to change theme colors There are more than one way to change your skin or theme colors. Use any one of the following methods below:

Method 1: Changing skins programatically via button action, add the following line to any clickable object. Remove `data-themesave` attribute if you do not plan to save the theme to localStorage.

    data-action="theme-update" data-themesave="" data-theme="css/themes/cust-theme-1.css"

Method 2: Changing skins manually, add the skin CSS file to your html `head`, it must be added after apps' main CSS files

    link rel="stylesheet" media="screen, print" href="css/vendors.bundle.css"
    link rel="stylesheet" media="screen, print" href="css/app.bundle.css"
    link id="mytheme" rel="stylesheet" href="css/themes/cust-theme-1.css" <-- Theme CSS override

Method 3: Changing skins programatically via script. `themeName` is the location of where your theme's CSS file is located including the full file name, path and extension. `themeSave` is to indicate if you wish to save this change to the `localStorage`.

    //initApp.updateTheme(themeName, themeSave);

    //saves the theme
    initApp.updateTheme('css/themes/cust-theme-1.css');

    // does not save
    initApp.updateTheme('css/themes/cust-theme-1.css', false);

#### Theme Color references Add the theme URL by following the steps above

Theme Name | Theme URL | Theme Colors
Default | `base CSS` |
Tapestry | `css/themes/cust-theme-1.css` |
Atlantis | `css/themes/cust-theme-2.css` |
Indigo | `css/themes/cust-theme-3.css` |
Dodger Blue | `css/themes/cust-theme-4.css` |
Tradewind | `css/themes/cust-theme-5.css` |
Cranberry | `css/themes/cust-theme-6.css` |
Oslo Gray | `css/themes/cust-theme-7.css` |
Chetwode Blue | `css/themes/cust-theme-8.css` |
Apricot | `css/themes/cust-theme-9.css` |
Blue Smoke | `css/themes/cust-theme-10.css` |
Green Smoke | `css/themes/cust-theme-11.css` |
Wild Blue Yonder | `css/themes/cust-theme-12.css` |
Emerald | `css/themes/cust-theme-13.css` |

#### Generate your own unique Themes You can generate any number of themes by following the instructions below.

1. Go over to `smartadmin-html-full\src\scss\_themes`
2. Create an empty file with `.scss` extension. Lets name your file 'mytheme.scss'
3. Open `cust-theme-1.scss` to take a look at the example of what we did.
4. You can either copy from `cust-theme-1.scss` to your 'methemes.scss' file and change the color values, or you may open `variables.scss` file and copy over any values you wish to change.
   For example: mytheme.scss

       /* #THEME COLOR (variable overrides)
       ========================================================================== */
       $color-primary:                     #b56a9f;
       $color-success:                     #1dc958;

       /* #GLOBAL IMPORTS (You must not remove this!)
       ========================================================================== */
       @import './src/scss/_imports/_theme-modules-import';

       /* #My Unique Changes (you can also add CSS overrides below)
       ========================================================================== */
       $nav-background:                    #ed1c34; //<-- my unique change here

5. Once done, re-run the gulp build command to generate your unique CSS skin. You can then use the methods above to load the new skin to your application.

## Seed & Slim Projects SmartAdmin WebApp's slim and seed projects comes at a reduced functionality, where seed is only the barebone essentials to get the project up and running, slim offers much more reduced functionalities, CSS features. If the Full Project was a size of a potato, the Seed Project would be the size of potato wedges, and the Slim Project would be Lays thinly sliced potato chips.

Feature | Slim | Seed | Full
--- | --- | --- | ---
Bootstrap components |  |  |
Dependencies |  |  |
Core plugins | Partial* |  |
Extension plugins |  |  |
App Settings and Layouts |  |  |
Form Plugins |  |  |
Sample Pages |  |  |
Datatables |  |  |
Charts & Statistics |  |  |
Notifications & Other plugins |  |  |

## File Structure This webapp toolkit comes with a flexible file structure that can be easily used for small to large scope projects. This section will explains app's file structure and how to adapt it to your project.

- smartadmin-html-full
  - build --- all the scripts for gulp
  - dist --- compiled HTML and assets
  - src
    - content --- content for all pages
    - custom
      - demo-data --- data for demo pages and graphs
      - docs-data --- data for plugins and documentation
      - lang --- data for language files
      - media --- video and sound files
      - plugins --- scripts for all custom plugins and non-destructive manipulation
      - webfonts --- all font icon files
    - image --- all image contents
    - js --- core javascript contents
    - scss
      - _extensions --- customization for extended plugins
      - _imports --- global and theme imports as a master file refernce
      - _mixins --- scss mixins and shortclasses
      - _modules --- SCSS modular components for the theme
      - _themes --- theme files for various theme colors
      - ...
    - template
      - layouts --- various hbs layout templates
      - include --- hbs includes, such as head, body, nav, content area, etc
      - _helpers --- hbs conditions
    - navigation.json --- JSON file that auto generates nav.hbs file
  - build.json --- structure of the entire project and file components, use this file to restructure your project files
  - package.json --- list of all npm packages for the app
- smartadmin-html-seed
- smartadmin-html-slim
- tests

## Plugin Reference & Dependency Reference for all plugins within SmartAdmin WebApp

All plugins are categorized into five (5) categories. DEPENDENCY and CORE are essential plugins, removing any of these plugins can cause the application to crash or become unstable. EXTENSION are refered to plugins that enhances the user experience, this could range from SmartPanels, SlimScroll, BootBox, etc. You are free to remove these plugins without crashing the application. RECOMMENDED increases application's performance, removing this will not crash the application but users may experience delay in animation or delayed overall responses from the application. ADDON are plugins added on top as a development need or requirement, you are free to add or delete any addons

To see all list of Core plugins for a barebone version please visit the Plugin FAQ page.

#### Select a plugin from the list below for full documentation

Disclaimer: Third party plugins are left unchanged, all third party plugins have limited support (to design elements only), and you must refer to the documentation via plugin's official website

#####

Documentation:

License:

## RTL Support Right to left text support for SmartAdmin WebApp

You can turn on your RTL support by enabling the RTL CSS, by adding the suffix `*-rtl.css` you can turn on your RTL support. You can also have RTL on by default through your build.json config file.

Change via CSS from your HTML `head`

    link rel="stylesheet" media="screen, print" href="css/vendors.bundle-rtl.css"  <-- just add the '-rtl' suffix
    link rel="stylesheet" media="screen, print" href="css/app.bundle-rtl.css"

Change via Gulp and `build.json` file

    "compile": {
      "jsUglify": false,
      "cssMinify": false,
      "jsSourcemaps": false,
      "cssSourcemaps": true,
      "autoprefixer": true,
      "seedOnly": false,
      "rtl": true <-- change to 'true'
    },

Once done, save your changes and run your gulp build command to generate the new CSS files.

## Changing Component Colors How to change component colors in SmartAdmin WebApp using Chrome's developer tools and Gulp

In this example, we will change the 'left panel' background color. For this example to work, you first need to make sure your gulp build is working correctly and you have the following enabled from `build.json`
Inside your build.json file

    "compile": {
      "jsUglify": false,
      "cssMinify": false,
      "jsSourcemaps": false,
      "cssSourcemaps": true, <-- change to 'true'
      "autoprefixer": true,
      "seedOnly": false,
      "rtl": false
    },

1. Load your website on the latest version of Google Chrome and press F12 to load the developer toolkit
2. Click on Elements tab and then locate the DOM element (eg. `page-sidebar`) you wish to manipulate, once selected it will reveal the SCSS file from the CSS maps (to the right). Locate the reference for the CSS class (eg. `.page-sidebar`) to reveal the SCSS file name where these classes are residing. In this example below it is residing inside `_placeholder.scss` in line 29. Clicking on the file name as shown in the image below...
3. When you open the `_placeholder.scss` file from the previous window, you will see the variable you need to change for the left navigation background color. In this example it will be `$nav-background`
4. Open `\smartadmin-html-full\src\scss\_modules\variables.scss` and locate the key variable you wish to change, in this case we locate `$nav-background`, make sure to also change `$nav-background-shade` to your liking.
5. Once done, save your changes and run your gulp build command to generate the new CSS files.

## Product Support Customer support for SmartAdmin WebApp

All support questions related to HTML and/or CSS will be honored. Issues that are encountered on the Seed versions of specific flavors of SmartAdmin are covered by their respective authors, but will be limited to HTML and/or CSS issues. If you need assistance with a technical issue that is currently not covered by the FAQ, you will need to have purchased a Full license of that flavor and contact the respective author for further assistance. The Full version links will be added to the Flavors page once they are made available.

## Browser Support SmartAdmin WebApp supports all the browsers supported by the Bootstrap 4, which includes:

- IE10+
- Firefox (latest)
- Safari (latest)
- Chrome (latest)
- Opera (latest)

Note: Certain pages and plugins are not supported with IE10, when this happens, we will display a message in your IE10 browser to notify the user.

## Components SmartAdmin WebApp comes with full documentation for all components

Each component page has documentation of its usage and how they work. For all bootstrap components we have demonstrated its usage with examples for you to either copy from the HTML source or refer to the docs directly on bootstrap website.

To see documentation on a particular component please refer to the component page. For third party plugin documentation, you will need to refer to the website for the third party plugin, which can be located at the Plugin Reference & Dependency section.

- Home
- Inbox
- Add More

Tracey Chang
IT Director

- Tracey Chang Online
- Oliver Kopyuv Online
- Dr. John Cook PhD Away
- Ali Amdaney Online
- Sarah McBrook Online
- oliver.kopyuv@gotbootstrap.com Offline
- oliver.kopyuv@gotbootstrap.com Busy
- oliver.kopyuv@gotbootstrap.com Offline
- +714651347790 Missed Call

Jun 19

Hey Tracey, did you get my files?

3:00 pm

Hi

Sorry going through a busy time in office. Yes I analyzed the solution.

It will require some resource, which I could not manage.

3:24 pm

Okay

Sending you some dough today, you can allocate the resources to this project.

3:26 pm

Perfect. Thanks a lot!

I will have them ready by tonight.

Cheers

Jun 20
Send

#### Layout Settings User Interface Settings

##### App Layout

Fixed Header header is in a fixed at all times
Fixed Navigation left panel is fixed
Minify Navigation Skew nav to maximize space
Hide Navigation roll mouse on edge to reveal
Top Navigation Relocate left pane to top
Fixed Footer page footer is fixed
Boxed Layout Encapsulates to a container

Fixed Background

##### Mobile Menu

Push Content Content pushed on menu reveal
No Overlay Removes mesh on menu reveal
Off-Canvas (beta) Content overlaps menu

##### Accessibility

Bigger Content Font content fonts are bigger for readability
High Contrast Text (WCAG 2 AA) 4.5:1 text contrast ratio
Daltonism (beta) color vision deficiency
Preloader Inside preloader will be inside content
SmartPanel Icons (not Panels) smartpanel buttons will appear as icons

##### Global Modifications

Clean Page Background adds more whitespace
Hide Navigation Icons invisible navigation icons
Disable CSS Animation Disables CSS based animations
Hide Info Card Hides info card from left panel
Lean Subheader distinguished page header
Hierarchical Navigation Clear breakdown of nav links
Dark Navigation Navigation background is darkend

##### Global Font Size

SM MD LG XL
Change root font size to effect rem values (resets on page refresh)

##### Theme colors more info

##### Theme Modes (beta) why beta?

###### Internet Explorer Issue

This particular component may not work as expected in Internet Explorer. Please use with caution.
Default
Light
Dark

Reset Settings
Factory Reset