Barbeque Resto is an HTML5 & CSS3 responsive template created for the restaurant but also can be used for the generalized website. 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 bootstrap framework and integrated themify icons icon set so easy to customize and develop your own styles. Barbeque Resto is a retina ready so it works nicely on smartphones, tablet PCs, and desktops. Easily customizable, 24/7 support time.

2.General Information

Software requirements

  • Sublime Text 3 used to edit the .HTML, .JS, .PHP, .CSS and .SCSS files.
  • Barbeque Resto 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 Bootstrap icon files.
    • Images – contains all the images.
    • Js – contains all javascript library or plugin files.
    • sass – contains all SCSS and variable files.
    • Home-one.html – contains all UI code.
    • Home-one.html – contains all UI code.
    • Home-two.html – contains all UI code.
    • About-one.html – contains all UI code.
    • About-two.html – contains all UI code.
    • event-one.html – contains all UI code.
    • event-two.html – contains all UI code.
    • gallery-one.html – contains all UI code.
    • gallery-two.html – contains all UI code.
    • reservation-one.html – contains all UI code.
    • reservation-two.html – contains all UI code.
    • blog-one.html – contains all UI code.
    • blog-two.html – contains all UI code.
    • contact-one.html – contains all UI code.
    • contact-two.html – contains all UI code.
    • + More.html – contains all UI code.
  • Screenshot – Contains screenshot of the template.
  • Sources – contains source files.
    • sass – contains .scss files used in template.
  • readme.txt – contains the information about the theme

3.File Structure

HTML Structure

This template has a responsive layout. It has a block structure and well-commented code.


CSS Structure

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


Js Structure

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


4.Reference File

In this theme, we have used google font Dancing+Script, Lato. 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 theme jQuery libraries and plugins have been used for dynamic animation.

  • jQUery (js/jquery.min.js)
  • Bootstrap (js/bootstrap.js)
  • owl carousel (js/owl.carousel.js)
  • masonry (js/masonry.min.js)
  • bootstrap datepicker (js/bootstrap-datepicker.js)
  • aos animate (js/aos.js)
  • shuffle (js/jquery.shuffle.min.js)
  • smooth scroll (js/smoothscroll.min.js)
  • lightbox swipe box (js/jquery.swipebox.min.js)
  • custom (js/custom.js)

Stylesheet (CSS) Reference File

  • bootstrap (css/bootstrap.css)
  • themify icons (css/themify-icons.css)
  • icofont icon (css/icofont.css)
  • font-awesome (css/font-awesome.css)
  • animate (css/animate.css)
  • owl carousel (css/owl.carousel.css)
  • datepiker (css/datepiker.css”)
  • aos animate (css/aos.css)
  • swipebox (css/swipebox.css)
  • style (css/style.css)

themify icons

themify icons have been used in this theme. Learn more about themify icon from themify website. In a single collection, themify 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.


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=”” class=”site-content” and class=”section-title” and class=”section-wrap class is used to creating the out layer of section

                      <section id="" class="site-content">
                        <div class="container>
                          <div class="section-wrap"> 
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> 
                              Secton content element
                            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> 
                              Secton content element
                          <!-- section-wrap-->

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 to server root directory.

7.Help & Support

Thank you for purchasing the Barbeque Resto template. If you have any question that is beyond the scope of this documentation, Please feel free to email to ticket@makewebbetter.com

Suggest Edit