NodeJs Version

  1. Docs
  2. Getting Started

Introduction

Veltrix is a fully featured, multi-purpose admin template built with Bootstrap 4, HTML5, CSS3 and JQuery and Nodejs ( EJS – Embedded Javascript Templates). It’s a fully responsive and have the very clean user interface that comes with a huge collection of components, widgets, UI elements.

Structure

Extract the zip file you received after purchase and you would find the exact below files and folders in both Horizontal and Vertical folders: 

├── public
    ├── css
    ├── fonts
    ├── images
    ├── js
    └── libs
├── views
    ├── Authentication
    ├── Calendar
    ├── Chart
    ├── Dashboard
    ├── Email
    ├── Email-template
    ├── Forms
    ├── Icons
    ├── Maps
    ├── Partials
    ├── Tables
    ├── Ui
    └── All laytouts files
├── Authrouter.js
├── index.js
├── package.json
└── router.js

Prerequisites

Please follow below steps to install and setup all prerequisites:

  • Yarn

    Make sure to have the Node installed & running in your computer. If you already have installed yarn on your computer, you can skip this step. Node version must be greater then equal to 10.

Installation

To setup the admin theme, follow below-mentioned steps:

  • Install Prerequisites

    Make sure to have all above prerequisites installed & running on your computer

  • Install Dependencies

    Open your terminal at the root directory of the project, go to your folder and enter the command npm install. This would install all the required dependencies in the node_modules folder.

After you finished with the above steps, you can run the following commands to run the project locally or build for production use:

Command Description
node index.js The development server is accessible at http://localhost:8000.

Layouts

Veltrix has 7 different layouts. You can launch your new website in any layouts quickly. You can change any layout in less then a minute!

Vertical
How to add new menu items/change menu items?

In order to add, change or remove menu items from the left side navigation, simply edit in file views/Partials/Vertical/Sidebar.js.

How to use pre-built layouts?

Each of the layout options are provided as below with steps you would need to perform in views/layouts.ejs:

image
Light Sidebar & Topbar Dark
Remove data attribute data-sidebar="light" body element to have light sidebar. Add data attribute data-topbar="dark" body element to have dark topbar.
image
Compact Sidebar
Keep your body element with data attribute data-sidebar-size="small" E.g. <body data-sidebar-size="small"> to have small sidebar.
image
Icon Sidebar
Keep your body element with class vertical-collpsed" E.g. <body class="vertical-collpsed"> to have icon sidebar.
image
Boxed Layout
Keep your body element with class vertical-collpsed and data attribute data-layout-size="boxed" data-keep-enlarged="true" E.g. <body class="vertical-collpsed" data-layout-size="boxed" data-keep-enlarged="true"> to have boxed layout with icon view sidebar.
image
Preloader
In order to add pre-loader in your page, include following html after body element. <div id="preloader"> <div id="status"> <div class="spinner-chase"> <div class="chase-dot"></div> <div class="chase-dot"></div> <div class="chase-dot"></div> <div class="chase-dot"></div> <div class="chase-dot"></div> <div class="chase-dot"></div> </div> </div> </div>
Horizontal

If you would like to have Horizontal Menu (or Topnav) based layout, simply use horizontal folder or copy paster resources/views/layouts fodler from horizontal directory.

In order to add, change or remove any ui elements from the top bar, simply edit in file views/Partials/Horizontal/TopNavigation.ejs.

How to use pre-built layouts?

Each of the layout options are provided below with steps you would need to perform in views/layouts.ejs:

image
Topbar Light
Keep your body element with data attribute data-topbar="light" data-layout="horizontal" E.g. <body data-topbar="light" data-layout="horizontal"> to have light topbar and dark menubar.
image
Boxed Layout
Keep your body element with data attribute data-layout-size="boxed" data-layout="horizontal" E.g. <body data-layout-size="boxed" data-layout="horizontal"> to have boxed layout.
image
Preloader
In order to add pre-loader in your page, include following html after body element. <div id="preloader"> <div id="status"> <div class="spinner-chase"> <div class="chase-dot"></div> <div class="chase-dot"></div> <div class="chase-dot"></div> <div class="chase-dot"></div> <div class="chase-dot"></div> <div class="chase-dot"></div> </div> </div> </div>

Dark

In order to have dark mode enabled, replace the reference of bootstrap.min.css stylesheet file to bootstrap-dark.min.css and app.min.css to app-dark.min.css in the views/Partials/HeaderStyle.ejs only.

RTL

In order to have RTL mode enabled, replace the reference of app.min.css to app-rtl.min.css in the views/Partials/HeaderStyle.ejs only.

Plugins

Here is the list of Plugins (with a link to the official documentation) which helped us to make admin better.

Plugins Url
Bootstrap http://getbootstrap.com/
jQuery https://jquery.com/
Bootstrap Colorpicker https://farbelous.io/bootstrap-colorpicker/
Bootstrap Datepicker https://uxsolutions.github.io/bootstrap-datepicker/
Bootstrap Maxlength https://mimo84.github.io/bootstrap-maxlength/
Bootstrap Rating http://dreyescat.github.io/bootstrap-rating/
Bootstrap Touchspin https://www.virtuosoft.eu/code/bootstrap-touchspin/
Chart.js https://www.chartjs.org/
Datatables https://datatables.net/
Dragula https://bevacqua.github.io/dragula/
Dropzone https://www.dropzonejs.com/
Flot charts https://www.flotcharts.org/
Gmaps https://hpneo.github.io/gmaps/examples.html
Inputmask https://robinherbots.github.io/Inputmask/
Ion-rangeslider http://ionden.com/a/plugins/ion.rangeSlider/en.html
Jquery Countdown http://hilios.github.io/jQuery.countdown/
Jquery knob http://anthonyterrien.com/demo/knob/
Jquery Sparkline https://omnipotent.net/jquery.sparkline/#s-about
Jquery Steps http://www.jquery-steps.com/
Jquery Repeater https://github.com/DubFriend/jquery.repeater
Jszip https://stuk.github.io/jszip/
Magnific-popup https://dimsemenov.com/plugins/magnific-popup/
Metismenu https://mm.onokumus.com/
Moment https://momentjs.com/
Parsleyjs http://parsleyjs.org/
Pdfmake http://pdfmake.org/
Select2 https://select2.org/
Simplebar https://grsmto.github.io/simplebar/
Summernote https://summernote.org/
Sweetalert2 https://sweetalert2.github.io/
Tinymce https://www.tiny.cloud/
Tui calender https://ui.toast.com/tui-calendar/
Tui chart https://ui.toast.com/tui-chart/
X-editable http://vitalets.github.io/x-editable/