Bonvue

Admin HTML Template

Overview

From Team Unifato, we thank you for purchasing our theme. You will get all the information regarding Bonvue here in this documentation. If there's still any issue, you can contact us through our profile page at Themeforest here, or feel free to contact us through our email.

For using this theme, Bonvue, you would need basic understanding of HTML, CSS and Javascript, please give your question a quick Google or visit W3Schools as theme issues get top priority.

Project Structure

The following is the structure how the project is arranged. Click on the folder items below to check the sub folder items.

Markup Structure

Here is the markup structure for a typical page. We'll discuss the details of these different divs in the following sections.


<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Page Preloader Files -->
  <link href=".../pace-loader.css" rel="stylesheet" />
  <script src=".../pace.min.js"></script>

  <title>Dashboard</title>
  <link href="..." rel="icon" type="image/png" sizes="16x16" />

  <!-- Stylesheets -->
  <link href="..." rel="stylesheet" type="text/css"/>

</head>
<body class="sidebar-dark header-light sidebar-expand">
  <div id="wrapper" class="wrapper">

    <!-- Header & Logo Area -->
    <nav class="navbar">...</nav>

    <div class="content-wrapper">
      <!-- Sidebar -->
      <aside class="site-sidebar">...</aside>
      <!-- Content / Widgets -->
      <main class="main-wrapper">...</main>
      <!-- Right Sidebar -->
      <aside class="right-sidebar">...</aside>
      <!-- Chat Box -->
      <div class="chat-panel">...</div>
    </div><!-- /.content-wrapper -->

    <!-- Footer -->
  	<footer class="footer">...</footer>

  </div><!-- /#wrapper -->

  <!-- Javascripts -->
  <script src="..."></script>
</body>
</html>
Tools and Installation on Local Server

You need a couple of tools to work with the theme, alternatively you can directly use the dist/ folder provided in the project. Refer to the following list for tools you need :

  1. Node.js

    For making use of this theme true power you'll need Gulp, and for Gulp you'll need Node.js to be installed on your system. Download the latest version of Node.js from here

  2. Gulp

    After installing Node.js, you need to install Gulp on your system. Run this command in Terminal/CMD of your system: npm install -g gulp

  3. Install Modules of the theme

    Open Terminal/CMD in the theme folder and run this command : npm install. This command will install the tools required for this Bonvue, for example build tools like SASS Compiler, Autoprefixer etc.

  4. Running the environment

    To start working with the theme, just open Terminal/CMD in the theme folder and run gulp. This will start the work environment for you. Now you can edit the theme in the Code Editor of your choice.

  5. Making Distribution Folder

    To make deployable theme, just open Terminal/CMD in the theme folder and run this command : gulp dist. This will generate dist/ folder in your theme directory. You can directly upload this folder to your server.

Installation

Bonvue is a static HTML Template so you don't need much installing on the server-side. Just upload the /dist folder to your server and you have it running.

NOTE: For some widgets like Twitter and Facebook Feed Widget, you'll need PHP >= 5.4 to be installed on your server.

Header

Header Classes

Header area can be easily customized by simply adding any of the following classes to the body tag like this:


<body class="header-light header-centered">
...
</body>
Class Description
-- Default. No Class required to show the default Header style, i.e the background would be the same as the color scheme of the theme.
.header-light Header with white background and dark text.
.header-dark Header with dark background and light colored text.
.header-centered The logo area would be displayed in the center of the Header area.
Menus & Submenus
Adding Menus to the header area is easy. Simply, add menus to the .navbar using the code below.

<ul class="nav navbar-nav">
  <li class="sidebar-toggle">
    <a href="#" class="ripple">
      <i class="material-icons list-icon">menu</i>
    </a>
  </li>
</ul><!-- /.navbar-left -->
    
Submenus

There are 3 styles with which you can display submenus in the Header.

  • Default: Simple Dropdown Menu:
    
    <ul class="nav navbar-nav">
      <li class="dropdown">
        <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
          Menu Dropdown
        </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Projects</a>
          <a class="dropdown-item" href="#">User Profile</a>
        </div>
      </li>
      ...
    </ul>
            
  • Dropdown Card
    
    <ul class="nav navbar-nav clearfix">
      <li class="dropdown">
        <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
          Dropdown Menu
        </a>
    
        <div class="dropdown-menu dropdown-card">
          <div class="card">
            <ul class="list-unstyled dropdown-list-group">
              ...
            </ul><!-- /.dropdown-list-group -->
          </div><!-- /.card -->
        </div><!-- /.dropdown-menu -->
      </li><!-- /.dropdown -->
      ...
    </ul><!-- /.navbar-nav -->
            
  • Dropdown Card Wide
    
    <ul class="nav navbar-nav clearfix">
      <li class="dropdown">
        <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
          Dropdown Menu
        </a>
    
        <div class="dropdown-menu dropdown-card dropdown-card-wide">
          <div class="card">
            <ul class="list-unstyled dropdown-list-group">
              ...
            </ul><!-- /.dropdown-list-group -->
          </div><!-- /.card -->
        </div><!-- /.dropdown-menu -->
      </li><!-- /.dropdown -->
      ...
    </ul><!-- /.navbar-nav -->
            

SCSS / CSS

You can find all the scss in the assets/scss folder, all the compiled SCSS are returned to assets/css. We have also used a SASS Library called Bourbon, which has a lot of Mixins to help in the coding SCSS. You'll get the following files and folders in SCSS folder.

  1. Compiled Files

    .scss files directly under assets/scss folder are compiled to assets/css. It houses the main styling style.scss and the preloader styling used, i.e., Pace.js in pace.scss

  2. Base

    This folder contains all the basic styling of the theme. Global styling, animations library, helper classes, useful mixins and variables file can be found here in this folder.

  3. Variables

    Variables file contains all the settings of the theme. From here you can change the settings of almost all of the theme.

  4. Components

    This folder contains all the styling of the widgets and components of the theme. Like widgets, maps etc.

  5. Layouts

    This folder contains the styling of the layouts of the theme. Like header, sidebar etc.

  6. Vendors

    This folder hosts the libraries the SCSS uses, in our theme its Bourbon Library.

Javascript

You can find javascript folder in assets/js folder. The javascript for Bonvue is divided into two parts.

  1. theme.js

    This file contains plugin declarations that can be used across the theme with the help specific classes and attributes. It is advisable that you don't edit this file.

  2. custom.js

    This file contains javascripts that are element specific rather than theme specific. You can add extra Javascript code here.

Helper Classes

We have created Helper classes page with the theme. You can see it here

Plugins