Introduction

AND is a responsive HTML5 template featuring clean and retina ready design suitable for any studio, creative or personal use. It's suitable for personal, corporate or creative use and it can be perfectly viewed across all devices and browsers.

Built with simplicity and beautiful typography in mind, this template comes packed with tons of features all coded using the last standard requiring zero external images ensuring an optimal user experience across browsers and devices.

Browser Compatibility

This template is 100% guaranteed to work on IE9+, Mozilla Firefox, Google Chrome, Safari, latest Android and iOS mobile browsers.

Support

Support requests can be requested via the Open Ticket, the comments section at ThemeForest, or direct mail to devsolutionsthemes@gmail.com

Documentation Scope

Features, files and directory structure, basic usage and explanation of each important element in this template with an exception of all third-party libraries and Bootstrap. These have their own thorough documentation available on their corresponding home pages. Links to those sites will be provided in this documentation.

This documentation is also written in a style that assumes you already know the basics of HTML, CSS and JavaScript so only the usage and concept of this template's elements that's going to be covered here.

Features and Functionality

  • Responsive Design
  • Valid HTML5 & CSS3
  • Build on Bootstrap 3
  • Retina Ready
  • Clean & Optimized Code
  • 800+ Font Icons
  • Build on SASS Compass
  • PSD Included
  • Licence of Glyphicons ‐ $59 value
  • Licence of Isotope ‐ $25 value
  • Licence of Revolution Slider ‐ $25 value
  • Video/Image splash section
  • CSS3 onscroll animation
  • Parallax backgrounds
  • Video backgrounds
  • Working PHP contact form

Download, Installation and Files

Before going into details, this section will first cover the details of downloading, installing and folder/file structure of this template.

Download

After purchase, you should be able to download it by going into the download section of your ThemeForest account. If you can't find your download link, look at this image instruction.

Installation

There is actually not really an installation procedure for this template as it is just a pure HTML template without any server side functionality. All you have to do is upload the whole template contents into a working web server and you should already be able to start editing your site.

Open up the ZIP file you've downloaded and inside you'll find this documentation and the main files. What you need to upload is the main files which is located in the HTML directory.

Files and Folders

The files and folder structure of this template is pretty straightforward, the two screenshots taken on Mac OS below shows the important folders.

Main folder
The main folder structure is separated into three folders, assets, demo and php. Root of this folder contains all HTML demo files.
/assets folder
This folder is the most important as it contains all the necessary files to get the template working. CSS, images, fonts, icons and JavaScripts are all located in this folder. The LESS folder you can see here contains the necessary files in case you want to create a new color scheme, or customize the template entirely.

The two other folders inside the main folder are used for storing the demo images which has been replaced by placeholders and the PHP files containing the contact form functionality. Instructions on using those PHP files will be covered in later sections.

Below is a table describing the contents of the /assets folder.

Folder Name What it Contains
assets/css Compiled Bootstrap and main CSS stylesheet
assets/fonts @font-face fonts (Glyphicons)
assets/icons @font-face icons (Font Awesome, Glyphicons & Colored Social Media)
assets/img Images that are part of this template
assets/js jQuery and other necessary scripts
assets/sass SASS files which can be used to customize the template. Mixin to create new color scheme is also provided.
assets/plugins External third party JavaScript plugins

Template Structure

While this template is build as a one page template, you can always create unlimited combinations resulting in multi/one page template. The template has a very common base structure so everyone should be able to use it as easy as other templates. The template is divided into four sections; an optional splash section, header, site body and footer. Click here to see a simple illustration of the template structure.

Base HTML Markup

In order to understand how this template works, the basic HTML structure will be covered and explained here. By reading this, you should be able to build an empty, usable HTML page as the base of your website that includes the minimal required JavaScript and CSS files.

HTML5 Doctype and <head>

