Introduction to Agility – Responsive HTML5/CSS3 Template

Welcome to Agility! Thank you for purchasing this template, I appreciate it!

This guide should answer all your questions about how to use this template. You can
browse the document using the navigation sidebar on the left, or search the entire document
by using CTRL+F in your browser.

Agility is based on a high quality responsive Grid Framework called Skeleton, which makes
creating responsive layouts simple. You may want to start off by checking out the
Full Skeleton Documentation →

Getting Started

This guide assumes you have already purchased hosting and a domain name on a properly configured server running Apache and PHP5+.
(Note that you do not actually need these to begin working on your site locally). Server configuration, DNS, and hosting issues
are beyong the scope of this document. Your host should be able to help you with such questions :)

The first thing you'll want to do (and probably already have done) is unzip the file you downloaded from ThemeForest.
The .zip contains two directories:

Documentation

agility-html

The documentation folder contains your own copy of this help file.

The agility-html folder contains the template itself - all the HTML templates, CSS, JS, images, contact form, etc.
If you were to place this folder in a public directory on a web server, you would have a "website".

For newcomers

There's nothing too complicated going on here -
your server works much like a file system in this case. When you access the public folder by visiting your domain name,
the appropriate file is retrieved and rendered. For example, if you visit http://yoursite.com/about.html, the file about.html
will be displayed if it exists in the public html folder (simple example).

TIP: Choose your browser wisely

Use a modern, high quality browser for developing and testing your site. I highly recommend
Google Chrome. Firefox is also a good choice. You should avoid using Internet
Explorer except for cross browser testing.

Working on a Local Computer without a Server

No PHP Warning

The downside to working with the site without a running webserver is that you won't be able to make use
of PHP scripting, which is required for the contact form.

You don't necessarily need a server to start building your site. Just place your agility-html folder in any directory.
Open it up, and open one of the files (normally it'll open up in your default browser, but if not, go to Open With > {Browser})

You'll see the site in front of you, all linked up and ready to go. Now you can just edit the HTML files to make your site look like you
want (see below).

Internet Explorer Warning

Internet Explorer may complain about running javascripts on an HTML file when not using a server (for example, the slideshow might be
blocked). You can either allow these scripts, use a different browser, or install a server to avoid this issue.

Running a local server is a great way to develop your site locally. There are a variety of LAMP-emulators out there
that will help you get a local server running without too much hassle. Setting them up is beyond the scope of this
guide, but you can click the links below for more info:

Once you have your server set up, create a new folder (yoursite) for your site in your server's HTML directory (location to be configured during
installation), and then drop the contents of agility-html in it. If everything was installed correctly, you should be
able to access your site at http://localhost/yoursite

Working on a Remote Server / Launching your site publicly

At some point you're going to want to put your site online, which generally means placing your files on a remote server (that is,
the server on which you have hosting). The best way to do this is to FTP
your files onto the remote server - your host will provide you with FTP details and credentials for connecting to the appropriate server.

You'll need an FTP client in order to upload your site. I recommend FileZilla (it's free!)

Once you connect to your server via FTP, using the credentials provided to you by your hosting company (e.g. GoDaddy, BlueHost, MediaTemple),
all you need to do is place your files in the root folder for your domain (usually in a directory
called public_html or www. The process varies by host, so each hosting provider has documentation on how to set a site
up in their system, which you should refer to.

How to Edit Files

To edit your HTML files, you'll want a good text editor - not a word processor like Word or OpenOffice. You can use a simple editor like
Notepad or gedit, a more advanced editor like Notepad++ (free), or a full-fledged IDE like
Aptana (free), Coda (paid), or
DreamWeaver (paid).

TIP: Mix and Match

Try copying and pasting different chunks of code into different files to create new layouts!

Of course, you should be familiar with editing HTML in order to modify your templates. If you want to adjust styles or scripting
functionality, you'll need to be familiar with CSS and jQuery.

Creating new pages

To add a new page to your site, you'll want to copy the template you'd like to use for your new page and rename it (or you can just edit
the template directly - but keep a backup!). Then edit the new file and link up your navigation using the new file name.

Newcomer tip

The index.html file is your home page. It will automatically be displayed for your primary domain/URL, when no
path is given. If you want to use an alternative home page, you should rename that file to index.html.

Have fun! :)

Getting Support

First, please take a moment to search this file, as the answer to your question is likely
already in here. You can press CTRL+F in your browser and then search this entire page
for keywords. Or, browse the topics in the navigation on the left. It's the fastest way to get
the answer you need!

