Introduction

Thank you for purchasing Spendora template!

This documentation will give you an understanding of how Spendora is structured and guide you in performing common functions. If you require further assistance not covered in this documentation, please contact us in our Support Portal http://support.aucreative.co/

If you need custom customization, please contact us from here: http://themeforest.net/user/Eagle-Theme

Thank you so much!

AU CREATIVE

Getting Started

What's Included

Once you have download the package you will see the following folder structure in " template" Folder

css- Main Stylesheet Files
fonts- Fonts file and css for fonts
images- Images Files
scripts- Javacripts Folder
includes- PHP Files (contact form, ... etc)
vendor- Vendor Files (jquery, bootstrap etc)

In order to use in your website, you need to upload template files ( inside the folder www) to your web server with the help of one of the FTP-clients (for example, WinSCP or Total Commander etc).

HTML Structure

Spendora template is based on Bootstrap Framework ( http://getbootstrap.com/) Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

Below is a sample coding structure:

<!DOCTYPE html>

<html lang="en-US">

<head>

</head>

<body>

    
    

        ...

    
    

    
    
            

                ...

            
    
    

    
    
        
            

                ...

            
        
    
    


</body>

</html>

Logo Settings

Default site logo is placed insideheader container.

Changing Fonts

By default Spendora Template uses Three fonts from google library: 'Muli' 'Montserrat' from the Google Fonts Library

If you wish to add/change the site fonts, please take a look in thehead part of the website and you will find this tag:

To include new font you can simply add another line like this:

Or add an| seperator and pasteLato:400,300,800,700,600 after default website fonts link.

Sliders

Spendora includes 1 sliders that gives you all the options they need.

Slick: Is an touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.

Slick data config

This excellent carousel slider can be controler usuing HTML5 data attirbutes, see the full list below:

data-slick-lg - The columns in large desktop screen size, default value is 1 columns
data-slick-md - The columns in laptop screen size, default value is data-slick-lg
data-slick-sm - The columns in tablet screen size, default value is data-slick-md
data-slick-xs - The columns in mobile screen size, default value is data-slick-sm
data-slick-autoplay - Set autoplay status for slider, default value is false
data-slick-arrows - Set arrow status for slider, default value is false
data-slick-loop - Set loop status for slider, default value is true
data-slick-dots - Set dots status for slider, default value is false
data-slick-centermode - Center slider, default value is false
data-slick-draggable - Set mousedrag status for slider, default value is true
data-slick-pauseonhover - Set pause on hover for slider, default value is false
data-carousel-speed - set speed for slider, default value is 500

Advanced customization of fileglobal.jsin folderjs/global.js

The full documentation of OWl Slider can be found here

Slider Revolution

Bricktower includes 1 slideshow that gives you all the options they need.

Slider Revolution: An All-Purpose Slide Displaying Solution that can show any kind of media with highly customizable transitions, effects and animations.

The full documentation of Slider Revolution can be found here

Helpers

Spendora helper css classes allow you to build your custom layout without touching any CSS code

These classes are generic helper classes predifined in the CSS of pages, here is quick view what they can do

Margins

You can add this helper class to any element in your HTML code to set Margins

First Prefix ( m-*)	Second Prefix(m-t/b/l/r-*)	Last Prefix(m-t-$value)
m for margin	t : top, b : bottom, l : left, r : right	5,10,15,20, ... 150

example :

m-t-10 which means Margin Top 10px
m-b-20 which means Margin Bottom 20px
m-l-5 which means Margin Left 5px
m-r-35 which means Margin Right 35px

Note:Value can not be anything, 1,2,4,5,6. It has a step of 5px, eg: 5,10,15

Other options:

To remove margin from a HTML element add the class

no-margin

Paddings

You can add this helper class to any element in your HTML code to set paddings

First Prefix ( p-*)	Second Prefix(p-t/b/l/r-*)	Last Prefix(p-t-$value)
p for padding	t : top, b : bottom, l : left, r : right	5,10,15,20, ... 150

example :

p-t-10 which means padding Top 10px
p-b-20 which means padding Bottom 20px
p-l-5 which means padding Left 5px
p-r-35 which means padding Right 35px

Note:Value can not be anything, 1,2,4,5,6. It has a step of 5px, eg: 5,10,15

Contact form

You need to modify email address and email title onincludes/config.json in includes folder,line 2 andline 3

"MAIL_HOST": "info@yourdomain.com"
"MAIL_TITLE": "[Spendora] Contact Form Message"

with your or company contact email address and the title mail you want.

Note: Your server must support php sendmail()function to make contact form work properly

Grid

Bootstrap grid includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:

You must start withrow
There are pre-define classes of columns starting from 1 to 12, examplecol-md-1 tocol-md-12
Each of these value represent a percentage of the screen, 1 being the smallest and 12 being 100%
You can create different grid pattern that finally forms 12

For more information about Bootstrap, visit: http://getbootstrap.com/

example :


    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1
    .col-md-1



    .col-md-8
    .col-md-4



    .col-md-4
    .col-md-4
    .col-md-4



    .col-md-6
    .col-md-6

NoteBootstrap includes different grids for different screen sizes, "col-md" md stands for medium screen, the following table explains:

	Extra small devices Phones ( <768px)	Small devices Tablets (≥768px)	Medium devices Desktops (≥992px)	Large devices Desktops (≥1200px)
Grid behavior	Horizontal at all times	Collapsed to start, horizontal above breakpoints
Container width	None (auto)	750px	970px	1170px
Class prefix	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# of columns	12
Column width	Auto	~62px	~81px	~97px
Gutter width	30px (15px on each side of a column)
Nestable	Yes
Offsets	Yes
Column ordering	Yes

Browser Support

Spendora is built keeping mind to support a wide range of browsers and devices. We all major browers Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer 9 and Above

	Chrome	Firefox	Internet Explorer	Opera	Safari
Android	Supported	Supported	N/A	Not Supported	N/A
iOS	Supported	N/A		Not Supported	Supported
Mac OS X	Supported	Supported		Supported	Supported
Windows	Supported	Supported	Supported	Supported	Not Supported

Source & Credits

All images are only for demonstration purpose, however you can re-download them in sites below. Almost all (not including overclothing.com, Daniel Zenda, Freepik etc...) images are released free of copyrights under Creative Commons CC0.

Introduction

Getting Started

What's Included

HTML Structure

Logo Settings

Changing Fonts

Sliders

Slick data config

Slider Revolution

Helpers

Margins

Paddings

Contact form

Grid

Browser Support

Source & Credits

Images & Mockups

Scripts

CSS & Fonts