<head>
	<meta charset="utf-8">
	<!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<meta name="author" content="DevSolutions">
	<meta name="description" content="Best Premium HTML5 Theme">

	<title>AND - Multipurpose Corporate Template</title>

	<!-- Fonts Google Roboto & Glego, Glyphicons, Font Awesome, AND Icons  -->
	<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Glegoo:400,700%7CRoboto+Condensed:300italic,400italic,700italic,400,300,700">
	<link rel="stylesheet" href="assets/icons/devsolution-and/icons.css">
	<link rel="stylesheet" href="assets/icons/glyphicons/style.min.css">
	<link rel="stylesheet" href="assets/icons/font-awesome/new/font-awesome-4.2.0/css/font-awesome.min.css">

	<!-- Bootstrap -->
	<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">

	<!-- jQuery  -->
	<script type="text/javascript" src="assets/plugins/jquery/dist/jquery.min.js"></script>

	<!-- Modernize -->
	<script src="assets/plugins/modernizr/modernizr-2.7.1.min.js" type="text/javascript"></script>

	<!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
	<link rel="stylesheet" type="text/css" href="assets/plugins/revolution/rs-plugin/css/settings.css" media="screen" />

	<!-- Style -->
	<link rel="stylesheet" href="assets/css/style.css">

	<!-- Responsive -->
	<link rel="stylesheet" href="assets/css/responsive.css">

	<!-- CSS Plugin -->
	<link rel="stylesheet" href="assets/plugins/mfp/jquery.mfp.css">
	<link rel="stylesheet" href="assets/plugins/owlcarousel/owl.carousel.min.css">

</head>

Let's start by creating a new, empty page by first writing the HTML5 doctype and <head> element. The HTML5 doctype is required for proper validation and functionality of this template. Older IE versions (< 9) is not supported due to bad performance and lack of support for modern browser functionality, so we won't be using any IE conditional tags or HTML5 shims. Just the plain, modern and awesome HTML5 header.

The first three lines in the <head> are the required meta tags to get the template working properly, they are the character set, IE versioning and viewport configuration for responsive design meta tag respectively. Following thereafter are some meta tags for SEO purposes, fill them just as you need!

Then we have the <title> tag, fill here the title of your site. Last are the required stylesheets which consists of Google Font, @font-face fonts, @font-face icons, bootstrap and the main stylesheets. These files are the absolute minimum required files to get the template working properly.

Site Header
<!-- header -->
<header class="single-page">
				<div class="container">
					<div class="navbar">
						<div class="navbar-header">
							<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
							</button>
							<a class="navbar-brand clearfix" href="./"><img alt="" src="demo/logo.png"><span>The And Corporation</span></a>
						</div> <!-- /navbar-header -->
						<div class="navbar-collapse collapse navbar-right">
							<nav id="navigation" class="navbar-nav">
								<ul class="nav">
									<li class="active"><a href="#">Home</a></li>
									<li><a href="#overview">Overview</a></li>
									<li><a href="#features">Features</a></li>
									<li><a href="#pages">Pages</a></li>
									<li><a href="#portfolio">Portfolio</a></li>
									<li><a href="#layout">Layout</a></li>
									<li><a href="#demo">Demos</a></li>
									<li><a href="#about">About</a></li>
								</ul>
							</nav>
						</div>
					</div>
				</div><!-- /Container -->
</header>
<!-- /header -->

The header, which is used for containing the logo and navigation is coded using a technique that allows automatic vertical centering so there's no need to specify any padding/margin to your logo.

Site Body
<div class="wrapper">
	<div class="container">
		<div class="row">
		</div>
	</div>
</div>

The site body is contained inside the main wrapper, the <div class"wrapper"></div> element. The site body will be constructed by one or more sections, which are the <section class="section"> elements.

Each section itself is constructed using markup as on the code above, and each section consists of section rows. Each section will have one section row container, wrapping the section rows which contains the default Bootstrap .container element.

