Thank you so much for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email us or submit a comment to this template. Thanks so much!
Dashbyte, a premium quality modern and clean Bootstrap 5 dashboard template using simplicity and minimal design. It is fully responsive built using SASS preprocessor, HTML5, CSS3 and jQuery plugins. It uses most of the helper/utilities classes which are reusable class that makes the page faster and increases the speed of page time load.
This part of the doc will help you to quick start your project and will give you a basic idea about how this template work. For you to get start open the template download package.
Before installing gulp and sass first you must have NodeJs installed, NodeJS will have npm (node packaged modules).
Node.js is an open-source server environment. Node.js is cross-platform and runs on Windows, Linux, Unix, and macOS. Node.js is a back-end JavaScript runtime environment. Node.js runs on the V8 JavaScript Engine and executes JavaScript code outside a web browser.
Online Reference: https://nodejs.org/en/
Installing in Mac
Simply download the macOS Installer directy from the nodejs.org web site.
If you want to download the package with bash:
curl "https://nodejs.org/dist/latest/node-${VERSION:-$(wget -qO- https://nodejs.org/dist/latest/ | sed -nE 's|.*>node- (.*)\.pkg.*|\1|p')}.pkg" > "$HOME/Downloads/node-latest.pkg" && sudo installer -store -pkg "$HOME/Downloads/node-latest.pkg" -target "/"If you want to install using homebrew:
brew install nodeInstalling in Windows
Simply download the Windows Installer directy from the nodejs.org web site.
Before installing gulp first you must have NodeJs installed, NodeJS will have npm (node packaged modules).
Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.
Online Reference: https://gulpjs.com/
Installing the CLI
If you have previously installed a version of gulp globally, please run npm rm --global gulp to make sure your old version doesn't collide with gulp-cli.
$ npm install -g gulp-cliVerify that gulp is successfully installed, and version of installed gulp will appear.
$ gulp --vSass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets.
Before running gulp first you must check if you have sass installed in your machine. You can verify that sass is already installed by running the command.
$ sass --vIf version appear, it means sass already installed in your machine and proceed to the next topic, otherwise follow the instructions below on installing sass.
Installing in Windows
Before you start using Sass you will need to install Ruby. The fastest way to get Ruby on your Windows computer is to use Ruby Installer. It's a single-click installer that will get everything set up for you super fast.
Installing in Mac
If you prefer the command line over an application then getting Sass set up is a fairly quick process. Sass has a Ruby dependency but if you're using a Mac, congratulations, Ruby comes pre-installed.
Ruby uses Gems to manage its various packages of code like Sass. In your open terminal or cmd window:
$ gem install sassYou should now have Sass installed, but it never hurts to double-check.
$ sass --vOnline reference: https://www.ruby-lang.org/en/documentation/installation/
You're moments away to see the dashboard template up and running in your local machine. First, go to the root folder where the package.json located. In your download package it should be in the root folder. Please run the following command below.
$ npm installThis will download all dependencies defined in package.json file. Once it finished running the command, it will generate a folder name node_modules/ where you see downloaded files.Next, run another command below.
Running in Browser
Now you're good to go in running the template and preview it in browser by running the command below.
$ gulp serveThe template is now up and running in your browser. Feel free to visit each page and familiarize the flow of it.
Include the following stylesheet into the head of your page. This must be present in all of your pages.
<!-- Vendor CSS -->
<link rel="stylesheet" href="../lib/remixicon/fonts/remixicon.css">
<!-- Template CSS -->
<link rel="stylesheet" href="../assets/css/style.min.css">
<!-- some additional css here -->Include the following scripts into the end of the body your page. This must be present in all of your pages.
<script src="../lib/jquery/jquery.min.js"></script>
<script src="../lib/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../lib/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script src="../assets/js/script.js"></script>Quickly get a page started with any of our starter pages ranging from dashboard to other pages.
Dashboard
Below is the starter template structure that you can use in creating a new dashboard page.
<div class="sidebar">
<div class="sidebar-header">
<a href="../" class="sidebar-logo">dashbyte</a>
</div><!-- sidebar-header -->
<div id="sidebarMenu" class="sidebar-body">
<div class="nav-group show">
<a href="#" class="nav-label">Dashboard</a>
<ul class="nav nav-sidebar">
<li class="nav-item">
<a href="#" class="nav-link active"><i class="ri-menu-line"></i> <span>Menu 1</span></a>
<a href="#" class="nav-link"><i class="ri-menu-line"></i> <span>Menu 1</span></a>
</li>
</ul>
</div><!-- nav-group -->
</div><!-- sidebar-body -->
<div class="sidebar-footer">
...
</div><!-- sidebar-footer -->
</div><!-- sidebar -->
<div class="header-main px-3 px-lg-4">
<a id="menuSidebar" href="#" class="menu-link me-3 me-lg-4"><i class="ri-menu-2-fill"></i></a>
<div class="form-search me-auto">
<input type="text" class="form-control" placeholder="Search">
<i class="ri-search-line"></i>
</div><!-- form-search -->
<div class="dropdown dropdown-notification ms-3 ms-xl-4">
...
</div><!-- dropdown -->
<div class="dropdown dropdown-profile ms-3 ms-xl-4">
...
</div><!-- dropdown -->
</div><!-- header-main -->
<div class="main main-app p-3 p-lg-4">
...
<div class="main-footer mt-5">
...
</div><!-- main-footer -->
</div><!-- main -->Apps
Below is the starter template structure that you can use in creating a new app page with offset sidebar.
<body class="sidebar-offset">
<div class="sidebar">...</div>
<div class="header-main px-3 px-lg-4">...</div>
<div class="main main-app p-3 p-lg-4">...</div>
</body>Pages
Below is the starter template structure that you can use in creating a new page other than dashboard and apps.
<div class="sidebar">...</div>
<div class="main-mobile-header doc-mobile-header">
<a id="menuLink" href="#" class="menu-link"><i class="ri-menu-line"></i></a>
</div><!-- main-mobile-header -->
<div class="main main-app p-3 p-lg-4">...</div>Not displaying font icons in opening the html files directly in a browser.
A page loaded from a file:// URI, only files in (or below) the same directory of the filesystem are considered to be "same origin", and so putting the font in a different subtree (../font/) means it will be blocked by security policy restrictions. Most browser disables cross-domain fonts "by default. By fixing this, you need to put the file in a remote or local server. Anyway, that what where we're going.
Missing some images in template package
Some images you see in the demo are use only for demo purposes only and is not allowed to be included in the template download package.
You can request for support via email or themeforest item comments.
We will assist you any problem you encounter while buidling your dashboard via this template
We use request help form in comments and email to manage customer support. Soon, as we grow, we will invest and find the best customer support system we can use to serve you better.
For the meantime, submit a help request to the link given for any issues and concerns that you have. Don't worry, we will respond to you as quickly as we can. Thank you!