1. Setuptop

We suppose that you have some knowledge about HTML and CSS, therefore this documentation doesn't include any detailed explanations of simple steps such as how to add, remove or edit HTML tags and CSS properties. You can check this course if you want to improve your knowledge, "30 Days to Learn HTML & CSS".


In this documentation we will explain you how to setup Flash HTML Template. In order to edit template files you will need a code editor (e.g. you can use CODA for Mac or NotePad++ for Windows.


This template is compatible with all the major browsers, Chrome, Firefox, Opera, Safari and Internet Explorer (ie8+).



Server Require

The template requires web server with PHP 4+ installed. Also PHP function mail() should be enabled (for correct work of the contact form). Please note, without having PHP enabled this Template will work fine, but the contact form will not send the email.



Web Development Tools

With these tools you can inspect HTML and modify style and layout in real-time, use the most advanced JavaScript debugger available for any browser, accurately analyze network usage and performance, and much more. If you do not know this tool, should surely try it!

For Chrome: Chrome DevTools

For Firefox: Firebug



2. HTML Structuretop

This template comes with 3 different MODELS of html pages:


  • Full Width;
  • Revolution Slider;
  • Home Parallax;

Inside of each model, you have 3 associated STYLES :


  • Light;
  • Dark;
  • Blue;

Inside of Dark and Light styles, you also have 7 pre-defined COLOR SCHEMES that can be found on CSS folder.

You can use whatever color you like. You just need to leave uncommented your preferred color-scheme. You can do it this way:


			  
				
				
			  

This template comes with 4 different html pages, index.html, proj-slider.html, proj-video.html and proj-bigimages.html.


2.1 Main Page - index.html

Section - Home (Full Width)

                    
                    	
						
...
...

Section - Home (Home Parallax)

				
...
...

Section - Home (Revolution Slider)

				
...
    ...
  • ...
  • ...

Section - About

	 
	

We set new standards in user experience & make future happen.

We think BIG!

...

Our Clients say.

...

Who WE are?

...

Section - Services

     
  	 

Making awesome stuff on a regular basis, oh yeah!

...
...

this is our Pricing

Basic

$12 p/ month

  • 10 Email Accounts
  • 100GB Space
  • 1 Domain Names
  • 1TB Bandwidth
...
We have new and innovative ideas!

Section - Portfolio

  	
	

We do Creative Stuff!

DESIGN IS NOT JUST WHAT IT LOOKS LIKE.
DESIGN IS HOW IT WORKS.

Section - Elements

  
  

A Responsive Slider for any eventuality

  • Awesome One Page Template

  • ...

Accordions

Accordion 1

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Contrary to popular belief, lorem is not simply random text.

...

Tabs

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

...

Buttons

White Black Red Green Blue

Font Awesome Integration

...

  • icon-adjust
  • ...
...
...

Section - Contacts

    
  
  

Get in Touch with us

Drop us a line

Thank you, your message has been sent.

Name E-Mail Subject
Message SEND

Other Contacts

  • Street N1, 936534, Washington D.C
  • geral@flash.com
  • +351 966 666 666
  • +351 422 311 432
...

Section - Footer

 
	
	
	

              


2.2 External page - work-slider.html
           	  
...
2.3 External page - work-video.html
           	  	
           	  	

Animation Hotline: Tryst

Type: Video / Animation

Client: Vimeo

Link: Dustin Grella



There are many variations of passages Lorem Ipsum available of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.


2.4 External page - work-bigimages.html
              	
              	

Creative One Page

Type: Web / Branding

Client: Envato

Link: www.yoursite.com

There are many variations of passages Lorem Ipsum available of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.




3. Template Filestop

Inside the template folder your have the the following files and folders.



Template Files

4. Skeleton Gridtop

We use on this template the Skeleton as predefined grid. Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone.

Skeleton's base grid is a variation of the 960 grid system. The syntax is simple and it's effective cross browser, but the awesome part is that it also has the flexibility to go mobile like a champ. Go ahead, resize the browser and watch as the layout reacts!

You can view more information about it Here →



How to change the number of columns?

For example on the html markup of the Team Members, you can see that, each profile use one-third column that is dividing the layout on three columns. If you want to change it to four columns or two columns, you need to change that values on the line 8 of the following code.


		 
		


5. Home Sectiontop


5.1 Top Bar

On the top bar you have on the left side the contacts whith the Font Awesome icons. On the right side you have the Social Icons. You have 14 Social Retina Ready Icons to choose, facebook, twitter, forrst, flickr, linkedin, skype, google, vimeo, picasa, deviantart, behance, youtube, rss and pinterest.

		 
    	 


5.2 Logo

We use in this template SVG images. SVG is an image format for vector graphics. It literally means Scalable Vector Graphics, that is the perfect format for Retina Devices. SVG images can be created and edited with any text editor, but it is often more convenient to create them with drawing programs such as Inkscape.

To setup your logo first you need to create the html markup.

		
        
		
		

After this you need to add the Background-image on the css. (Default.css, line 455.)

		
			nav #logo a.logo-img{
				background: url(../images/flash.svg) no-repeat center left;
				position: relative;
				float: left;
				width: 100%;
				/*
				Add a height if you logo need it
				height: 0px;
				*/
				margin-top: 2px;
				min-height: 33px;
			}
		
		

