Back to home

# Documentation

### Table of contents

- Introduction
- Getting started
- Basic structure

### Introduction

PolluxUI Admin is a responsive HTML template that is based on the CSS framework Bootstrap 4 and it is built with Sass. Sass compiler makes it easier to code and customize. If you are unfamiliar with Bootstrap or Sass, visit their website and read through the documentation. All of Bootstrap components have been modified to fit the style of PolluxUI Admin and provide a consistent look throughout the template.

Before you start working with the template, we suggest you go through the pages that are bundled with the theme. Most of the template example pages contain quick tips on how to create or use a component which can be really helpful when you need to create something on the fly.

Note: We are trying our best to document how to use the template. If you think that something is missing from the documentation, please do not hesitate to tell us about it. If you have any questions or issues regarding this theme please email us at support@bootstrapdash.com

### Getting started

You can directly use the compiled and ready-to-use the version of the template. But in case you plan to customize the template extensively the template allows you to do so.

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations:

PolluxUI-free/ ├── template/ ├── css/ ├── fonts/ ├── images/ ├── js/ ├── pages/ ├── partials/ ├── index.html ├── scss/ ├── vendors/ ├── gulpfile.js ├── index.html ├── package.json ├── docs/ ├── documentation.html ├── documentation.js ├── CHANGELOG.md

Note: The root folder denoted further in this documentation refers to the 'template' folder inside the downloaded folder

We have bundled up the vendor files needed for demo purpose into a folder 'vendors', you may not need all those vendors in your application. If you want to make any change in the vendor package files, you need to change the src path for related tasks in the file gulpfile.js and run the task `bundleVendors` to rebuild the vendor files.

#### Installation

You need to install package files/Dependencies for this project if you want to customize it. To do this, you must have node and npm installed in your computer.

Installation guide of the node can be found here. As npm comes bundled with a node, a separate installation of npm is not needed.

If you have installed them, just go to the root folder and run the following command in your command prompt or terminal (for the mac users).

npm install

This will install the dev dependencies in the local node_modules folder in your root directory.

Then you will need to install Gulp. We use the Gulp task manager for the development processes. Gulp will watch for changes to the SCSS files and automatically compile the files to CSS.

Getting started with Gulp is pretty simple. The Gulp site is a great place to get information on installing Gulp if you need more information. You need to first install Gulp-cli in your machine using the below command.

npm install -g gulp-cli

This installs Gulp-cli globally to your machine. The other thing that Gulp requires, which, is really what does all the work, is the gulpfile.js. In this file, you set up all of your tasks that you will run.

Don't worry. We have this file already created for you!

To run this project in development mode enter the following command below. This will start the file watch by gulp and whenever a file is modified, the SCSS files will be compiled to create the CSS file.

gulp serve
It is important to run `gulp serve` command from the directory where the gulpfile.js is located.

### Basic structure

The below snippet shows the basic HTML structure of PolluxUI Admin. Please note that all the stylesheets and script files in the below snippet should be included to render PolluxUI Admin styles.

This section contains code of default vertical layout. For other layouts in vertical mode like boxed, icon-menu etc., you can follow the snippet same as below, but you have to just add the appropriate optional class to the body. More details of the classes are given in Options section

