Panely Guide

Overview

Panely is a multipurpose admin dashboard template based on Bootstrap and JQuery. This template has a huge collection of essential and reusable UI components for you to design interfaces and powerful web applications. This template provides many pre-built dashboards with different layouts in light and dark themes. It is a fully clean and responsive dashboard template design for all types of devices and works on all major web browsers. This template supports LTR and RTL direction for all users worldwide.

We built this template to be easy to customize. All styles are fully developed with SCSS, you can easily change this template style. We built this template's pages with Nunjucks. Nunjucks is an HTML templating engine that provides many useful features such as template inheritance, variables, modulation, and more for building HTML pages.

This template comes with Gulp to make your development easier. The build tools provide an easy way to organize, compile, and bundle assets. This template has organized directory structure for easy to understand and maintainability.

Get starting

  1. First, you must have Node.js installed on your computer.
  2. Extract the downloaded package from the marketplace.
  3. Start console and go to /template/ directory from the package that was extracted.
  4. Panely uses Gulp as a task runner that helps you automate your time-consuming tasks in the development workflow. To install Gulp globally, you must run npm install --global gulp-cli.
  5. Install all dependencies needed by running npm install.
  6. Run gulp --version to verify that Gulp is successfully installed, and the version of installed Gulp will appear and make sure you have installed Gulp 4.x version.
  7. Try to run gulp build on the console to build all assets.
  8. Start the development server by running gulp serve and keep the console open and open the link that displayed on the console. The server will automatically build assets and reload the browser if you edit the source codes. Press CTRL+C to stop the server.

Directory structure

Panely with a simple and organized directory structure for easy to understand and maintainability. Look at the treeview below to find the basic template directory structure.


Template directory /template/
  • dist - contains compiled code and assets
    • assets - contains all assets for supporting the pages
      • app - contains compiled app scripts
      • build - contains all compiled library assets
        • scripts - contains compiled library JS files
        • styles - contains compiled library CSS files
      • fonts - contains fonts
      • images - contains images
    • [dashboard] - contains each dashboard pages
  • src - contains source code and assets
    • app - contains source app scripts
    • assets - contains all additional assets
    • build - contains buildable library assets
      • core - contains Panely and Bootstrap component source codes
      • custom - contains each dashboard component source codes
      • vendors - contains custom 3rd party library source codes
    • pages - contains source Nunjucks codes
  • tool - contains build tool scripts
  • config.json - build configuration
  • gulpfile.js - Gulp main script

Build tools

This template uses Gulp to power the build tools. The build tool provides an easy way to organize, compile, and bundle assets. Below are all the build tool commands.

CommandDescription
gulp cleanDelete /template/dist/ folder
gulp assetsCopy all additional assets such as images, fonts that linked on config.json or inside /template/src/assets/ folder into /template/dist/assets/ folder
gulp build:style-coreCompile and bundle Panely and Bootstrap SCSS files that linked under build.core.styles object in config.json to (ltr|rtl)-core.css
gulp build:style-vendorCompile and bundle 3rd party library SCSS files that linked under build.vendors.optional.[package-name].styles object in config.json to (ltr|rtl)-vendor.css
gulp build:style-customCompile and bundle each dashboard SCSS files that linked under build.custom.[dashboard].styles object in config.json to separate files named with the dashboard identifier (ltr|rtl)-(dashboard).css
gulp build:styleRun all SCSS build tasks: gulp build:(style-core|style-vendor|style-custom)
gulp build:script-coreBundle Panely and Bootstrap JS files that linked under build.core.scripts object in config.json to single file core.js
gulp build:script-mandatoryBundle mandatory library JS files that linked under build.vendors.mandatory.[package-name].scripts object in config.json to single file mandatory.js
gulp build:script-vendorBundle 3rd party library JS files that linked under build.vendors.optional.[package-name].scripts object in config.json to single file vendor.js
gulp build:script-customBundle each dashboard JS files that linked under build.custom.[dashboard].scripts object in config.json to separate files named with the dashboard identifier (dashboard).js
gulp build:script-appCompile with Babel all JS files in /template/src/app/ and moved into /template/dist/assets/app/ folder
gulp build:scriptRun all JS build tasks: gulp build:(script-core|script-mandatory|script-vendor|script-custom|script-app)
gulp build:pageCompile all Nunjucks page codes in /template/src/pages/public/ and moved into /template/dist/ folder
gulp buildRun all build tasks gulp (build:style|build:script|build:page|assets) parallelly
gulp serveStart the development server and watch source codes for live reloading. Press CTRL+C to stop the server

