Photofolio

Photography & Portfolio HTML5 Template

• Created: August 2016.
• By: Nunforest - Envato author

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

Photofolio is Html5 + CSS3 Photography & Portfolio template and works fine in all major browsers and IE from version 9. It's powered by jQuery and you'll find nice and discreet interactivity. The code is clearly written and you will find comments for each section parts.

Lets take a closer look at the structure of Html, Css, JavaScript...

Folder Structure

When you unpack downloaded archive from ThemeForest.net you'll get folder containing 2 folders.

Here they are:

1. HTML - Main folder for template
2. Documentation - Documentation for Photofolio site template

HTML Structure

This template contains 70 html pages.

Body part of the Html file contains a main div tag container, and this is divided in other main sections and each of these sections is further divided into smaller parts:

1. CONTAINER

   Main building blocks of Container looks like in the photo
   
   
   

2. Header

   Header is based in boostrap framework with logo in the left and the navigation in the right

   
   
   
   
3. Slider

   We have used slider revolution, if you need more on this slider we will send you slider documentation after you purchase the template, just contact us in gmail nunforest@gmail.com

4. CONTENT Sections
   • Different section

   we have included different sections, such as services section, tetimonials section, portfolio section, etc.

   
   
   
5. Footer

   Social icons, and copyright line

   
   
   

Grid:

Based on Bootstrap, a sleek, intuitive, and powerful front-end framework.

Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.

The default Bootstrap grid system utilizes 12 columns, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns stack Photofolioly.

For a simple two column layout, create a .row and add the appropriate number of .col-md-* columns. As this is a 12-column grid, each .col-md-* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).

Given this example, we have two div tags with class .col-md-6, making for 12 total columns and a complete row.

Move columns to the right using .col-md-offset-* classes. Each class increases the left margin of a column by a whole column. For example, .col-md-offset-4 moves .col-md-4 over four columns.

CSS Files and Structure

In folder "css" you will find 11 CSS files

1. bootstrap.css
2. owl.carousel.css
3. owl.theme.css
4. flexslider.css
5. jquery.bxslider.css
6. magnific-popup.css
7. font-awesome.css
8. settings.css
9. layers.css
10. navigation.css
11. style.css

Description:

1. In style.css which is main style sheet for "Photofolio" site template. This file contains all of the specific stylings for the page.

   To edit a specific part of the page, simply scroll down, every section is well commented and you can find easy the appropriate style that needs to be edited. In example:

   
   
   
   

2. bootstrap.min.css - grid structure based on Bootstrap Framework.

3. Styles for bxslider. i have used this slider in testimonials section, portfolio-gallery with thumbnail etc.

4. Also we have three files settings.css layers.css navigation.css for revolution slider

5. Also we have a file for font awesome font-awesome.css . If you want to know more about the awesome fonts you can read more here

Less files

we have included also two files in folder less

1. variables.less
2. style.less

if you want to use less files first you should install less (see here how to install), or you have the second option to use less.js script

If you use less.js you have to work in localhost or in your server and after that you should replace style.css with style.less

In variables.less file you have all commands well commented where you can place your color scheme, font-family etc

JavaScript

In folder js you will find 26 javascript files and one extensions folder, but all adjustments are in just one file: "script.js".

All JavaScript files:

1. jQuery - jquery.min.js - its the last version of jquery (v1.10.2)
2. Bootstrap - bootstrap.min.js
3. Jquery Migrate - jquery.migrate.js
4. Google Map v4.1 - gmap3.min.js
5. Bxslider - jquery.bxslider.min.js
6. flexslider - jquery.flexslider.js
7. extension folder - extensions folder
8. Revolution slider - jquery.themepunch.revolution.min.js
9. Revolution slider plugins - jquery.themepunch.tools.min.js
10. Images Loading - jquery.imagesloaded.min.js
11. Isotope - jquery.isotope.min.js
12. Retina - retina-1.1.0.min.js
13. waypoint file - waypoint.min.js
14. raphael file - raphael-min.js
15. devsolutionskill file - DevSolutionSkill.min.js
16. mousewheel file - jquery.mousewheel.js
17. Smooth Scroll for Chrome - smooth-scroll.js
18. sticky file - sticky.js
19. sticky file 2 - theia-sticky-sidebar.js
20. appear file - jquery.appear.js
21. countdown file - countdown.js
22. count to file - jquery.countTo.js
23. magnific popup - jquery.magnific-popup.min.js
24. nouislider - jquery.nouislider.min.js
25. owl carousel - owl.carousel.min.js
26. Less - less.js
27. Jquery code added here - script.js

Description:

• jQuery is a Javascript library that greatly reduces the amount of code that you must write.
• Bootstrap part Bootstrap Framework.
• Jquery migrate is additional jquery file with some sintaks of older version of jquery, it must be included.
• JS for Google Map in Contact section. Google Map data enter in "script.js".
• Most of the settings you can adjust in "script.js". Every part is commented so you can have a clue for what is used.
  
  
  
  
• ("jquery.bxslider.min.js") is use for testimonial slider posts, portfolio gallery with thumbnails etc.
• ("jquery.imagesloaded.min.js") and ("jquery.isotope.min.js") are used for ordering posts in portfolio, masonry, grid, blogs etc.
• Two themepunch files and extensions folder are used for revolution slider in home pages. If you need more about this slider send us a message we will send the documentation of slider.
• ("retina-1.1.0.min.js") is used for making images retina on small devices
• countdown is used in comming soon page
• ("DevSolutionSkill.min.js"), ("raphael-min.js") & ("waypoint.min.js") are used for circle skills in about me pages.
• ("jquery.appear.js") & ("jquery.countTo.js") are used for animate increment numbers in statistic section.
• ("jquery.mousewheel.js") is used in home scroll horizontal, and portfolio scroll horizontal posts
• owl file is used in carousel places
• ("less.js") is used for less stylesheet (you don't have to include it if you dont use less files, it's alternative only).

Elements

I have used many elements, i will show the some of these elements, it's very easy to implement in which part of your template you want. every section is well comented, just grab that section and plase where ever you want in your page

• Google Map
• working Contact form
• circle skills, animate numbers
• Different widgets in sidebar and footer
• Font Awesome
• Others

Description

• And also we own a contact form working, here in contact.php is the place for updating your mail
  
  
  note: the contact form does not work localy, it works only online.

Sources and Credits

I've used the following images, icons or other files as listed.

• jQuery - JavaScript Library
• Bootstrap - Bootstrap by Twitter
• Google Maps v3 - Google Map on contact page.
• PixEden.com - Responsive showcase presentation
• Documenter - Last but not least. Used for writing documentation. Thanks a lot revaxarts.
• Others.

Once again, thank you for purchasing this Template. As mentioned at the beginning of this documentation, we would be glad to help you if you have any questions related to this Template. Here is to be honest a simple documentation because we think there is no problem to implement your elements in this template because the code is clean and well commented. For more general question related to this Template on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

If you are satisfied with "Photofolio - site template" please go to your downloads section on ThemeForest.net and rate Photofolio with 5 stars. Otherwise, send an Email and I will try to find nice and easy solution for you :)

Hope that you will enjoy Photofolio as much as I've enjoyed designing this template.

Kind Regards,
Nunforest Team