The use of SVG on the web is still limited by the lack of support in older versions of Internet Explorer (IE). For that we use a ie conditional that replace the svg image for png images on internet explorer. (Default.css, line 467.)

			/* applied with IE conditional tags */
			.lt-ie9 nav #logo a.logo-img{
				background: url(../images/flash.png) no-repeat center left;
			}
		
		


5.3 Navigation Menu

The navigation menu use a normal ul with normal li's inside. That is the HTML Markup.

		
        
		
		

Like you can see we add a class="nav-to" to each a to make the scrool effect. Also we add to each a the anchor point href="#about" to point to a place within a page.



5.4 Revolution Slider

This plugin features tons of unique transition effects, an image preloader, video embedding, autoplay that stops on user interaction and lots of easy to set options to create your own effects. All customization can be handled via jQuery Options, HTML 5 data-attributes and CSS!

In the template folder you can find the Revolution Slider folder, and inside it you have the Documentation that explains you how to setup the slider, the effects list and other features that you easily add to your slider. You can check this video too How to Get Started?



5.5 Intro Text

In this section you can find the two big title and the next-section button, here you can see that it have the class="nav-to" that allow it to scroll down the page.

			
		

HELLO, WE ARE FLASH
A group of experienced designers and developers.



6. About Sectiontop


In this section you can had text about you or your enterprise. It's constituted by two parts:


6.1 Intro Text

In this section you have it divided with one column with sixteen columns. You can have it wherever you wan't. Just copy it.


6.2 About Text and Testimonials

In this section you have it divided with two columns with height columns each one.

Over here you might have some kind of explanation text about you or your enterprise and testimonials texts, so you can show what people says about you.

You can add a new blockquote foreach new testimonial.


		
		 
			

Our Clients say.

Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions.
Jonh Doe, Flash
. . .


7. Services Sectiontop


On this section you are able to have those crazy icon movements which will leave you nuts!!

If you need to have a new row of icons you can set a new service-row.

By this way you can only use three icons per row.

		
		
			
. . .
. . .

For you to change icons you can go to animated-contents.js (js/animated-contents.js) and you need to find line 187, and then all to the page bottom, you have the default created icons. You can also have them changed!!


		/*
		-----------------------------------------------------------------------------
		  SERVICES SECTION - ICON1
		-----------------------------------------------------------------------------
		*/
		$('#services .service .love').css('opacity', '0');

		var AnimateServiceLove = false;

		function animateservicelove() {
			if (AnimateServiceLove === false) {
				$('.love').addClass('animated flipInX');

				$('.love').css('opacity', '1');
			}

			AnimateServiceLove = true;
		}

		$('#services .service .love').waypoint({
			handler: function() {
				animateservicelove();
			},
			offset: '100%',
			triggerOnce: true
		});
		
		

Then you only need to change the class name (.love) for the image name which is located at (images/icons-service/).

The name is the same as the class name, so you will only have to replace that name, with your icons choice.



8. AJAX Portfoliotop


8.1 Category Filter

