“Vega” Documentation by “"flashedge"” v1.2.3

“Vega HTML5 Responsive Template”

Updated: 13/12/2012
By: flashedge
Profile: themeforest

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

HTML Structure
CSS Files and Structure
JavaScript
PSD Files
Portfolio
Music Player (the tiny bar at the bottom)
Google Maps (for the contact page)
Tweets Widget (appearing in the home page)
Contact Form
Vimeo & YouTube
Sources and Credits
History

A) HTML Structure - top

This template was built with the Foundation Framework and uses a responsive layout. Please refer to the official documentation for further details on how to use all features offered by Foundation. You can also just stick to the provided examples which are already integrated and tested.

You don't need to edit anything in the javascripts. All configuration is driven by the HTML document and can by styled with the provided LESS file. Read the dedicated section to know more about LESS.

Background

For rendering reasons the background slides are wrapped outside of the main container. They don't contain directly the images, but only data that is needed to generate them by javascript. This is needed due the different technique used for arranging the fullscreen images on each browser.

    <!-- fullscreen background slideshow start -->
    <div id="bg" class="background">
        <ul class="bg-gallery" data-delay="8">
            <li data-image="images/slides/01.jpg"><span></span></li>
            <li data-image="images/slides/02.jpg"><span></span></li>
            <li data-image="images/slides/03.jpg"><span></span></li>...

As you can see it uses the attribute "data-image" to find out the path of each image. You can also configure the delay between each slide by editing the "data-delay" in the main list container.

Right after the background container, starts the main container. The latest version introduces two new options: data-globalscroll and data-mobileautofocus. The first one enables you to skip all javascript-driven scrolling and use the browsers native scrollbar. The second one enables you to automatically focus to the chosen section on mobile devices. Both options can be configured with a true or false attribute. Experiment your own configuration.

The main container stores two divs that overlap the whole background: the dotted pattern and the gradient overlay summoned on mouseover. After these two graphics container the real content starts.

    <!-- start main container -->
    <div id="main" data-globalscroll="false" data-mobileautofocus="true">

        <!-- shiny graphics -->
        <div class="pattern hide-on-phones"></div>
        <div class="gradient"></div>

        <!-- start container -->
        <div class="container">

        <!-- start header -->
        <div class="row" id="header" data-fixed="false">

In the header div there is another new attribute called "data-fixed" which will enabled/disable the dynamic height of the header. I suggest to leave it like this as it allows you to optimize the space and benefit from the whole height. In case you don't like the dynamic height transition set it to true and it will size itself right from the start.

Header

And finally starts the header. It is made up of three parts: the logo, the navigation menu and the social icons. I'll explain each part below for your convenience.

The logo can be edited as text or as image. I personally recommend using text to keep the look crisp and clear without loading any new assets. Using a vector file is also a good choice, especially for retina displays. Just replace the content inside the anchor tag with yours.
```
    
    <h1 class="logo"><a href="index.html">VEGA</a></h1>
```
There is a tiny loadbar, below the logo, that shows up when the loading process is started. It's fake, but it gives the user a feedback that something is loading and fades out when the DOM is ready. So it does its job, more or less. You can remove it, if you don't like it.
```
    
    <div class="bar"></div>
```

The social icons own a generous bar at the top right. You can put as many icons you want, but I strongly recommend to put just the more important ones as an overcrowded header doesn't look very professional and usable. You'll find all available icons commented in that div. You just need to uncomment the ones you need and put your link. That's it!

    <!-- start social icons -->
    <div class="row">
        <ul class="social">
            <li class="facebook">
                <a href="http://facebook.com/emanco" target="_blank" title="facebook"></a>
            </li>
            <li class="twitter">
                <a href="http://twitter.com/flashedge" target="_blank" title="twitter"></a>
            </li>...

The navigation menu is built on two levels that can be as tall as the whole page. Infact it scrolls the main content below to give more focus on the submenu. The following is an example of a submenu.

     <!-- start navigation -->
     <nav class="row">

            <ul class="nav-bar" data-autohide="true">
                <li class="has-flyout">
                    <a href="works.html" class="main">Works</a>
                    <div class="flyout-toggle"><span></span></div>

                    <!-- start submenu -->
                    <div class="flyout small">
                        <ul>
                            <li><a href="reel.html">Showreel</a></li>
                            <li><a href="project.html">Portfolio</a></li>
                        </ul>
                    </div>
                    <!-- end submenu -->