Configuration

All build tool configurations are located at config.json and you can customize the configuration.

FieldTypeDescription
config.portintegerLocal development server port
config.productionbooleanEnable/disable production mode. By default, this option is false to speed up live reload. If you want to build for deployment, you must enable this option
config.css_stylestringCSS output structure, you can set this option with nested|expanded|compact|compressed
config.html_beautifybooleanBeautify compiled HTML files. You can disable this option if you want to increase build tool performance. This option will be automatically disabled if you enable production mode
config.sourcemapsbooleanEnable/disable sourcemap. This option will be automatically disabled if you enable production mode
config.skiparrayAn array of 3rd party libraries to be skipped from being compiled, you can skip the libraries under build.vendors.optional. example: ["apexcharts", "autosize", "datepicker"]
config.pathobjectCollection of paths
config.outputobjectAn object of build output file names
build.coreobjectThe object specifies Panely and Bootstrap buildable assets
build.customobjectThe object specifies each dashboard buildable assets
build.vendorsobjectThe object specifies 3rd party library buildable assets
build.vendors.mandatoryobjectAssets list under this node is required, you can't skipped to be compiled
build.vendors.optionalobjectAssets list under this node can be skipped to be compiled

Customization

Page

This template uses Nunjucks to generate HTML pages. Nunjucks provides many useful features like template inheritance, variables, modulation, and more to make your development easier.

You can find all Nunjucks source codes in /template/src/pages/ folder, look at tree view below to understand the directory structure.


Nunjucks source code directory /template/src/pages/
  • components - contains all supporting components
    • [dashboard] - contains each dashboard components
      • partial - contains page components
      • template.njk - base template for inheriting
      • variables.njk - Nunjucks general variables
  • public - contains main pages that will be compiled
    • [dashboard] - contains each dashboard pages

If you run the gulp build:page command, all Nunjucks files inside /template/src/pages/public/ will be compiled and moved into /template/dist/ folder. Don't make your pages from sketches, just start by customizing the prebuilt pages.

Tips: To set dark theme as default theme, you have to set defaults.theme variable in variables.njk with dark value.

Maybe your code editor doesn't support the jinja syntax highlighting of Nunjucks. There are plugins to support jinja syntax highlighting for some code editors.

Stylesheet

This template uses SCSS for handling the CSS efficiently. You can find all Panely and Bootstrap SCSS files in /template/src/build/core/styles/. We remove several Bootstrap components because we replace them with our custom components.

Find the custom 3rd party library SCSS files in /template/src/build/vendors/(package-name)/styles/. For each dashboard specific styles are located in /template/src/build/custom/(dashboard)/styles/.

You can easily customize the color palette and other options by editing the variables in variables.scss.


Panely SCSS source directory structure /template/src/build/core/styles/
  • components - contains component styles
  • mixins - contains SCSS mixins
  • utilities - contains utilities
  • widgets - contains widgets
  • _components.scss - concatenate all components
  • _functions.scss - helper functions
  • _mixins.scss - concatenate all SCSS mixins
  • _reboot.scss - reset default page style
  • _utilities.scss - concatenate all utilities
  • _variables.scss - global variables
  • _widgets.scss - concatenate all widgets
  • index.scss - the main file to be compiled and concatenate all parts

Script

There are 2 types of the JS scripts: Bundlable script and App script. Bundlable script is all library scripts that will be bundled to a single file. App script is the script that is written for specific pages.

Bundlable script

Bundlable script is all JS files that are linked under build object in config.json. Bundlable scripts include all Panely and 3rd party library scripts, all the scripts will be bundled and moved into /template/dist/assets/build/scripts/.

Find all Bootstrap and Panely component scripts in /template/src/build/core/scripts/. There are some scripts specific for each dashboard, you can find these scripts inside /template/src/build/custom/(dashboard)/scripts/.

This template takes 3rd party library scripts from node modules folder, but several library scripts have been customized. All the custom 3rd party library scripts are located inside /template/src/build/vendors/(package-name)/scripts/.

App script

All app scripts are located in /template/src/app/, all scripts inside this folder will be compiled with Babel and moved into /template/dist/assets/app/. These scripts are written for a specific page. You can use ES6 syntax for these scripts.