Introduction

Welcome to Nioboard - Bootstrap HTML Admin Dashboard Template.

Nioboard - is a responsive web application dashboard template. It is fully flexible user-friendly and responsive template that looks great on Desktops, Tablets, and Mobile Devices. this template built with Boostrap 5, HTML5, CSS3, Vanilla Js and SASS. It includes 5 dashboard layots, and 29+ pre-built pages. this template built with well organized folder structure, clean & commented code.

If you want to create a web application like Project Management, eCommerce, Web Analytics, Marketing and NFT Marketplace. then you are at the right place buy Nioboard admin dashboard template and build your own dream. We have used gulp-based build tools and scss variables-based modes. You can quickly change the colors, font sizes, etc. in variable file. No Need to do hard work for this template customization. We already designed it and you can easily design your website just how you like it. Advanced Form Elements like Date picker, Timepicker, Quill, Tinymce are included.

It also includes standard application layout such as Chats, Mailbox, Calendar, Kanban, Help Desk, Todo List application. This helps you to create your application stress free and quickly.

Once you Purchase Nioboard - Responsive Admin Dashboard template, you will be able to get free download of all future updates. if you stuck in any problem with our template. then do not hesitate to contact us. we are ready to give you our best.

If you like our template. please don't forgot to rate it. Thank you so much!

Featured Apps:

  • Inbox
  • Calendar
  • Kanban
  • User management
  • eCommerce
  • Chats
  • Help Desk
  • Todo List

Key Features:

  • 4+ dashboard Layouts
  • 5+ Use-Case App Concept
  • 29+ Pre-built Screens
  • Register, Login, Reset password & Error Pages
  • Built with Bootstrap 5, SASS, CSS, & Javascript
  • Calendar, Mailbox, Chats, Kanban, Help desk, Todo list apps
  • Nice layout for user profile and user details page
  • Cross-browser compatibility
  • Fully Responsive Design
  • Handmade custom icons.
  • Neat, clean and simple design
  • W3C Validated HTML Pages
  • Advanced Form Elements
  • Gulp Based Workflow
  • Fast & Dedicated Support
  • Easy to Customize with SCSS Variables
  • Lifetime Free Updates
  • And many more features available

Quick Start

Installing Node.js
  • 1. Download the latest theme source from themeforest.
  • 2. Download and install Node.js from nodejs.org (if you dont have it installed)
  • 3. Start command prompt window or terminal and change directory to [ nioboard-template ] folder. 
  • cd/package/html
  • 4. Run following command to install all the "dependencies and devDependencies". It could take few minutes to complete installation.
  • npm install
Installing Gulp

  • 5. If you have previously installed a version of gulp globally, remove it to make sure old version doesn't collide with new gulp-cli: or you have previously installed the latest version of gulp. then you can skip these step.

  • npm rm --global gulp
  • 6. Gulp is a toolkit that helps you automate your time-consuming tasks in development workflow. To install gulp globally
  • npm install --global gulp-cli
  • Verify that gulp in successfully installed on your computer
  • gulp --version

    Ensure the output matches the appear. CLI version: 2.0.1 Local version: 4.0.0

  • 7. Run the following command to compile all the assets(sass, js, media) and copy HTML templates to a new folder called [dist] in same directory. 
  • gulp build
  • 8. After you finished with above steps, run the following command to compile scss into css. it will keep running watch command to compile you edit.
  • gulp develop
For more information about the Gulp build tool click here for more details.

File and Folder Structure

    
    |--docs/
    |--html/
    |--|--src/
    |--|--|--assets/
    |--|--|--|--css/
    |--|--|--|--fonts/
    |--|--|--|--images/
    |--|--|--|--js/
    |--|--|--html/
    |--|--|--|--apps/
    |--|--|--|--components/
    |--|--|--|--utilities/
    |--|--|--|--index.html
    |--|--|--images/
    |--|--|--|--avatar/
    |--|--|--js/
    |--|--|--|--charts/
    |--|--|--|--vendors/
    |--|--|--|--scripts.js
    |--|--|--scss/
    |--|--|--|--core/
    |--|--|--|--|--apps/
    |--|--|--|--|--components/
    |--|--|--|--|--style.scss/
    |--|--|--|--|--extend/
    |--|--|--|--|--|--bootstrap/
    |--|--|--|--|--|--|--components/
    |--|--|--|--|--|--|--bootstrap.scss/
    |--|--|--gulpfile.js
    |--|--|--package.json