Normal menu items look like this. Pretty simple!

                    <li>
                        <a href="contact.html" class="main">Contact</a>
                    </li>

NOTE: The provided javascript tries to detect when there are too many menu items in the navigation and adds a new class called "compact" in the navigation list. If you already know that your menu will contain more than 3-4 items and would like to fit them nicely, then add the class directly in the html document like shown below.

<ul class="nav-bar compact">

This will give you more space for your menu items, but it will also be less readable. I recommend to group your items into as few groups possible to keep a fluid experience to your users.

External Links: if you're going to link pages outside of the website and would like to skip the ajax calls, keep sure you include a target attribute to your anchor tags.

Autohiding Submenu: If for some reason you don't want the dropdown menu to be automatically hidden on click, you can disable the autohide by setting the attribute "data-autohide" to false in the nav-bar div, like this:

 <ul class="nav-bar" data-autohide="false">

This might fix the double tap glitch on touch devices that keep the submenu active until the users taps somewhere else, but the downside of this is that the menu will be kept open until the user doesn't tap somewhere else. It's your choice.

AJAX Transitions

The template uses AJAX transitions and loads everything at runtime without reloading the page. You need to keep both "old" and "new" containers as they are. During the loading process the "new" div will load another container inside of it named "target" that contains the actual content. When a new page is requested the new content is parsed inside the "old" div and animated until the new content is on place. Once the transition is over the old container will be cleared to keep memory usage low.

If you'd like to skip AJAX, add to your links the attribute "target" and set it as "_self". This way the script will be skipped and the pages loaded in a traditional way. Though you should be aware that the music player will be initialized on every new page, unless you remove it or set autoplay to false.

    <!-- Used for ajax transition -->
    <div class="old"></div>

    <!-- start new container -->
    <div class="new">
            <div class="target">...

If for some reason the browser doesn't support AJAX calls it will just load the new page as a normal link and refresh the whole viewport to the new content. It is important that you keep this structure as-is among all pages to ensure that everything is working properly. You can savely edit the content inside of target, the header and the footer. Just keep the main containers like they are.

IMPORTANT NOTICE: If you're going to test this template locally, keep sure your browser allows to run deeplinks. For instance Chrome needs to be configured with an appendix of "-allow-file-access-from-files" to allow local ajax loading. Otherwhise you'll end up loading the same page over and over again, though it works perfectly online.

Content

The content is made up of two parts: a subheader which stores those big headlines and a scrollable content area. Let's see first the subheader.

    <div class="container subheader">

        <header class="row">
            <hgroup class="home">
                <h1 class="headline"><span>Hello, we are VEGA.</span></h1>
                <h2 class="headline"><span>Creativity is our passion.</span></h2>
            </hgroup>
        </header>

    </div>

One thing worth mentioning is that headlines might look wrong if too long as they wrap close to the border. I couldn't find any solution yet for this, but you can avoid this by using short headlines or by splitting them in more spans.

After the subheader we got finally the scrollable area with the main content.

    <div id="shell" class="wide" data-iscroll="true">
        <div id="scroller" class="container">

It's up to you if you'd like to make it scrollable or not. If you'd like to disable scrolling remove both the "shell" id attribute and the "scroller" one.

Static height

Since version 1.1.7 you can add a fixed height to your content. All you need to do is adding a "data-height" attribute to your shell div. There is an example called "fixed_height.html" which shows you exactly how to configure it.

iScroll & jScrollPane

Since version 1.0.8 there is an alternative scrolling script to the default iScroll, it's called jScrollPane and acts like a traditional scrollbar but looks the same. So basically, if you'd like to use iScroll keep the "data-iscroll" attribute to true. Otherwise it will trigger the jScrollPane script for you, but still use iScroll on touch devices (which works anyway).

NOTICE: In order to allow both javascript-driven scrolling to work, you need to disable the "data-globalscroll" attribute of the main div.

If you have scrollable content, it's a good idea to keep the "gap" div right before the shell container. It's the shadow effect that overlays the content. Looks pretty, but it's also useless. Feel free to remove it.

    <div class="gap"></div>

B) CSS Files and Structure - top

The stylesheet was built with LESS, a dynamic Stylesheet Language. You can debug the less files directly in your browser by uncommenting the relative line near the end of the document. You'll find the development file inside the less folder.