Site Footer
<footer class="default-footer">
					<div class="top padding paddv-60">
						<div class="container">
							<div class="row">
								<div class="col-md-3">
									<div class="widget text-widget">
										<a href="#" class="mini-logo">
											<img src="demo/content/min-logo.png" alt="">
										</a>
										<p>Lorem ipsum dolor sit amet, nopri modo agam facer, timeam adolescens eisit eos autem laudem. Tota partem elaboraret ius. Te luptatum sapientem quaerendum sit. Est ea dolor.</p>
										<p>Lorem ipsum dolor sit amet, nopri modo agam facer, timeam adolescens eisit eos autem laudem. Tota partem elaboraret ius. Te luptatum sapientem quaerendum sit. Est ea dolor.</p>
									</div>
								</div>
								<div class="col-md-3">
									<div class="widget recent-tweets">
										<h2 class="widget-title">Recent Tweets</h2>
										<div class="twitie"></div>
									</div>
								</div>
								<div class="col-md-3">
									<div class="widget tags-cloud">
										<h2 class="widget-title">Tags</h2>
										<ul>
											<li><a href="#">Lorem</a></li>
											<li><a href="#">ipsum</a></li>
											<li><a href="#">dolor</a></li>
											<li><a href="#">amet</a></li>
											<li><a href="#">nopri</a></li>
											<li><a href="#">modoagam</a></li>
											<li><a href="#">facer</a></li>
											<li><a href="#">timeam</a></li>
											<li><a href="#">adolesce</a></li>
											<li><a href="#">laudemne</a></li>
											<li><a href="#">partem</a></li>
											<li><a href="#">amet</a></li>
											<li><a href="#">nopri</a></li>
											<li><a href="#">modoagam</a></li>
											<li><a href="#">facer</a></li>
											<li><a href="#">timeam</a></li>
											<li><a href="#">adolesce</a></li>
										</ul>
									</div>
								</div>
								<div class="col-md-3">
									<div class="widget widget-newsletter">
										<h2 class="widget-title">News Letter</h2>
										<div class="content">
											<p>Lorem ipsum dolor sit amet, nopri modo agam face.</p>
											<form action="#" method="get" accept-charset="utf-8">
												<input type="text" value="" placeholder="Email address">
												<input type="submit" value="Subscribe">
											</form>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="bottom">
						<div class="container">
							<div class="col-md-8">
								<p class="copyrights">Copyright: <span>2014 @ & Theme</span> by GraphicArtist | Terms of use | Contact to Us</p>
							</div>
							<div class="col-md-4">
								<ul class="social">
									<li><a href="#" data-toggle="tooltip" data-placement="top" title="Facebook">
										<i class="fa fa-facebook"></i>
									</a></li>
									<li><a href="#" data-toggle="tooltip" data-placement="top" title="Twitter">
										<i class="fa fa-twitter"></i>
									</a></li>
									<li><a href="#" data-toggle="tooltip" data-placement="top" title="Linkedin">
										<i class="fa fa-linkedin"></i>
									</a></li>
									<li><a href="#" data-toggle="tooltip" data-placement="top" title="Google Plus">
										<i class="fa fa-google-plus"></i>
									</a></li>
									<li><a href="#" data-toggle="tooltip" data-placement="top" title="Vimeo">
										<i class="fa fa-vimeo-square"></i>
									</a></li>
								</ul>
							</div>
						</div>	
					</div>
				</footer>

Before ending the page markup, we still need to write the site footer, which can be used to display your logo, copyright text and social icons. Markup of the footer is pretty simple, just follow the markup above. As for social icons, substitute the {social icon class here} with an icon class from the included icon fonts, e.g., fa fa-facebook.

Footer Scripts and HTML Closing Tag
<!-- Setup of JS -->
<script type="text/javascript" src="assets/js/devsolution.scripts.js"></script>
<script type="text/javascript" src="assets/js/devsolution.plugins.js"></script>
<script type="text/javascript" src="assets/js/devsolution.setup.js"></script>

<!-- JS Plugins -->
<script type="text/javascript" src="assets/plugins/gmap/gmap3.min.js"></script>
<script type="text/javascript" src="assets/plugins/snapsvg/dist/snap.svg-min.js"></script>
<script type="text/javascript" src="assets/js/devsolution.line.svg.js"></script>
<script type="text/javascript" src="assets/plugins/mfp/jquery.mfp-0.9.9.min.js"></script>
<script type="text/javascript" src="assets/plugins/owlcarousel/owl.carousel.min.js"></script>
<script type="text/javascript" src="assets/plugins/isotope/jquery.isotope.min.js"></script>

<!-- SLIDER REVOLUTION 4.x SCRIPTS  -->
<script type="text/javascript" src="assets/plugins/revolution/rs-plugin/js/jquery.themepunch.tools.min.js"></script>
<script type="text/javascript" src="assets/plugins/revolution/rs-plugin/js/jquery.themepunch.revolution.min.js"></script>

