Back to home

Documentation

Introduction

Template Name: Busiplus - Business Template

Version: 1.0.0

Created On: 30 May 2020

Author: LettstartDesign

Email: support@lettstartdesign.com

Busiplus is powerful and stunning multi pages template/website based on bootstrap framework. Busiplus is high customisable, fully responsive and flexible template built with Bootstrap 4, SaSS and Gulp. It helps you to create well designed agency and multi purpose websites.

SaSS compiler makes it easier to code and customize. If you are unfamiliar with Bootstrap or SaSS, visit their website and read through the documentation. All of Bootstrap components have been modified to fit the style of Letstart and provide a consistent look throughout the template.

Before you start working with the template, we suggest you go through the pages that are bundled with the theme. Most of the template example pages contain quick tips on how to create or use a component which can be really helpful when you need to create something on the fly.

Note: We are trying our best to document how to use the template. If you think that something is missing from the documentation, please do not hesitate to tell us about it. If you have any questions or issues regarding this theme email at support@lettstartdesign.com or generate ticket on our portal.

By purchasing this template, you are assured with detailed documentation along with 1 Year Premium Support by our dedicated support team and free lifetime updates from us.


Dependencies
Template Features
  • Built on Bootstrap 4.5, SaSS and Gulp
  • 24+ Homepage
  • Integrated Contact Form with PHP
  • Responsive Design
  • Fully Mobile Responsive
  • Unique, Clean and Modern Design
  • Pixel Perfect Design
  • Clean Code & Unique Design
  • Easy to Customize
  • Cross Browser Optimization
Installation

After download a source package From our Store.

Install Node.js From https://nodejs.org/en/download/

After that open command promt or any other terminal and go to Package Path.

cd [root] / code /

Npm is a default package manager for the JavaScript runtime environment Node.js. If you've already then update once.

npm install --global npm@latest

To check weather is node succesfully install or not.

npm --version

For yarn package manager.

npm install --global yarn

To check weather is yarn succesfully install or not.

yarn --version

Now, run the below command(This command will install the necessary libraries in node_modules folder which is generated by this command):

npm install

Normally project will run on the localhost:3000 or it will take port accordingly and for run the project run the below command:

gulp watch or npm start

How to Install npm dependencies?

In your root folder enter the following command to install the project dependencies: npm install, this command will install all the template libraries inside the node_modules folder.

How to Install npm packages?

npm install packagename, this command will install the package in node modules.

Getting started

After unzip the downloaded pack, you'll get a APP and DIST folder. DIST folder is compiled version of APP. APP is raw files using gulp you will generate the dist files. All the configuration of gulp will be in gulp file.

You can directly use the compiled DIST and ready-to-use the version of the template. But in case you plan to customize the template extensively the template allows you to do so. You need to edit in APP files by the help of gulp it convert the APP files into DIST files and You will able to see the changes.

You can view this Template in any browser, you can display or edit the Template without an internet connection.(May not works fonts).

After change in any files or you add any assets like javascript, css, images. You need to upload on the server. To upload file on server open your cpanel/controlpanel or open filezilla and upload the content/assets of the Template on your server's root directory.

Once the files are done uploading go to www.yourdomainname.com/index.html

Folder Structure

After purchasing our template extract the zip file and you will see this structure.

  • Busipluss/
    • documentation/
    • dist/
      • assets/
        • css/
        • fonts/
        • images/
        • js/
        • php/
        • vendors/
      • HTML Files
    • src/
      • assets/
        • css/
        • fonts/
        • images/
        • js/
        • libs/
      • Partials
      • HTML Files
    • Gulp.js
    • package.json
Fonts

By default, the template loads this font from Google Web Font Services, you can change the font with the one that suits you best.

											
@import "https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i",
  "https://fonts.googleapis.com/css?family=Raleway:200,300,400,400i,500,600,700,800,900&subset=latin-ext";
											
										
Icons

Font Awesome: <i class="fa fa-eye"></i>