<!-- LESS Stylesheet, Uncomment this block for debugging -->
<!--<link rel="stylesheet/less" type="text/css" href="less/styles.less">
<script src="js/less-1.3.0.min.js"></script>-->

Though before deploying you'll need to compile it into a compressed stylesheet with a compiler that works on your computer. I recommend using WinLess for Windows or LESS.app for Mac. This compilers will generate for you a compressed styles.css file which is stored inside the css folder.

The used fonts are stored right in the beginning of styles.less - You're allowed to swap the Lato Font with over 500 other font available at Google Web Fonts. Use them at your own risk, they might look bad if not configured properly.

@lato: "Lato", "Helvetica", Arial, sans-serif;
@arial: Arial, Helvetica, sans-serif;
@helvetica: "Helvetica Neue","HelveticaNeue",Helvetica,Arial,"Lucida Grande",sans-serif;

The rest of the stylesheet is pretty much self-explaining. The only thing you need to take care, in case you edit something is to keep sure it displays correctly also on mobile and tablets. Infact there is a Media Query near the end of the file for each of these devices. Those stylesheets are processed only on such devices.

Internet Explorer

This template uses new features and specs which do NOT run at all under IE6. Infact on this browser, or even older ones, an update notice will pop up inviting the user to use a decent browser to view the site. IE7, IE8 and IE9 can render the site more or less. I made my best to support this browsers too. If for some reason your customizations are not displayed properly, refer to the stylesheet called ie.css inside the css folder. It will be processed only for IE.

Custom Stylesheets

It's a good idea to store your custom stylesheet rules into a separate file. It keeps things clean and allows you to update seamlessly. All you need to do is uncomment one line of code right before the closing head tag.

<!-- Uncomment the following line for your custom stylesheet -->
<!-- <link rel="stylesheet" href="css/custom.css"> -->

Now open your custom.css file and write down your own rules. It will overwrite all the other ones. Keep sure you're not working with it in parallel with LESS, or your rules will be overwritten by the script in the footer.

C) JavaScript - top

Below is the part that loads all js libraries. For performance reasons is has been placed near the end of the document. Do NOT alter the order. If you change the loading order they may conflict each other, especially with the Google Maps API.

<!-- Included javascript libraries -->
<script src="js/jquery.min.js"></script>
<script src="js/modernizr.foundation.js"></script>
<script src="js/foundation.js"></script>
<script src="js/app.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="js/audiojs/audio.min.js"></script>
<script src="js/jquery.plugins.js"></script>
<script src="js/net.flashedge.app.min.js"></script>

jQuery is a Javascript library that greatly reduces the amount of code that you must write.
Foundation includes three files by default: modernizr, foundation.js, and app.js - you can leave them as they are.
Google Maps requires to include their API. This is needed for the nice big map in the contact page.
Audio.js is responsible for the tiny music player docked in the bottom. You should not touch it.
jQuery plugins are stored all inside the same file and are all minified. You can leave them there, they won't harm you.
Finally my own script, net.flashedge.app.js - It comes in two flavours: normal and minified.
If you're going to edit it for whatever reason, I reccomend you to start with the normal version and once debugged, minify it. I used this one : http://refresh-sf.com/yui/

D) PSD Files - top

Inside the psd folder you'll find one global Photoshop file that stores all design in folders and is organized to be used as guide for the whole layout. It includes the header, the footer, and the following pages: home, portfolio, project, about, blog, contact.

The other PSD file is the global sprite loaded for buttons, rollovers and effects. If you're going to edit this one, keep sure you export it over the old sprite.png located inside of images/gui and keep the alignment as-is or you'll end up with stylesheet glitches.

E) Portfolio - top

The portfolio gallery can be configured to fit your needs with four, three and two columns. Depending on how you set the classes the layout will arrange itself to fit the images automatically. You'll find three different setups ready to be used among the html files: works.html, works_three.html and works_two.html - which are all basically the same. There is just a different class as shown below, where your can put as last class "twoCols", "threeCols" and "fourCols" in the "works" container div.

<div class="row">
        <div class="works twelve columns phone-four twoCols">
        <div class="item fashion portrait"><a href="project.html">...

You're supposed to link each thumbnail to a dedicated project page, where you can store as many slides you like and put additional info into the autohiding bar at the bottom. You can also just link a normal page or whatever your heart desires. It's up to you.