HTML structure

This is a basic HTML Structure.

    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <base href="../">
        <meta charset="utf-8">
        <meta name="author" content="Softnio">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="Multi-purpose admin dashboard template that especially build for programmers.">
        <title>Analytics - NioBoard Responsive Admin Dashboard Template</title>
        <link rel="shortcut icon" href="./images/favicon.png">
        <link rel="stylesheet" href="./assets/css/style.css?v1.0.0">
    </head>
    <body class="nk-body" data-sidebar-collapse="lg" data-navbar-collapse="lg">
    <!-- Root -->
    <div class="nk-app-root">
        <div class="nk-main">
            <div class="nk-sidebar">
                ...
            </div>
            <div class="nk-wrap">
                <!-- header -->
                <div class="nk-header nk-header-fixed">
                ...
                </div>
    
                <!-- content -->
                <div class="nk-content">
                ...
                </div>
    
                <!-- Footer-->
                <div class="nk-footer">
                    ...
                </div>
            </div>
        </div>
    </div>
    <!-- JavaScript -->
    <script src="./assets/js/bundle.js"></script>
    <script src="./assets/js/scripts.js"></script>
    </body>
    </html>

SCSS

We have created all the scss files in the src/scss folder.

File Structure
    
    |--html/
    |--|--src/
    |--|--|--scss/
    |--|--|--|--core/
    |--|--|--|--|--components/
    |--|--|--|--|--|--_chart.scss
    |--|--|--|--extend/
    |--|--|--|--|--bootstrap/
    |--|--|--|--|--|--components/
    |--|--|--|--vendors/
    |--|--|--|--_variables.scss
    |--|--|--|--style.scss
    |--|--|--|--theme.scss
Variables structure
  • core

    All components related scss files are created in this folder.

  • extend

    All Bootstrap components related scss files are created in this folder.

  • vendors

    All third-party plugin related scss files are created in this folder.

  • _variables.scss

    All Nioboard, and bootstrap variables are defined in this file.

Quick customization
Colors variables
  • $accent-color: #5f38f9;
  • $accent-dark: darken($accent-color, 35%);
  • $accent-darken: darken($accent-color, 52%);
  • $base-dark: #24214b;
  • $base-text: #43476b;
  • $base-color: #2e314a;
  • $base-light: #787c9e;
  • $base-lighter: $base-300;

You will find these variables in src/scss/_variables.scss file.

If you are familiar with SCSS (Recommended method), you can easily change theme colors in Nioboard's variables file. to do, go to the src/scss/_variables.scss file. and you will see a variable named $accent-color, change the primary color code from the variable $accent-color: #5f38f9;. now your theme color will be set with your own primary color.

If you are not familiar with SCSS (Not recommended method), you can change the colors of the theme by replacing the color code value with a new one in src/assets/css/style.css file.
Ex: To change the primary color of the template you need to find color value #5f38f9 and replace it with new color in src/assets/css/style.css file.

We suggest you do not change any core scss files inside the src/scss/ folders. because getting new updates will break your SCSS changes if any you have made. We strongly suggest you use theme.scss file that made for you to write your own SCSS style. and use that instead of overwriting any theme's core scss files.

Note: If you want to use only CSS format, you don't want to use SCSS. then not to worry we made a CSS file for you named [ theme.css ] you will find it in your src/assets/css folder. now write your own css style in that file.

Javascript

We have added all js files inside the src/js/bundle.js file. and our custom javascript code inside the src/js/script.js file.

File structure
    
    |--html/
    |--|--src/
    |--|--|--js/
    |--|--|--|--apps/
    |--|--|--|--|--inbox.js
    |--|--|--|--charts/
    |--|--|--|--|--chart-example.js
    |--|--|--|--bundle.js
    |--|--|--|--scripts.js

If you are not familiar with javascript, then it is hightly recommended do not make any changes to core JS files. because it may get error if you make any changes inside the core js files.

It is recommended to write your JS code, then create a new js file in js folder. and write your own javascript code.