Simple Line Icon: <i class="icon-eye"></i>

Box Icon: <i class="bx bx-menu"></i>

How to use library functions

Some plugin difficult to use don't worry we are giving the example with good text.

How to use GULP

GULP is a task runner for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.

How to use it:

Install all the dependencies that is required for the project like

1. npm install -gulp

2. Make gulpfile.js

3. Define task in gulpfile.js

															
gulp.task('watch', ['browserSync', 'sass'], function (){
	gulp.watch('app/assets/scss/**/*.scss', ['sass']); 
	gulp.watch('app/*.html', browserSync.reload); 
	gulp.watch('app/assets/dist/js/**/*.js', browserSync.reload); 
});
															
														
How to use AOS Library

AOS library used for the animation. Element will animate on document or window scroll.

How to use it:

Add following things in your <HTML>

															
<link rel="stylesheet" href="/path/aos.min.css" >
<script src="/path/aos.min.css"> <script>
Add AOS attributes in div element <div class="col-md-4 mb-30" data-aos="zoom-in" data-aos-duration="500">
Add plugin call in script tag AOS.init({ offset: 150, duration: 400, easing: 'linear', delay: 0, once: true, disable: 'mobile' });
How to use jQuery validation library

jQuery Validation is a jQuery plugin that makes simple client side form validation easy, whilst still offering plenty of customization options.

How to use it:

Add following things in your <HTML>

															
<script src="/path/jquery.validate.min.js"><script>
<script src="/path/additional-methods.min.js"> <script>
Add plugin call in script tag $(formID).validate({ focusInvalid: false, rules: { 'validation-email': { required: true, email: true }, 'validation-name': { required: true, }, 'validation-subject': { required: true, }, 'validation-message': { required: true, }, 'validation-required': { required: true } }, // Errors errorPlacement: function errorPlacement(error, element) { var $parent = $(element).parents('.form-group'); // Do not duplicate errors if ($parent.find('.jquery-validation-error').length) { return; } $parent.append( error.addClass('jquery-validation-error small form-text invalid-feedback') ); }, highlight: function (element) { var $el = $(element); var $parent = $el.parents('.form-check'); if ($parent.length > 0) { $parent.addClass('is-invalid'); } else { $el.addClass('is-invalid'); } // Select2 and Tagsinput ($el.hasClass('select2-hidden-accessible') || $el.attr('data-role') === 'tagsinput') { $el.parent().addClass('is-invalid'); } }, unhighlight: function (element) { $(element).parents('.form-check').removeClass('is-invalid'); } });
How to use owl carousel library

Owl Carousel is a touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.

How to use it:

Add following things in your <HTML>

															
<link rel="stylesheet" href="/path/owl.carousel.min.css" >
<script src="/path/owl.carousel.min.js"> <script>
Add plugin call in script tag $(classname).owlCarousel({ items: 3, dots: false, autoplay: true, nav: false, smartSpeed: 800, margin: 30, loop: true, responsive: { 0: { items: 1 }, // breakpoint from 480 up 480: { items: 1 }, // breakpoint from 768 up 768: { items: 2 }, 1100:{ items: 3 } }, });
References
  • Simple Line Icon
  • Box Icon
  • Font Awesome
  • Bootstrap
  • Animate CSS
  • HTML5SHIV
  • Respond JS
  • jQuery
  • AOS
  • Counter UP
  • Photoswip
  • jQuery Validation
  • Owl Carousel
  • Pixabay for Image
  • Unsplash for Image
Support

We are committed to our customers and support is at up most priority. If you have any question, issue with BUSIPLUSS, please feel free to contact us via email support@lettstartdesign.com or generate ticket on our portal.

What's includes
  • Answering your questions or problems regarding the template.
  • Giving or Solving bugs report by you.
What's not includes
  • Customization Work
  • Support for third party plugins.
  • Support or guide how to integrate with backend technologies(like php, java, .net, etc).