<div class="portfolio" data-close="true" data-heart="true" data-likes="63" data-addthis="false">
<div><img src="images/portfolio/01.jpg" class="projectSlides" alt=""/></div>...

I've included a few new options for the portfolio page: data-close, data-heart, data-likes and data-addthis.

The "data-close" option when set to true, triggers a close button which takes you one step backward in the navigation history. You can hide it by setting false.
The "data-heart" attribute summons a heart button, which will act as a like counter and also show an addthis widget if set properly. If you set it to false, no button will be created.
The "data-likes" stores the number of likes to be displayed inside the heart. It's just a number handled by your content management system.
The "data-addthis" will create an addthis widget right below the heart shaped button when set to true. Keep sure your data-heart is set to true if you want this to work. Also keep sure you have uncommented the AddThis API in the footer by setting your right user id, like shown below.
```


```

Since the slides are common divs, you could potentially put inside there anything you like: text, videos or simple images.

Videos

I've included a little update which allows you to link full videos from the portfolio page. All you need to do is adding an anchor tag, right after the image contained inside the divs and use as class "play" for a proper styling. Then link the video page.

<div><img src="images/portfolio/01.jpg" class="projectSlides" alt=""/></div>
<div><img src="images/portfolio/02.jpg" class="projectSlides" alt=""/>
<a href="video.html" class="play">Play</a>
</div>

The video pages, should be setup in a way that your users think the video starts automatically since they already clicked the "play" button. I made a new script which will trigger autoplay to your videos for this. All you need to do is add a "data-autoplay" to your video divs and set them to true, like shown below.

<div class="fullvideo" data-fit="false">
    <!-- Vimeo example of fullscreen, autoplaying video -->
    <div class="flex-video widescreen vimeo" data-id="36329348" data-autoplay="true"></div>

Use as reference the video.html file which shows you the video wrapped inside a bigger div called "fullvideo" that takes care of the sizing. With the "data-fit" option you can decide to either fit the video without cutting it, or to fill the whole area by cropping the top and bottom. Just one note: for iOS a second touch is required to get videos playing due system limitations.

F) Music Player - top

The footer contains a persistent, tiny bar that on rollover reveals a music player which will keep playing through the whole site. Some might find it cool, others won't. You can disable autoplay by just removing the "autoplay" like commented in the code.

    <footer id="footer">

    <!-- music player start -->
    <div id="musicPlayer" class="hide-on-phones">
        <audio preload autoplay></audio> <!-- add/remove attribute 'autoplay' for your convenience -->

The playlist looks like this.

     <li><p data-src="media/audio/adg3com_freeform.mp3">♫ Freeform by <a href="http://audiojungle.net/user/ADG3studios/portfolio" target="_blank">ADG3Studios</a> · Available on <a href="http://audiojungle.net" target="_blank">AudioJungle</a></p></li>

     <li><p data-src="media/audio/adg3com_cloudlessdays.mp3">♫ Cloudless Days by <a href="http://audiojungle.net/user/ADG3studios/portfolio" target="_blank">ADG3Studios</a> · Available on <a href="http://audiojungle.net" target="_blank">AudioJungle</a></p></li>

Keep using the attribute "data-src" for each list item, it's the only thing needed to store correctly the tracks in the playlist. The description can contain anything you like.

G) Google Maps - top

In order to configure your address all you need to do is write down your address like you would on Google Maps. Documentation of the gMap Plugin can be found here. Open the contact.html file and find the "target" div. It offers you "data-address" and "data-zoom" attributes. The first one is just your normal address, write it down as you would normally. The second attribute can be between 1 and 19, be careful with this one!

<div class="target docked contact" data-address="2/26 Elizabeth St, Melbourne, Australia" data-zoom="12">

Once compiled the gMap plugin will take care of the rest to find your location and display it inside the contact page. It's easy!

H) Tweets Widget - top

The homepage contains a tiny widget that displays the latest tweets. In order to configure it you need to open index.html and find the "tweets" div that contains two attributes: "data-user" and "data-number". The first attribute is your twitter user name, the second one is the number of tweets to scroll through. You'll find also a comment that helps you directly in the code.

<!-- put as data-user your twitter username and as data-number the amount of tweets to parse, that's it! -->
<div class="tweets" data-user="flashedge" data-number="3"></div>