Please be polite when requesting support, and I'll be sure to respond as soon as possible.
I'll do my best to answer your questions, but unfortunately I generally can't offer
customizations beyond a few lines of code - there just aren't enought hours in the day!
Of course, I will always provide fixes for any bugs that crop up as soon as can be :)

When requesting support, please indicate which product you are referring to,
explain what you've already tried and provide a link to your site so I may see
the issue firsthand. It's really the only way to efficiently diagnose a problem. Thanks!

HTML Structure

Responsive Grid System

The grid system makes it easy to create well-proportioned layouts. The Skeleton framework, based on
the 960.gs framework, splits the grid into sixteen columns. Columns are created by adding simple,
intuitive classes to your HTML elements.

Home page featured columns

The home page featured columns are a combination of the column mosaic layout and featured images. The key pieces
are to wrap your columns in a .mosaic div, and each column has the class .feature-column.
You could easily change the number of columns by using the Skeleton grid classes.

This is a notificaiton alert.

This is a warning alert.

Caution! Do not push the red button!

This is an error alert.

You just had to push that button, didn't you? Well, that's it, it's all over...

Media

Responsive Images

To make an image automatically scale as the grid responds, add the class .scale-with-grid
to the img tag. This will ensure that the image is never larger than the width of
its container - though it will not automatically expand if it is narrower than the container.

Responsive Video Embedding

Embedding from YouTube and Vimeo

You can embed Vimeo and YouTube videos just by copying the latest iFrame embed code
from those sites. Set the size (width/height) you'd like the video to appear at on
mobile devices. For devices > 480px wide, videos wrapped in the responsive containers
will automatically scale to the size of their container.

Responsive Video

To make your embedded videos responsive, wrap them in this code:

This will make the video automatically size to its parent container. However, this resizing is not active for mobile sizes; otherwise it interferes with the built-in browser player on
devices like the iPhone. Therefore, the recommended width to set in your embed code is about 400px - which ensures the best sizing for landscape oriented mobile phones when
not resized.

It is important to note that vendors are still working on mobile device compatibility. For example, Vimeo videos are not compatible with Android devices at the time
of this writing; rotating the screen orientation while loading a Vimeo video on the iPhone tends to crash mobile Safari. These are issues to be aware of which
are awaiting solutions by the vendors. You may wish to include a link to allow users to view videos in native apps rather than in-browser.

Lightbox

Images

To create an image lightbox, wrap your image in an anchor which links to the image, and set the data-rel attribute to prettyPhoto
and the class to img-link. Add the scale-with-grid class to the img tag in make the whole thing responsive.
The lightbox will automatically be initiated.

You can create a lightbox gallery by adding the gallery name to the data-rel attribute for each of the images that should appear in the gallery:

Videos

To create a video lightbox, use the same lightbox structure, with two adjustments:

Add a responsive video wrapped in an .inline-video-lightbox-content div with an ID after the lightbox link.

Twitter JS

The "Latest Tweet" functionality is controlled through javascript - this allows the page to continue loading, even
if Twitter isn't responding. To use the Twitter plugin, add this code in your HTML:

From the Twittersphere

Loading Tweets...

You can change the heading to anything you like, it won't affect functionality.

Make sure the div's ID is set to tweet. Change the content of the div to whatever you want to be
displayed while the Tweets are loading. This text will be replaced once the data is retrieved from Twitter.

Twitter API v1.1

As of June, 2013, Twitter has discontinued version 1 of its API, replacing it with version 1.1. Twitter API 1.1 makes it much more complicated to retrieve the latest tweet, so there is a more significant setup process of creating OAuth tokens.

Moreover, since Twitter now requires authentication to access the API, accessing the API can't be done via javascript as it was previously. Instead, you'll need to use PHP. That means that:

Your server must be running PHP

Any file showing the twitter feed must be a .php file

In the next version of Agility, these files will be included. For now, download this zip and extract it into your root folder. You will then have the structure agility-html/twitter/twitter_feed.php.
Agility Twitter Files

How to set up your OAuth tokens

In order to access the API, you'll need to set up a very simple "Twitter App" and generate access keys. These keys authenticate your site to Twitter during the twitter feed request.

AJAX Contact Form - jquery.jigowatt.js

fix-ie.js

Helps make Internet Explorer act like a modern browser. (Loaded remotely)

Google Maps API

Embed Google Maps in your own web pages. (Loaded remotely)

Twitter JS

Loads latest Tweets. (Loaded remotely)

Frequently Asked Questions

The FAQ section will be expanded online as common requests come in.

My site can't pinch and zoom on mobile devices. How can I allow that?

Part of the purpose of the responsive site is to not have to zoom. In order to best display the capabilities of
the template, zooming is disabled by default. To enable it, just change the maximum-scale value
of the viewport meta in the site header.