Once downloaded, unzip the compressed folder to see the structure of the Babysitter. You'll see next structure:

This template based on a responsive layout. All of the information within the main content area is nested within a body tag. The general template structure is the same throughout the template. Here is the general structure.

    
  
  


    

      ...
    
    

      ...
    
    
  
  

  
  


    
    

      ...
    
    

    
    
    
    
  
  

As you can see there are two kind of logos: Text based (by default) and Image based. You can choose prefered variant by removing html comments.

  
  
Babysitter
  
Responsive HTML template

The page navigation links such as Home, Blog, Contact etc are included within a nav-main and ul-tag with class flexnav.

Stylesheets

Here's a list of the stylesheet files I'm using with this template, you can find more information opening each file:

File Name	Description
theme.css	Base file that includes general styles.
theme-elements.css	Includes styles for elements, shortcodes etc.
animate.min.css	A cross-browser library of CSS animations. As easy to use as an easy thing. http://daneden.github.io/animate.css

css/theme.css

This file includes all variables used in this template. If you want to change style and colors of the template you should start from this file.

/* Table of Content
==================================================
  #General
    - Typography
  #Header
    - Text Based Logo
    - Image Based Logo
  #Navigation
  #Slider
  #Content
    - Page Heading
    - Page Content
  #Widgets
    - Base Widgets
    - Latest Post Widget
    - Contacts Info
    - Flickr
    - Tag Cloud
    - Tabbed Widget
  #Pages
    - About Us
    - 404 Error Page
    - Coming Soon
    - Contacts
  #Blog
  #Portfolio
  #Footer
    - Footer widgets
    - Copyright
*/

css/theme-elements.css

This file includes base elements styling used in this template.

/* Table of Content
==================================================
  #Links
  #Headings
  #Buttons
  #Lists
  #Thumbnails
  #Forms
  #Social Links
  #Tabs
  #Tables
  #Accordion
  #Call to Action
  #Icon Box
  #Blockquotes & Testimonial
  #Alerts
  #Dropcaps
  #Pricing Tables
  #Progress Bars
  #Misc
    - Rules
    - Spacers
    - Helpers
    - etc.
*/

JavaScript Files

Here is a list of javascript files used in this template.

File	Description
vendor/jquery-1.11.0.min.js	jQuery is a Javascript library that greatly reduces the amount of code that you must write.
custom.js	Most of the animation in this site is carried out from the customs scripts. There are a few functions worth looking over.
jquery.appear.js	This plugin can be used to prevent unnecessary processeing for content that is hidden or is outside of the browser viewport.
js/contact-form.js	This script contains javascript validation part for contact form.
jquery.fitvids.js	A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
jquery.flexnav.min.js jquery.hoverIntent.minified.js	FlexNav is a mobile-first example of using media queries and javascript to make a decent multi-level menu with support for touch, hover reveal, and keyboard tab input accessibility. Special attention is paid to touch screens using tap targets (the key feature of FlexNav).
jquery.flickrfeed.js	This plugin works by pulling a JSON feed from Flickr and applying the data it gets back to a template.
jquery.isotope.min.js jquery.imagesloaded.min.js	An exquisite jQuery plugin for magical layouts.
jquery.jcountdown.min.js	This plugin used on Coming Soon page used for countdown timer.
jquery.magnific-popup.min.js	Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device.
jquery.gmap3.min.js	jQuery plugin for displaying Google Map.
owl.carousel.js	Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.

First, if you don’t know what is LESS you may want to take a look at lesscss.org

Now let’s get started. First download the winless and then install it into your computer. The installation is very easy.

1. Open the installed WinLess
2. Then add css/ folder into the winless by clicking add folder button then choose the folder
3. Hit compile button at bottom right.

To use google map you must include jquery.gmap3.min.js file inside the head tag of your HTML document and api script:

Start by creating a "div" tag with class="googlemap-wrapper", and then insert "div" with id="map_canvas" and class="map-canvas" this part is mandatory because the jquery plugin targets that id specifically.

Once you've done that you need to change position '40.717599,-74.005136'. You can find appropriate value here maps.google.com

This template contains fully working contact form. All you need is replace you actual e-mail address.

In order to receive messages you need to edit line 8 of php/contact-form.php file and type in your own email address:

$to = 'YOUR_EMAIL_GOES_HERE';

How to make field not required?

1. Open js/contact.js
2. On row 96 you can find rules for fields. Find field you want to make not required and set it to false: required: false
3. Open contacts.html and find field markup.
4. Remove * from the label.

How to add fields to the contact form?

1. Open contacts.html and add next html inside contact form markup:

   

   
   
2. Open js/contact.js and add

   

   
   
3. In js/contact.js set validators

   

   
   
4. Open php/contact-form.php and add next code

   

   
   

How to add dropdowns and checkboxes to the contact form?

1. Open contacts.html and add next html inside contact form markup:

   

   
   
2. Open js/contact.js and add

   

   
   
3. Open php/contact-form.php and add next code

   

   
   

To use flickr feed widget you need to change flickr id:

1. Open js/custom.js
2. Change Flickr id (row 104)

   id: '52617155@N08'
   

3. Save your changes