1.Welcome

Barber Hair Template is an HTML5 & CSS3 responsive template created for Barber Hair but also can be used for a generalized website. Barber Hair Template is best suited for like Doctor Portfolio, Barber hair and Dental etc. It’s fully responsive design and clean, was tested on all major handheld devices. It is a fully responsive, feature rich and beautifully designed to host a website or create the online identity. It supports the bootstrap framework and integrated themify icons icon set so easy to customize and develop your own styles. Barber Hair Template is a retina ready so it works nicely on smartphones, tablet PCs and desktops. Easily customizable.

Yes No Suggest edit

2.General Information

Software requirements

  • Sublime Text 3 used to edit the .HTML, .JS, .PHP, .CSS and .SCSS files.
  • Barber Hair Template used as precompiler for SCSS to CSS convert.

The following scheme displays the theme files structure.

  • Documentation – contains documentation on template customization and support
  • Template – contains the main files of the template which will be uploaded to the server.
    • CSS – contains all Stylesheets used for UI.
    • themify icons – contains themify icons files.
    • Fonts – contains themify icon files.
    • Images – contains all the images.
    • Js – contains all javascript library or plugin files.
    • SASS – contains all SCSS and variable files.
    • index.html – contains all UI code.
    • + More.html – contains all UI code.
  • Sources – contains source files.
    • sass – contains .scss files used in template.
  • readme.txt – contains the information about theme
Yes No Suggest edit

3.File Structure

HTML Structure

This template is based on Barber Hair and also has a responsive layout. It has a block structure and well-commented code so you can easily edit section anywhere.

Barber Hair-html

 

CSS Structure

If any styles need to be changed just replace it with the wanted styles in the respective block in your coloured style-color.css.

Barber Hair-CSS

 

Js Structure

This template has dynamic animations, which have been implemented in JavaScript. The JS file is custom.js.

Barber Hair-js

Yes No Suggest edit

4.Reference File

In this template, we have used google font Prata, Oriental. You can learn more about using Google Web Fonts by checking the tutorial on how to work with Google web Fonts.

JQuery Plugin:

In this template jQuery libraries and plugins have been used for dynamic animation.

  • aos animate (js/aos.js)
  • Bootstrap-datepicker (js/bootstrap-datepicker.js)
  • Bootstrap (js/bootstrap.js)
  • custom-map (js/custom-map.js)
  • custom (js/custom.js)
  • jQuery (js/jquery.min.js)
  • jQuery.shuffle (js/jquery.shuffle.min.js)
  • jQuery.swipebox (js/jquery.swipebox.min.js)
  • masonary (js/masonary.min.js)
  • owl carousel (js/owl.carousel.js)
  • shuffle (js/shuffle.min.js)
  • smoothscroll (js/smoothscroll.min.js)
  • vivus (js/vivus.js)

Stylesheet (CSS) Reference File

  • animate (css/animate.css)
  • aos animate (css/aos.css)
  • bootstrap (css/bootstrap.css)
  • datepicker (css/datepicker.css)
  • font-awesome (css/font-awesome.css)
  • jquery.ui.timepicker (css/jquery.ui.timepicker.css)
  • owl carousel (css/owl.carousel.css)
  • style (css/style.css)
  • swipebox (css/swipebox.css)
  • themify icon (css/themify-icons.css)

themify icons

themify icons have been used in this template. Learn more about themify icon from themify website. In a single collection, Font Awesome is a pictographic language of web-related actions. Easily style icon color, size, shadow, and anything that’s possible with CSS. themify icons are vectors, which mean they’re gorgeous on high-resolution displays.

Yes No Suggest edit

5.Customisation

It is HTML5, CSS3 and Js based template so you can edit it yourself.

This template use bootstrap grid to make it very easy for anybody to understand the grid system and we have created other grid for layout. See below for more info

Classes of Sections

id=”section07″ class=”site-content appointment” and class=”section-title” and class=”section-wrap” class is used to creating the out layer of section

                    <code class="language-html">
                      <section id="section07" class="site-content appointment">
                        <div class="container">
                          <div class="section-title mg-bottom-40 text-center">
                            <h3 class="fs-30 site-common-color">make a quick appointment</h3>
                          </div><!-- section-title -->
                          <div class="section-wrap">
                          </div>
                        </div>
                      </section>
                    </code>
Barber Hair-Background

.section-title class is used to creating the main title of the section

<section id="section08" class="site-content gallery">
                      <div class="container-fluid">
                        <div class="section-title mg-bottom-40 text-center">
                          <h3 class="fs-30 site-common-color">gallery</h3>
                        </div><!-- section-title -->
                        <div id="lightgallery" class="row grid">
                        </div>
                      </div>
                    </section>

Barber Hair-section heading

.container class is used to creating container for section content

                    <section id="" class="site-content">
                      <div class="container>
                        <div class="section-title">
                          <h3>Secton content element<h3>
                          </div>
                          <!-- section-title-->
                          <div class="section-wrap"> </div>
                        <!-- section-wrap-->
                      </div>
                    <section>

.site-content, .col-lg-6, .col-md-6, .col-sm-6, .col-xs-12 class is used to give background color of section

                    <section id="" class="site-content">
                      <div class="container>
                        <div class="section-title">
                          <h3>Secton content element<h3>
                        </div>
                        <!-- section-title-->
                        <div class="section-wrap"> 
                          <div class="row">
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                              Secton content element
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                             Secton content element
                            </div>
                          </div>
                        </div>
                        <!-- section-wrap-->
                      </div>
                    <section>
  
Barber Hair-Services
Yes No Suggest edit

6.Upload Document

Unzip package in an empty directory and you will see template folder. In template folder change content according to yours then upload this folder on server root directory.

Yes No Suggest edit

7.Help & Support

24/7 Support, Just mail us any issue we will be happy to help.

If you have any question that is beyond the scope of this documentation, Please feel free to email to   webmaster@makewebbetter.com

 

Yes No Suggest edit
Suggest Edit