I) Contact Form - top

In order to get the Contact Form to work your Web Hosting must support PHP, unless you replace the provided script with another one. You can change the processor path by editing the "action" attribute of the form tag. The default path points to php/mail.php

<form class="nice" action="php/mail.php" method="post" novalidate>

The validation is made through javascript which shows three messages, depending on what happens. You can customize the text of each alert message directly in the contact html document.

<div class="alert-box success">
    Yay! The message was sent. Thank you!
    <a href="#" target="_self" class="close">×</a>
</div>

<div class="alert-box warning">
    Hey, fill out the fields correctly!
    <a href="#" class="close">×</a>
</div>

<div class="alert-box error">
    Whoops! It seems like some error occurred!
    <a href="#" target="_self" class="close">×</a>
</div>

Once you edited the document you need to configure your email address in php file. It's the very first parameter, just replace it with your email address and you're set!

<?php
$to = "you@yourdomain.com";

J) Vimeo & YouTube

I made some major effort to integrate Vimeo and YouTube Videos with just one single parameter: the id. You just need to grab it from the respective website and copy it inside of the "data-id" attribute.

On the Vimeo website the latest number in the address bar is the id you need to grab. It's circled in red, you can't miss it!

Once you got the id number, copy it inside your vimeo video container, inside the "data-id" attribute.

    <!-- Vimeo Video can be configured by simply copying the id below here! -->
    <div class="row flex-video widescreen vimeo" data-id="36329348"></div>

On YouTube you'll find the id to be the latest parameter made up of a mix of lowercase and uppercase letters. The example shows the interested part circled in red.

Once you get that string of letters, drop it inside our YouTube container inside of the "data-id", like shown in this example.

    <!-- YouTube Video can be configured by just copying the id below here! -->
    <div class="row flex-video widescreen youtube" data-id="LuvpgLII7PY"></div>

The videos will size themselves inside the container you'll store them, no need to put anything else. That's it!

K) Sources and Credits - top

The following libraries were used:

Foundation by ZURB http://foundation.zurb.com
LESS by Alexis Sellier http://lesscss.org
Isotope by Metafizzy http://isotope.metafizzy.co
jQuery Transit by Rico Sta. Cruz http://ricostacruz.com/jquery.transit
iScroll by Matteo Spinelli http://cubiq.org
prettyPhoto by Stephane Caron http://www.no-margin-for-errors.com
jScrollPane by Kelvin Luck http://jscrollpane.kelvinluck.com/
Tweet! by seaofclouds http://tweet.seaofclouds.com/
TubePlayer Plugin by Nirvana Tikku http://www.tikku.com/jquery-youtube-tubeplayer-plugin
Placeholder by Daniel Stocks http://webcloud.se
jQuery gMap by Sebastian Poreba http://www.smashinglabs.pl/gmap

The following icons were used:

Iconic by somerandomdude http://somerandomdude.com/work/iconic/
Social icons by Pixeden http://www.pixeden.com

Included photos courtesy of Envato Asset Library.

L) History - top

Version 1.0.1 First release
Version 1.0.2 Fixed gMap loading in IE
Version 1.0.3 Fixed minor glitches
Version 1.0.4 Added Close function in Project Page
Version 1.0.5 Added Like function in Project Page
Version 1.0.6 Added Pretty Photo Support
Version 1.0.7 Added Video Support in Project Page
Version 1.0.8 Added jScrollPane as alternative to iScroll
Version 1.0.9 Added Autohide option for Navigation
Version 1.1.0 Minor stylesheet and code fixes
Version 1.1.1 Optimized Background transitions
Version 1.1.2 Added Global Scrolling Support
Version 1.1.3 Added Multiple Video Support
Version 1.1.4 Fixed Menu glitches on Touch Devices
Version 1.1.5 Added automatic detection of file extension
Version 1.2.0 Fixed minor issue with deeplinks
Version 1.1.7 Updated Transit jQuery Plugin
Version 1.1.8 Replaced Transit jQuery Plugin with Greensock TweenMax
Version 1.1.9 Fixed layout glitches on Android
Version 1.2.0 Added menu functions for Touch devices
Version 1.2.1 Stylesheet tweaks
Version 1.2.3 Fixed Safari Flickering Issue

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Sincerely, flashedge

Go To Table of Contents