x

Oleose Overview

Oleose is an incredibly eye catching and fully responsive Bootstrap 3 Template for any app profissional landing page. 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 Oleose template’s easy to navigate, user-friendly and catchy layout and yet developer friendly code. Our best wishes for your mobile app or your customer :).

Copy Rights

Main Structure

Olease 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 IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![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 and .sp-effect5 classes is for adding animation classes each has it's own effect.

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

<section id"id_goes_here">
    <div class"container">

        <div class"section-heading scrollpoint sp-effect3">
            <h1>About Us</h1>
            <div class"divider"></div>
            <p>sub title goes here</p>
        </div>

        <div class"row">
            <!--Content Goes Here With bootstrap Standards col-xs-# -->
        </div>

    </div>
</section>

Theme Configuration

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

Using Less

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

The head for less will look like this :

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

<!-- To Change your Favorite Color --> 
<link rel="stylesheet/less" href="/assets/less/colors.less"> 

<!-- This To compile Less if you want to include the less in client side --> 
<script src="js/less-1.7.0.min.js"></script>

To Change colors open colors.less you can find it in /assts/less/colors.less, below how code looks like, see the @base: change #66cdcc to your light color, and @baseDark: to your dark color.

Compilation of the colors.less file is already there by grunt and you will get a ready css file with your favorite color.

also you can comment and uncomment three predefined colors

@import "lib.less"; 
@import "styles.less"; 

@img_reviews : "../img/freeze/bk-freeze.jpg"; //Reviews Background Path 
@img_getapp : "../img/freeze/bk-freeze-ga.jpg"; //GetApp Background Path 

@base: #66cdcc; //Change Your Base Light Color Here 
@baseDark: #336799; //Change Your Base Dark Color Here

If you don't know how to compile less use very easy WinLess for windows or CodeKit for mac.

Less Files

/assets/less/colors.less, /assets/less/styles.less and ../less/lib.less all files implemented in /assets/less/lib.less, We will talk about each.

assets/less/colors.less This contais all colors styling.

assets/less/styles.less This contais all elements styling in the page.

assets/less/lib.less This contais some less mixins to make styling easy and faster.

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() { 
        // Hides PreLoading Screen After All Images Loaded
    },

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

    reviewsCarousel: function() { 
        // Reviews Carousel 
    }, 

    screensCarousel: function() { 
        // Screens Carousel with filtring 
    }, 

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

    revSlider: function() { 

        // Revolution Slider Initialization 
         
    }, 

    scrollMenu: function(){ 

        // Add class to the header for different styling after scrolling

    }, 
    placeHold: function(){ 
        // run Placeholdem on all elements with placeholders 
    } 

}; // AppMaster

Fonts

Oleose 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/freeze.css

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

// 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
Revolution Slider http://www.themepunch.com/codecanyon/revolution
Placeholdem http://placeholdem.jackrugile.com/
Slick Slider http://kenwheeler.github.io/slick/
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.