Bondy Overview

Bondy is an incredibly eye catching and fully responsive Bootstrap 3 Template for any upcoming project. Template comes with developer friendly and easy to customizable code. It works on all main web browsers "IE8+", tablets and phones.

We hope you will enjoy using Bondy template’s easy to navigate, user-friendly and catchy layout and yet developer friendly code. Our best wishes for your project or your customer :).

Copy Rights

Main Structure

Bondy landing page structures as header, slider, section, footer and copyrights very google friendly html.


Beginning of the Page

In order to detect Internet Explorer browser version a specific class implemented to following code at the beginning of all HTML pages

<!doctype html> 
<!--[if lt IE 7]><html lang="en" class="no-js ie6"><![endif]--> 
<!--[if IE 7]><html lang="en" class="no-js ie7"><![endif]--> 
<!--[if IE 8]><html lang="en" class="no-js ie8"><![endif]--> 
<!--[if gt IE 8]><!--> 
<html lang="en" class="no-js"> 
<!--<![endif]-->

Sections

Each section are in section tag with an id for the nav scrolling, inside it .section-heading class and contents.

.scrollpoint class is for animation on scrolling it's toggeling when the section in the view.

.sp-effect1, .sp-effect2, .sp-effect3, .sp-effect4, .sp-effect5 and .sp-effect6 classes is for adding animation classes each has it's own effect.

.divider is the seperatot between the h1 and h4 sub title.

<section id"id_goes_here"> 
    <div class="container"> 
        <div class="row"> 
            <div class="col-md-8 col-md-push-2 clearfix"> 
                <div class="section-heading scrollpoint sp-effect3"> 
                    <h1>.Titl<span>e</span> 
                    </h1> 
                    <h4>sub title goes here</h4> 
                    <span class="divider"></span> 
                </div> 
            </div> 
            <div class="col-md-12"> 
                <!--Content Goes Here With bootstrap Standards col-xs-# --> 
            </div> 
        </div> 
    </div> 
</section>

Theme Configuration

Bondy Template includes Three predefined theme colors. You can easily change the theme for your favorite colors using sass Css.

Using sass

Bondy Template uses sass css processor, you can find the sass files in ../sass. We will take you step by step to know the structure well.

The head for sass will look like this :

<!-- Contains Template Styling --> 
<link rel="stylesheet/sass" href="sass/styles.scss"> 

To Change colors open styles.scss you can find it in /sass/styles.sass, below how code looks like, see the $brand-primary: change #ff7f00 to your light color. and it will calculate the light and the dark of this color

Compile the styles.scss file and you will get a ready css file with your favorite color.

Sass mixins

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700); 

//Colors 

$brand-primary :        #ff7f00; // this is the primary color for your template
$brand-primary-light :  lighten($brand-primary, 20%); // the lighter color for your primary color
$brand-primary-dark :   darken($brand-primary, 20%); // the darker color for your primary color
$brand-success:         #5cb85c; // success color
$brand-info:            #5bc0de; // info color 
$brand-warning:         #f0ad4e; // warning color  
$brand-danger:          #d9534f; // danger color 

//Grays 
$gray-darker:           lighten(#000, 13.5%); // #222 
$gray-dark:             lighten(#000, 20%);   // #333
$gray:                  lighten(#000, 33.5%); // #555 
$gray-light:            lighten(#000, 60%);   // #999
$gray-lighter:          lighten(#000, 93.5%); // #eee 

//Basic Colors 
$white-color :         #FFFFFF; // hex of the white 
$black-color:         #000000; // hex of the black

//font family 
$font-stack :         'Open Sans', Tahoma, Arial; 

//Mixins 

//Primary Color Gradient 
@include primaryGrad(gradDegree , gradStart, gradEnd ); 

//Gray Color Gradient 
@mixin grayGrad(gradDeg , gradStart, gradEnd); 

//Border Radius 
@mixin border-radius(radius); 

//Box Shadow 
@mixin box-shadow(shadow ); //like 0px 1px 3px rgba(0,0,0,.5)

//Text Shadow 
@mixin text-shadow(text Shadow );  //like 0px 1px 3px rgba(0,0,0,.5)

//Transition 
@mixin transition( transition value ); 

//Transparent 
@mixin transparent(color, alpha);

If you don't know how to compile sass use very easy koala app for windows, mac or linux.

Stylesheets

Bondy comes with three different colors trying to meet your needs, ../css/styles.css, ../css/styles2.css and ../css/styles3.css in the html you will find it in the head seaction :

You can change it to your .css file favorite theme.

<link rel="stylesheet" href="css/styles.css">

If you want to use any of the predefined colors keep it as is :).

Javascript Intialization

Core javascript initialization implemented in ../js/script.js thorugh appMaster object as shown below. This approach enables an easy modular implementation to initialize jquery plugins and other application logics.

You can call any of the available functions by objects for example : appMaster.smoothScroll();, or even add your own.

var appMaster = { 

    preLoader: function(){ 
        // page preloader 
    }, 

    navSpy: function(){ 
        // navspy for nav menu 
    }, 

    smoothScroll: function() { 
        // Smooth Scrolling animates the whole web page to the section clicked 
    }, 

    scollToTop: function(){ 
        // scoll to top script 
    }, 

    revSlider: function(){ 
        // Revolution Slider Initialization  
    }, 

    skillsCircles: function(){ 
        // skills Circles Initialization  
    }, 

    maps: function(){ 
        // Google Maps 
    }, 

    isoTop: function(){ 
        // isotop Initialization  
    }, 

    animateScript: function() { 
        // this animates the elements on scrolloing using waypoint plugin
    },

    canvasHack: function(){ 
        // hack for canvas to work in ie8 
    }
}; 

Fonts

Bondy Template uses Open Sans font for headings from Google Web Fonts. You are able to choose more than 600+ fonts from Google Web Fonts. The font imported in the theme css file ../css/styles.css

In sass project you will find it in styles.scss file you can find it in ../sass/styles.scss.

// Font Importing 
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700,900);

Credits

Name URL
Twitter Bootstrap http://twitter.github.io/bootstrap
jQuery http://jquery.com
Font Awesome http://fortawesome.github.io/Font-Awesome
easyPieChart https://github.com/rendro/easy-pie-chart
excanvas https://code.google.com/p/explorercanvas/
Revolution Slider http://www.themepunch.com/codecanyon/revolution
isotope http://isotope.metafizzy.co/
Waypoint https://github.com/imakewebthings/jquery-waypoints
Mockups http://freebbble.com/

Mockup Download Links

As promissed here are the link to download mockups download from here.

Thank You For Purchasing Our Template, We Wish For You The Best Of Luck With Your Client, Cheers :). ScoopThemes Team.