In this theme we use Isotope Plugin to do the filtering projects by category. You can add how many you want, simply edit the data-option-value=".yourCategory" and after this simply add this value as a class of the masonry_item.

		
        
        
		


8.2 Thumbnails

You can create as much items as you want. Simply use the following way:


		    
        
		
		
For any anchor-tag which should load content into #pageloader tag, be sure to use the classname "loadcontent" with a 'rel' and a correct 'href' attribute. rel attribute must be unique.


Flash use proj-loader.js to load your projects inside your index.html. The div that will receive the contents of ajax is Page Loader


		
	  	
	    


8.3 Projects Templates

This template comes with 3 different projects templates that you can choose to showcase your projects.


8.3.1 - Proj-Slider.html


		

iPad 3D

Type: Graphics / 3D

Client: Creattica

Link: by loswl

There are many variations of passages Lorem Ipsum available of Lorem Ipsum available, but the majority have suffered alteration in some form.



On Line 5 you can add the Description of your project, like Title, Type, Client, link and some description.

On Line 27 you can see that we use a flexlider to load the projects images with a slider.



How to add More Sliders or Sliders Templates?


To create a new proj-slider.html file, first you need to copy/paste the entire code of this template to a new file. After this you need to attribute a unique ID to the slider, as you can see in code behind (line 30) we have id="proj_slider01", this ID linked the project thumb and the Ajax page.

Finally you need open the proj-loader.js and on line 88 add you new slider to the loadContent function.


		/* LOAD CONTENTS */	
		function loadContent(href) {
			
			$('#loader').fadeIn(100);
			
			var LoadContentWrapper = href+' .pageloader_inner';
			
			
			$('#pageloader').delay(1000).queue(function() {
				$(this).load(LoadContentWrapper, function() {
		
					$('#loader').fadeOut(100);
					$('#pagecontent').slideDown(slideUpSpeed, $easingType, function() {
					
						$close_button.fadeIn(500);
						
						$('#projects').load(href , function(){
				        	
				        	/*********************************
				        	
				        	 ADD A SLIDER FOR EACH PROJECT 
				        	 
				        	*********************************/
				        	
				        	$('#proj_slider01').flexslider();
				        	$('#proj_slider02').flexslider();
				        	$('#proj_slider03').flexslider();
				        	$('#proj_slider04').flexslider();
				        	$('#proj_slider05').flexslider();
				        	
				        	$('#yourNewSliderId').flexslider();
				
					    });
					    
				    });
					initialise('#pagecontent');
					
				// after loading is complete initialise all scripts
				});
				$(this).dequeue();
		});
		
		



8.3.2 - Proj-BigImages.html


In this template you just need to pay attention to the class="scale-to-grid" because it is very important for making your images responsive. Line 27

		

Efímero

Type: Graphics / Web

Client: Creattica

Link: by Mr. Kons

There are many variations of passages Lorem Ipsum available of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.here are many variations of passages Lorem Ipsum available of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.here are many variations of passages Lorem Ipsum available of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.





8.3.3 - Proj-Video.html


		

CGI Motion Graphics Design Showreels

Type: Video

Client: You Tube

Link: by Twisted Nejc Polovsak

There are many variations of passages Lorem Ipsum available of Lorem Ipsum available, but the majority have suffered alteration in some form.



What we have in this section is a gallery which you can use to show all your work and you even can divide it into sections, so that costumers can see your Awesome portfolio. You can use it to display a various number of photos from your works. You can even use videos for your portfolio, isn't it nice?!

It's formed by a menu and the gallery itself.


		
		

In the menu you need to call the class on the a tags, which will call the right portfolio item. In this example we use ff-item-type-2.


		
		 
			

If you use rel="prettyPhoto[pp_gal]" it will create a thumbnail gallery and it picks all the images that has that same rel.

If you want to use a video you just need to add for example, an youtube video, and you will only need to add it in the a tag and replace rel for rel="prettyPhoto".


		
		
		
		


10. HTML Elementstop

Ok, so now you can manage your styles with some crazy elements!!


Element - Responsive Slider

			
			
  • Awesome One Page Template

  • ...

Element - Accordion

			
			
Accordion 1
...
...

Element - Tabs

			
			

...

...
...

Element - Buttons

					
				White
				Black 
				Red
				Green
				Blue 
		  

Element - Service Graph

				
			
  • 90%PHOTOSHOP

  • ...
  • ...

11. Setup Contact Formtop


Like we said on the top of this documentation, this template requires a web server with PHP 4+ installed. Also PHP function mail() should be enabled.

Open the send.php file inside the contact-form folder. In this folder you need to edit one simple line for put your email adress.

					
		';
		?>
		

12. Animated Contentstop


Flash use the animated.css by daneden to animate your contents. You can animate how many elements you want! You can view more information and the effects list Here →


How it works?

You can animate the contents just on page load but we decided put it on another level :) For that we use the waypoints.min.js. Waypoints is a jQuery plugin that makes it easy to execute a function whenever you scroll to an element. So we do the animations just when the page reach the active section. You can edit add or remove the effects on the animated-contents.js.


