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.
The following is the structure how the project is arranged. Click on the folder items below to check the sub folder items.
Here is the markup structure for a typical page. We'll discuss the details of these different
divs in the following sections.
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 :
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
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
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.
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.
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.
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 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>
|--||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 with white background and dark text.|
||Header with dark background and light colored text.|
||The logo area would be displayed in the center of the Header area.|
Logo can be an image like shown in the code below. Here you can add a wide as well as a thin version of your logo image:
<div class="navbar-header"> <a href="index.html" class="navbar-brand text-center"> <img class="logo-expand" alt="" src="logo-expand.png" /><!-- Expanded / Wide Version --> <img class="logo-collapse" alt="" src="logo-collapse.png" /><!-- Collapsed / Thin Version --> </a> </div>
Alternatively the logo can be just a text, as shown in the code below:
<div class="navbar-header"> <a href="index.html" class="navbar-brand text-center"> <p>Bonvue</p> </a> </div>
You can customize the the logo style using different classes with the
<body class="logo-dark header-light"> ... </body>
|--||Default. No Class required to show the default Logo style, i.e the background would be the same as the color scheme of the theme.|
||Logo with white background and dark text.|
||Logo with dark background and light colored text.|
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.
.scssfiles directly under
assets/scssfolder are compiled to
assets/css. It houses the main styling
style.scssand the preloader styling used, i.e., Pace.js in
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.
Variables file contains all the settings of the theme. From here you can change the settings of almost all of the theme.
This folder contains all the styling of the widgets and components of the theme. Like widgets, maps etc.
This folder contains the styling of the layouts of the theme. Like header, sidebar etc.
This folder hosts the libraries the SCSS uses, in our theme its Bourbon Library.
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.
We have created Helper classes page with the theme. You can see it here