<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>PolluxUI Admin</title> <!-- base:css --> <link rel="stylesheet" href="path-to/vendors/typicons/typicons.css"> <link rel="stylesheet" href="path-to/vendors/css/vendor.bundle.base.css"> <!-- endinject --> <!-- plugin css for this page --> <!-- End plugin css for this page --> <!-- inject:css --> <link rel="stylesheet" href="path-to/css/vertical-layout-light/style.css"> <!-- endinject --> <link rel="shortcut icon" href="path-to/images/favicon.png" /> </head> <body> <div class="container-scroller"> <!-- partial:path-to/partials/_navbar.html --> <nav class="navbar col-lg-12 col-12 p-0 fixed-top d-flex flex-row"> <div class="navbar-brand-wrapper d-flex justify-content-center"> <div class="navbar-brand-inner-wrapper d-flex justify-content-between align-items-center w-100"> <a class="navbar-brand brand-logo" href="path-to/index.html"><img src="path-to/images/logo.svg" alt="logo"/></a> <a class="navbar-brand brand-logo-mini" href="path-to/index.html"><img src="path-to/images/logo-mini.svg" alt="logo"/></a> <button class="navbar-toggler navbar-toggler align-self-center" type="button" data-toggle="minimize"> <span class="typcn typcn-th-menu"></span> </button> </div> </div> <div class="navbar-menu-wrapper d-flex align-items-center justify-content-end"> <ul class="navbar-nav mr-lg-2"> <li class="nav-item nav-profile dropdown"> <a class="nav-link" href="#" data-toggle="dropdown" id="profileDropdown"> <img src="path-to/images/faces/face5.jpg" alt="profile"/> <span class="nav-profile-name">Eugenia Mullins</span> </a> <div class="dropdown-menu dropdown-menu-right navbar-dropdown" aria-labelledby="profileDropdown"> <a class="dropdown-item"> <i class="typcn typcn-cog-outline text-primary"></i> Settings </a> <a class="dropdown-item"> <i class="typcn typcn-eject text-primary"></i> Logout </a> </div> </li> <li class="nav-item nav-user-status dropdown"> <p class="mb-0">Last login was 23 hours ago.</p> </li> </ul> <ul class="navbar-nav navbar-nav-right"> <li class="nav-item nav-date dropdown"> <a class="nav-link d-flex justify-content-center align-items-center" href="javascript:;"> <h6 class="date mb-0">Today : Mar 23</h6> <i class="typcn typcn-calendar"></i> </a> </li> <li class="nav-item dropdown"> <a class="nav-link count-indicator dropdown-toggle d-flex justify-content-center align-items-center" id="messageDropdown" href="#" data-toggle="dropdown"> <i class="typcn typcn-cog-outline mx-0"></i> <span class="count"></span> </a> <div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list" aria-labelledby="messageDropdown"> <p class="mb-0 font-weight-normal float-left dropdown-header">Messages</p> <a class="dropdown-item preview-item"> <div class="preview-thumbnail"> <img src="path-to/images/faces/face4.jpg" alt="image" class="profile-pic"> </div> <div class="preview-item-content flex-grow"> <h6 class="preview-subject ellipsis font-weight-normal">David Grey </h6> <p class="font-weight-light small-text text-muted mb-0"> The meeting is cancelled </p> </div> </a> <a class="dropdown-item preview-item"> <div class="preview-thumbnail"> <img src="path-to/images/faces/face2.jpg" alt="image" class="profile-pic"> </div> <div class="preview-item-content flex-grow"> <h6 class="preview-subject ellipsis font-weight-normal">Tim Cook </h6> <p class="font-weight-light small-text text-muted mb-0"> New product launch </p> </div> </a> <a class="dropdown-item preview-item"> <div class="preview-thumbnail"> <img src="path-to/images/faces/face3.jpg" alt="image" class="profile-pic"> </div> <div class="preview-item-content flex-grow"> <h6 class="preview-subject ellipsis font-weight-normal"> Johnson </h6> <p class="font-weight-light small-text text-muted mb-0"> Upcoming board meeting </p> </div> </a> </div> </li> <li class="nav-item dropdown mr-0"> <a class="nav-link count-indicator dropdown-toggle d-flex align-items-center justify-content-center" id="notificationDropdown" href="#" data-toggle="dropdown"> <i class="typcn typcn-bell mx-0"></i> <span class="count"></span> </a> <div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list" aria-labelledby="notificationDropdown"> <p class="mb-0 font-weight-normal float-left dropdown-header">Notifications</p> <a class="dropdown-item preview-item"> <div class="preview-thumbnail"> <div class="preview-icon bg-success"> <i class="typcn typcn-info mx-0"></i> </div> </div> <div class="preview-item-content"> <h6 class="preview-subject font-weight-normal">Application Error</h6> <p class="font-weight-light small-text mb-0 text-muted"> Just now </p> </div> </a> <a class="dropdown-item preview-item"> <div class="preview-thumbnail"> <div class="preview-icon bg-warning"> <i class="typcn typcn-cog-outline mx-0"></i> </div> </div> <div class="preview-item-content"> <h6 class="preview-subject font-weight-normal">Settings</h6> <p class="font-weight-light small-text mb-0 text-muted"> Private message </p> </div> </a> <a class="dropdown-item preview-item"> <div class="preview-thumbnail"> <div class="preview-icon bg-info"> <i class="typcn typcn-user mx-0"></i> </div> </div> <div class="preview-item-content"> <h6 class="preview-subject font-weight-normal">New user registration</h6> <p class="font-weight-light small-text mb-0 text-muted"> 2 days ago </p> </div> </a> </div> </li> </ul> <button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button" data-toggle="offcanvas"> <span class="typcn typcn-th-menu"></span> </button> </div> </nav> <!-- partial --> <div class="container-fluid page-body-wrapper"> <!-- partial:path-to/partials/_settings-panel.html --> <div class="theme-setting-wrapper"> <div id="settings-trigger"><i class="typcn typcn-cog-outline"></i></div> <div id="theme-settings" class="settings-panel"> <i class="settings-close typcn typcn-times"></i> <p class="settings-heading">SIDEBAR SKINS</p> <div class="sidebar-bg-options selected" id="sidebar-light-theme"><div class="img-ss rounded-circle bg-light border mr-3"></div>Light</div> <div class="sidebar-bg-options" id="sidebar-dark-theme"><div class="img-ss rounded-circle bg-dark border mr-3"></div>Dark</div> <p class="settings-heading mt-2">HEADER SKINS</p> <div class="color-tiles mx-0 px-4"> <div class="tiles success"></div> <div class="tiles warning"></div> <div class="tiles danger"></div> <div class="tiles info"></div> <div class="tiles dark"></div> <div class="tiles default"></div> </div> </div> </div> <div id="right-sidebar" class="settings-panel"> <i class="settings-close typcn typcn-times"></i> <ul class="nav nav-tabs" id="setting-panel" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="todo-tab" data-toggle="tab" href="#todo-section" role="tab" aria-controls="todo-section" aria-expanded="true">TO DO LIST</a> </li> <li class="nav-item"> <a class="nav-link" id="chats-tab" data-toggle="tab" href="#chats-section" role="tab" aria-controls="chats-section">CHATS</a> </li> </ul> <div class="tab-content" id="setting-content"> <div class="tab-pane fade show active scroll-wrapper" id="todo-section" role="tabpanel" aria-labelledby="todo-section"> <div class="add-items d-flex px-3 mb-0"> <form class="form w-100"> <div class="form-group d-flex"> <input type="text" class="form-control todo-list-input" placeholder="Add To-do"> <button type="submit" class="add btn btn-primary todo-list-add-btn" id="add-task">Add</button> </div> </form> </div> <div class="list-wrapper px-3"> <ul class="d-flex flex-column-reverse todo-list"> <li> <div class="form-check"> <label class="form-check-label"> <input class="checkbox" type="checkbox"> Team review meeting at 3.00 PM </label> </div> <i class="remove typcn typcn-delete-outline"></i> </li> <li> <div class="form-check"> <label class="form-check-label"> <input class="checkbox" type="checkbox"> Prepare for presentation </label> </div> <i class="remove typcn typcn-delete-outline"></i> </li> <li> <div class="form-check"> <label class="form-check-label"> <input class="checkbox" type="checkbox"> Resolve all the low priority tickets due today </label> </div> <i class="remove typcn typcn-delete-outline"></i> </li> <li class="completed"> <div class="form-check"> <label class="form-check-label"> <input class="checkbox" type="checkbox" checked> Schedule meeting for next week </label> </div> <i class="remove typcn typcn-delete-outline"></i> </li> <li class="completed"> <div class="form-check"> <label class="form-check-label"> <input class="checkbox" type="checkbox" checked> Project review </label> </div> <i class="remove typcn typcn-delete-outline"></i> </li> </ul> </div> <div class="events py-4 border-bottom px-3"> <div class="wrapper d-flex mb-2"> <i class="typcn typcn-media-record-outline text-primary mr-2"></i> <span>Feb 11 2018</span> </div> <p class="mb-0 font-weight-thin text-gray">Creating component page</p> <p class="text-gray mb-0">build a js based app</p> </div> <div class="events pt-4 px-3"> <div class="wrapper d-flex mb-2"> <i class="typcn typcn-media-record-outline text-primary mr-2"></i> <span>Feb 7 2018</span> </div> <p class="mb-0 font-weight-thin text-gray">Meeting with Alisa</p> <p class="text-gray mb-0 ">Call Sarah Graves</p> </div> </div> <!-- To do section tab ends --> <div class="tab-pane fade" id="chats-section" role="tabpanel" aria-labelledby="chats-section"> <div class="d-flex align-items-center justify-content-between border-bottom"> <p class="settings-heading border-top-0 mb-3 pl-3 pt-0 border-bottom-0 pb-0">Friends</p> <small class="settings-heading border-top-0 mb-3 pt-0 border-bottom-0 pb-0 pr-3 font-weight-normal">See All</small> </div> <ul class="chat-list"> <li class="list active"> <div class="profile"><img src="path-to/images/faces/face1.jpg" alt="image"><span class="online"></span></div> <div class="info"> <p>Thomas Douglas</p> <p>Available</p> </div> <small class="text-muted my-auto">19 min</small> </li> <li class="list"> <div class="profile"><img src="path-to/images/faces/face2.jpg" alt="image"><span class="offline"></span></div> <div class="info"> <div class="wrapper d-flex"> <p>Catherine</p> </div> <p>Away</p> </div> <div class="badge badge-success badge-pill my-auto mx-2">4</div> <small class="text-muted my-auto">23 min</small> </li> <li class="list"> <div class="profile"><img src="path-to/images/faces/face3.jpg" alt="image"><span class="online"></span></div> <div class="info"> <p>Daniel Russell</p> <p>Available</p> </div> <small class="text-muted my-auto">14 min</small> </li> <li class="list"> <div class="profile"><img src="path-to/images/faces/face4.jpg" alt="image"><span class="offline"></span></div> <div class="info"> <p>James Richardson</p> <p>Away</p> </div> <small class="text-muted my-auto">2 min</small> </li> <li class="list"> <div class="profile"><img src="path-to/images/faces/face5.jpg" alt="image"><span class="online"></span></div> <div class="info"> <p>Madeline Kennedy</p> <p>Available</p> </div> <small class="text-muted my-auto">5 min</small> </li> <li class="list"> <div class="profile"><img src="path-to/images/faces/face6.jpg" alt="image"><span class="online"></span></div> <div class="info"> <p>Sarah Graves</p> <p>Available</p> </div> <small class="text-muted my-auto">47 min</small> </li> </ul> </div> <!-- chat tab ends --> </div> </div> <!-- partial --> <!-- partial:path-to/partials/_sidebar.html --> <nav class="sidebar sidebar-offcanvas" id="sidebar"> <ul class="nav"> <li class="nav-item"> <a class="nav-link" href="index.html"> <i class="typcn typcn-device-desktop menu-icon"></i> <span class="menu-title">Dashboard</span> <div class="badge badge-danger">new</div> </a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="collapse" href="#ui-basic" aria-expanded="false" aria-controls="ui-basic"> <i class="typcn typcn-document-text menu-icon"></i> <span class="menu-title">UI Elements</span> <i class="menu-arrow"></i> </a> <div class="collapse" id="ui-basic"> <ul class="nav flex-column sub-menu"> <li class="nav-item"> <a class="nav-link" href="pages/ui-features/buttons.html">Buttons</a></li> <li class="nav-item"> <a class="nav-link" href="pages/ui-features/dropdowns.html">Dropdowns</a></li> <li class="nav-item"> <a class="nav-link" href="pages/ui-features/typography.html">Typography</a></li> </ul> </div> </li> <li class="nav-item"> <a class="nav-link" data-toggle="collapse" href="#form-elements" aria-expanded="false" aria-controls="form-elements"> <i class="typcn typcn-film menu-icon"></i> <span class="menu-title">Form elements</span> <i class="menu-arrow"></i> </a> <div class="collapse" id="form-elements"> <ul class="nav flex-column sub-menu"> <li class="nav-item"><a class="nav-link" href="pages/forms/basic_elements.html">Basic Elements</a></li> </ul> </div> </li> <li class="nav-item"> <a class="nav-link" data-toggle="collapse" href="#charts" aria-expanded="false" aria-controls="charts"> <i class="typcn typcn-chart-pie-outline menu-icon"></i> <span class="menu-title">Charts</span> <i class="menu-arrow"></i> </a> <div class="collapse" id="charts"> <ul class="nav flex-column sub-menu"> <li class="nav-item"> <a class="nav-link" href="pages/charts/chartjs.html">ChartJs</a></li> </ul> </div> </li> <li class="nav-item"> <a class="nav-link" data-toggle="collapse" href="#tables" aria-expanded="false" aria-controls="tables"> <i class="typcn typcn-th-small-outline menu-icon"></i> <span class="menu-title">Tables</span> <i class="menu-arrow"></i> </a> <div class="collapse" id="tables"> <ul class="nav flex-column sub-menu"> <li class="nav-item"> <a class="nav-link" href="pages/tables/basic-table.html">Basic table</a></li> </ul> </div> </li> <li class="nav-item"> <a class="nav-link" data-toggle="collapse" href="#icons" aria-expanded="false" aria-controls="icons"> <i class="typcn typcn-compass menu-icon"></i> <span class="menu-title">Icons</span> <i class="menu-arrow"></i> </a> <div class="collapse" id="icons"> <ul class="nav flex-column sub-menu"> <li class="nav-item"> <a class="nav-link" href="pages/icons/mdi.html">Mdi icons</a></li> </ul> </div> </li> <li class="nav-item"> <a class="nav-link" data-toggle="collapse" href="#auth" aria-expanded="false" aria-controls="auth"> <i class="typcn typcn-user-add-outline menu-icon"></i> <span class="menu-title">User Pages</span> <i class="menu-arrow"></i> </a> <div class="collapse" id="auth"> <ul class="nav flex-column sub-menu"> <li class="nav-item"> <a class="nav-link" href="pages/samples/login.html"> Login </a></li> <li class="nav-item"> <a class="nav-link" href="pages/samples/register.html"> Register </a></li> </ul> </div> </li> <li class="nav-item"> <a class="nav-link" data-toggle="collapse" href="#error" aria-expanded="false" aria-controls="error"> <i class="typcn typcn-globe-outline menu-icon"></i> <span class="menu-title">Error pages</span> <i class="menu-arrow"></i> </a> <div class="collapse" id="error"> <ul class="nav flex-column sub-menu"> <li class="nav-item"> <a class="nav-link" href="pages/samples/error-404.html"> 404 </a></li> <li class="nav-item"> <a class="nav-link" href="pages/samples/error-500.html"> 500 </a></li> </ul> </div> </li> <li class="nav-item"> <a class="nav-link" href="https://bootstrapdash.com/demo/polluxui-free/docs/documentation.html"> <i class="typcn typcn-mortar-board menu-icon"></i> <span class="menu-title">Documentation</span> </a> </li> </ul> </nav> <!-- partial --> <div class="main-panel"> <div class="content-wrapper"> </div> <!-- content-wrapper ends --> <!-- partial:path-to/partials/_footer.html --> <footer class="footer"> <div class="card"> <div class="card-body"> <div class="d-sm-flex justify-content-center justify-content-sm-between"> <span class="text-muted text-center text-sm-left d-block d-sm-inline-block">Copyright © 2020 <a href="https://www.bootstrapdash.com/" class="text-muted" target="_blank">Bootstrapdash</a>. All rights reserved.</span> <span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center text-muted">Hand-crafted & made with <i class="typcn typcn-heart-full-outline text-danger"></i></span> </div> </div> </div> </footer> <!-- partial --> </div> <!-- main-panel ends --> </div> <!-- page-body-wrapper ends --> </div> <!-- container-scroller --> <!-- base:js --> <script src="path-to/vendors/js/vendor.bundle.base.js"></script> <!-- endinject --> <!-- Plugin js for this page--> <!-- End plugin js for this page--> <!-- inject:js --> <script src="path-to/js/off-canvas.js"></script> <script src="path-to/js/hoverable-collapse.js"></script> <script src="path-to/js/template.js"></script> <script src="path-to/js/settings.js"></script> <script src="path-to/js/todolist.js"></script> <!-- endinject --> <!-- Custom js for this page--> <!-- End custom js for this page--> </body> </html>