Last we have the footer scripts and HTML closing tags. The scripts on the code above includes only the bare minimum required scripts to get the template working properly. For full functioning pages, you also need some of the external JavaScript plugins which will be covered later.

After the scripts, we have the HTML closing tags which marks the end of your page. Congratulations, you've build your first page using AND!

Twitter

For to change twitter username, you need to go on path: - ./assets/js/devsolution.setup.js LINE:678

twitter: function(){
			if($.fn.twittie){
				$('.recent-tweets .twitie').twittie({
					list: null,
					hashtag: null,
					template: '{{screen_name}} {{tweet}} <div class="date">{{date}}</div>', // Format how you want to show your tweets. 
					count: 2, // Number of tweets you want to display.
					hideReplies: true, // Hide replies and only show your own tweets
					username: "envato", // Option to load tweets from another account.
					apiPath : 'assets/plugins/twitter/api/tweet.php'
				});
			}
		},

Splash Sections

The initial version of this template comes with two kinds of splash sections. One with a fullscreen parallax background image, and one with a fullscreen video background. Each of them has a very cool animated text slider on top of it, allowing users to engage with your content easily.

Right above the header markup we covered in the previous section, we'll put our splash section. Actually each splash section has the same markup, with the difference only laying in the splash media that is used.

Here we'll cover the markup of each type of splash section.

Fullscreen Parallax Background
<!-- Splash Home -->
			<section id="home" class="site-splash fullscreen">	
				<div class="splash-media splash-media-img" data-background="demo/slider/image-05.jpg">
					<div class="overlay"></div>
				</div>

				<div class="splash-layers">
					<div class="bottom-layer">
						<div class="splash-container section-row">
							<div class="row">
								<div class="col-md-12">
									<h2 class="splash-title" data-animation-name="fadeInUp" data-animation-delay="800">
										FASHION GLAMOUR<br>
										STYLE LUXURY YACHT
									</h2>
									<p class="splash-desc" data-animation-name="fadeInUp" data-animation-delay="1200">Lorem ipsum dolor sit amet, no pri modo agam facer, timeam adolescens ei sit, eos autem laudem ne. Tota partem elaboraret ius.
										timeam adolescens <br>ei sit, eos autem laudem ne ipsum dolor sit amet</p>
									<a href="#" title="" data-animation-name="fadeInUp" data-animation-delay="1600">
										<img src="demo/layouts/image-03.png" alt="">
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
			<!-- /Splash Home -->

Above we can see that there are three elements inside the splash section; the text slider, text splash media and the splash feedback.

Fullscreen Video Background

The difference between a video/image splash section only lays on the splash media. You can use the previous splash section markup and alter the splash media markup a little bit to use a video as background. Below is the altered splash media markup.

<div class="splash-media splash-media-video" style="background-image: url(/path/to/your/fallback/image)">
	<video style="width: 100%; height: 100%;" loop autoplay>
		<!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
		<source type="video/webm" src="/path/to/your/webm/video">
		<!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
		<source type="video/mp4" src="/path/to/your/mp4/video">
	</video>
</div>

Make sure to specify a fallback image in case your visitors' browser does not support video playback. This is done with the style="background-image: url(/path/to/image)". Inside the splash media markup, specify the video element just like on the code above. Specify at least one video file (either webm/mp4) to display your background video.

Planned Splash Sections

Planned splash sections in a future update includes a fullscreen slider and revolution slider.

Bootstrap

Bootstrap as the core of this template is being used extensively throughout the template. The current used Bootstrap version is 3.1.1.

Alternatively, you can download a copy of Bootstrap yourself by using the following build: http://getbootstrap.com/customize/?id=9364009

After downloading, extract the CSS files into the /assets/css/ folder. If you also want to use the custom build Bootstrap JS, remove it first from /assets/js/devsolution.plugins.js where Bootstrap is minified and merged as the first plugin. Just remove it and include Bootstrap on your page as usual.

Icons

This template comes with 800+ icons, which most of them are @font-face icons. These icons can be scaled, colored, animated, just like a usual text element.

Glyphicons, FontAwesome and a set of Retina Ready social media icons are included for you to use. You can use them by just creating whatever element and assigning it the necessary class. If you want to know what icons are available for each set, just view it on the Icons page of this template preview.