In the following example we make the animation of the about text "Think Big!". For that first we create the function to add the class to the div .thinkbigwith the desired effect, in this case fadeInLeft. Line 6 & 10

After that, we give the instruction to add the class ThinkBIG only when the about section is reached. Line 20


		
			/*
			-----------------------------------------------------------------------------
			  ANIMATE ABOUT SECTION - THING BIG
			-----------------------------------------------------------------------------
			*/
			$('#about .thinkbig').css('opacity', '0');
		
			var AnimateAboutBig = false;
		
			function animateaboutbig() {
				if (AnimateAboutBig === false) {
					$('.thinkbig').addClass('animated fadeInLeft');
		
					$('.thinkbig').css('opacity', '1');
				}
		
				AnimateAboutBig = true;
			}
		
			$('#about .thinkbig').waypoint({
				handler: function() {
					animateaboutbig();
				},
				offset: '100%',
				triggerOnce: true
			});
		


13. Parallax Sectionstop


Flash is prepared to add parallax sections into your page, to do that you just need to paste the following code at the end of each section.
Line 2 - Add the image on the style. Line 4 - Add your contents.


		
		
		
		
You need to pay attention to the id of the parallax content, because it must to be unique on all the different parallax sections.

After this, simply open the flash.js file and on line 81 add your parallax sections.



		
		/*
		-------------------------------------------
			PARALLAX
		-------------------------------------------
		*/
			
			$(window).bind('load', function() { 
										  
				parallaxInit();						  
				
			});
			
			function parallaxInit(){
				
				$('#parallax-1').parallax();
				$('#parallax-2').parallax();
				$('#parallax-3').parallax();
				$('#parallax-4').parallax();	
				$('#parallax-5').parallax();		
				
				/* ADD AS NECESSARY */
				
			}	
			
		/*
		
		


14. Setup Template Fontstop


14.1 @font-face

Flash use as predefined font the Google Font Open Sans on @font-face mode. @font-face is a css rule which allows you to download a particular font from your server to render a webpage if the user hasn't got that font installed.


We call that fonts on the bottom of the default.css file.

		
		
		


How to use it?


You just need to add the font-family atributte to the text element inside the css file, like we do for example on the Big Intro Text on the Flash homepage, where we defined the font as OpenSansLight.

		.intro-text h1{
		    font-family: OpenSansLight, sans-serif;
		    font-weight: lighter;
			font-size: 25px;
			text-transform: uppercase;
			letter-spacing: 5px;
			position: relative;
			margin: 0;
			z-index: 999;
			padding: 15px 0 15px 0;
			text-align: center;
			color: #333;
		}
		


14.2 Google Fonts

You can start using the Google Fonts API in just two steps:

1. Add a stylesheet link to request the desired web font(s) on the head of the index.html.


				<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">
			

2. Style an element with the requested web font, either in a stylesheet.

			.intro-text h1{
			    font-family: GoogleFont, sans-serif;
			    font-weight: lighter;
				font-size: 25px;
				text-transform: uppercase;
				letter-spacing: 5px;
				position: relative;
				margin: 0;
				z-index: 999;
				padding: 15px 0 15px 0;
				text-align: center;
				color: #333;
			}