1. SmartAdmin
  2. Package Info
  3. Documentation

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 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

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
You may or may not see sime 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

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:4000 to 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.js mainly 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

Plugin reference Reference for all plugins within SmartAdmin WebApp

Plugin Name:

Documentation:

License:

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.