Documentation Product documentation, plugin reference, and online help
Overview & Installation 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).
1. 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/
2. 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
3. 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 gulpglobally, 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
4. 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
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 icommand
5. 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:4000to view your compiled project
Other commands We have built in other commands to help you fast track the project, these include:
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 Configure your project files build.json. You can completely slim down your project through the build.json file.
| 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 |
app.config.js Your app.config.jsmainly controls the behaviour of your application, you can configure the navigation speed, disable visual effects, and change localstorage settings.
| 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 nav close sign |
| myapp_config.navOpenedSign |
string
|
main nav open sign |
| myapp_config.storeLocally |
boolean
|
saveSettings to localStorage, to store settings to a DB instead of LocalStorage use initApp.pushSettings("className1 className2") |
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.
- _resources
- smartadmin-html-full
- build
- dist (auto generated)
- src
- content
- custom
- demo-data
- docs-data
- lang
- media
- plugins
- webfonts
- image
- js
- scss
- _extensions
- _imports
- _mixins
- _modules
- ...
- template
- layouts
- include
- _helpers
- navigation.json
- build.json
- package.json
- smartadmin-html-seed
- tests
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 Flavorspage once they are made available.