Glyphicons, a commercial icon set worth $59 is included in this template, you can use them only on this template as that is the licence requirement of the icons.

Each of the icon set has different markups as described in the table below.

Icon Set Class prefix Usage
Glyphicons .gi <i class="gi gi-{icon_name}"></i>
FontAwesome .fa <i class="fa fa-{icon_name}"></i>
Retina Social Media .ics <i class="ics ics-{icon_name}"></i>

Contact Form

This template includes a working contact form with Honeypot anti spam protection. It can help your visitors to send message to a specified email address without the need of additional scripts. It utilizes jQuery Form, jQuery Validation plugin on the client side, SwiftMailer and PHP-Validation library on the server side.

Just put the required PHP files on your working PHP server, configure your form, alter the PHP configurations and you can start receiving emails from your visitor.

Configuring The PHP Variables

The /php/contact folder that you can find in this template's root folder contains several files and folder. You don't need to configure or change anything besides these two files: mail-content.php and contact.php

mail-content.php
<?php

	/* PUT HERE YOUR MAIL MESSAGE */
	/*
		You can edit the email sent to you notifying about subscribers in this file.
		Below is a simple email example.

		The $name, $email, $url, $subject and $message variables all corresponds to the form fields name attribute.
	*/

?>

Hello, <br><br>
Someone has used the contact form on your website.<br>
Here is the data we received:<br>
Name: <?php echo $name ?><br>
Email: <?php echo $email ?><br>
URL: <?php echo $url ?><br>
Subject: <?php echo $subject ?><br>
Message: <?php echo $message ?>
<br><br>
Thank you

This file contains the message that you'll receive from your visitors. Edit this file, and print the variables that matches your contact form fields name attribute.

Example: <?php echo $address ?> prints out the $address variable, which matches your contact form field with the name="ContactForm[address]" attribute.

contact.php
<?php
	require_once 'lib/validation/validation.php';

	global $CONFIG;
	$CONFIG = array(
		/* Mail Options */
		'mail_send_to' =>'devsolutionsthemes@gmail.com', 
		'mail_contents'=>'mail-content.php', 

		/* Messages */
		'messages'=>array(
			'mail_failed' =>'An unknown error has occured while sending your message', 
			'form_error'  =>'<strong>The following errors were encountered</strong><br><ul><li>%s</li></ul>', 
			'form_success'=>'<strong>Thank you!</strong><br>Your message has been sent, we'll get back to you shortly :)', 
			'form_fields' =>array(
				'name'=>array(
					'required'=>'Name is required'
				), 
				'email'=>array(
					'required'=>'Email is required', 
					'email'=>'Email is invalid'
				), 
				'url'=>array(
					'url'=>'URL is invalid'
				), 
				'subject'=>array(
					'required'=>'Subject is required'
				), 
				'message'=>array(
					'required'=>'Message is required'
				), 
				'honeypot'=>array(
					'invalid'=>'You're not a human aren't you?'
				)
			)
		)
	);
	
	function createFormMessage( $formdata )
	{
		global $CONFIG;
		
		ob_start();
		
		extract($formdata);
		include $CONFIG['mail_contents'];
		
		return ob_get_clean();
	}

	function validate_honeypot( $array, $field ) {
		if( '' !== $array[ $field ] ) {
			$array->add_error( $field, 'invalid' );
		}
	}

	function cleanInput($input) {
		$search = array(
			'@<script[^>]*?>.*?</script>@si',   // Strip out javascript
			'@<[/!]*?[^<>]*?>@si',            // Strip out HTML tags
			'@<style[^>]*?>.*?</style>@siU',    // Strip style tags properly
			'@<![sS]*?--[ tnr]*>@'         // Strip multi-line comments
		);

		$output = preg_replace($search, '', $input);
		return $output;
	}

	function sanitize($input) {
		if (is_array($input)) {
			foreach($input as $var=>$val) {
				$output[$var] = sanitize($val);
			}
		}
		else {
			if (get_magic_quotes_gpc()) {
				$input = stripslashes($input);
			}
			$input  = cleanInput($input);
			$output = $input;
		}
		return $output;
	}
	
	$response = array();
	$validator = new Validation( sanitize( $_POST[ 'cf' ] ) );
	$validator
		->pre_filter('trim')
		->add_rules('name', 'required')
		->add_rules('email', 'required', 'email')
		->add_rules('url', 'url')
		->add_rules('subject', 'required')
		->add_rules('message', 'required')
		->add_callbacks('honeypot', 'validate_honeypot');
	
	if( $validator->validate() )
	{
		require_once( 'lib/swiftmail/swift_required.php' );
		
		$transport = Swift_MailTransport::newInstance();
		$mailer = Swift_Mailer::newInstance($transport);
		
		$formdata = $validator->as_array();
		$body = createFormMessage($formdata);
		
		$message = Swift_Message::newInstance();
		$message
			->setSubject($formdata['subject'])
			->setFrom($formdata['email'])
			->setTo($CONFIG['mail_send_to'])
			->setBody($body, 'text/html');
			
		if( !$mailer->send($message) ) {
			$response['success'] = false;
			$response['message'] = $CONFIG['messages']['mail_failed'];
		} else {
			$response['success'] = true;
			$response['message'] = $CONFIG['messages']['form_success'];
		}
	} else {
		$response = array(
			'success'=>false, 
			'message'=>sprintf($CONFIG['messages']['form_error'], implode('</li><li>', $validator->errors($CONFIG['messages']['form_fields']) ) )
		);
	}
	
	echo json_encode($response);

	exit();

This is the script that receives the form's submission. It basically validates the form, and if the form is valid it will call the necessary functions to send your visitor's email then responds the request with the submission result/message.

Credits

Bootstrap

URL: http://www.getbootstrap.com

The most popular front-end framework for developing responsive, mobile first projects on the web.

jQuery

URL: http://jquery.com/

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

SASS

URL: http://sass-lang.com/

Sass is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.

FontAwesome

URL: http://fontawesome.io/

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

Glyphicons

URL: http://glyphicons.com/

Glyphicons is a library of precisely prepared monochromatic icons and symbols, created with an emphasis on simplicity and easy orientation.

Roboto Condensed (Font)

URL: https://www.google.com/fonts/specimen/Roboto+Slab

Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.

ImagesLoaded

URL: http://imagesloaded.desandro.com/

Script to detect when images have been loaded.

jQuery Placeholder

URL: http://mths.be/placeholder

A jQuery plugin that enables HTML5 placeholder behavior for browsers that aren’t trying hard enough yet

FitVids JS

URL: http://fitvidsjs.com/

A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

jQuery Waypoints

URL: http://imakewebthings.com/jquery-waypoints/

Waypoints is a jQuery plugin that makes it easy to execute a function whenever you scroll to an element.

jQuery Cycle2

URL: http://jquery.malsup.com/cycle2/

Cycle2 is a versatile slideshow plugin for jQuery built around ease-of-use. It supports a declarative initialization style that allows full customization without any scripting. Simply include the plugin, declare your markup, and Cycle2 does the rest.

jQuery Form Plugin

URL: http://malsup.com/jquery/form/

The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX. The main methods, ajaxForm and ajaxSubmit, gather information from the form element to determine how to manage the submit process. Both of these methods support numerous options which allows you to have full control over how the data is submitted. Submitting a form with AJAX doesn't get any easier than this!

jQuery Validate

URL: http://jqueryvalidation.org/

This jQuery plugin makes simple clientside form validation easy, whilst still offering plenty of customization options. It makes a good choice if you’re building something new from scratch, but also when you’re trying to integrate something into an existing application with lots of existing markup. The plugin comes bundled with a useful set of validation methods, including URL and email validation, while providing an API to write your own methods. All bundled methods come with default error messages in english and translations into 37 other languages.

GMAP

URL: http://gmap3.net/

Gmap3 allows you to easily understand the power of Google Maps 3, due to the simplicity of jQuery

Isotope

URL: http://isotope.metafizzy.co/

Isotope: An exquisite jQuery plugin for magical layouts

MediaElement JS

URL: http://mediaelementjs.com/

HTML5 <video> and <audio> made easy. One file. Any browser. Same UI.

MagnificPopup

URL: http://dimsemenov.com/plugins/magnific-popup/

Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device.

OWL Carousel

URL: http://owlgraphic.com/owlcarousel/

Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.

Images

All images, artwork, graphics used in this template are copyrighted to their respective owners and are not included in the download package.