1. START
  2. Overview
  3. html
  4. css
  5. fonts
  6. javaScript
  7. explaining every pages
    1. Navigation
    2. Home
    3. About
    4. Who we are
    5. Counter section
    6. Quotes section
    7. Team section
    8. Video section
    9. Service section
    10. How we wok section
    11. Portfolio section
    12. Clients
    13. Testimonial
    14. Pricing section
    15. Contact Address section
    16. Contact Form
    17. Image Gallery
    18. Footer
  8. credits
  9. thanks!

Spring :: Creative One page Template


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 abmathasuriya on ThemeForest. Thanks so much!

Overview


Springfield Template is built using Bootstrap v3.1.1 framework: Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.

Before we start, lets take a look on the folder structure of the theme. All theme files are placed in the HTML folder. The main HTML folder consists of 4 more folders for diferent types of theme assets:

  1. img - folder contain all images for the theme design
  2. js - folder contain all jquery plugin
  3. fonts - Folder contain font file for Font Awesome Icons
  4. css - folder contain all CSS files for the theme.
  5. email.php - PHP script for mail functionality.

Installation


This is an HTML theme and doesn't require installation in the traditional meaning of the word. You only need to place the content (HTML files and the folders) in your prefered web directory

Keep in mind that the folder structure and file/folder names are important for theme to work in correct order.

HTML


The theme is based on Bootstrap v3.0.0 framework. The general template structure is the same throughout the template. Here is the general structure.

  1. Navigation
  2. Home
  3. About
  4. Who We Are
  5. Counter
  6. Quotes
  7. Team
  8. Video Separator
  9. Services
  10. How we works
  11. Separator Action Penal
  12. Portfolio
  13. Clients
  14. Testimonials
  15. Price List
  16. Contact Address
  17. Contact Form
  18. Social icon
  19. Image gallery
  20. Google Map
  21. Footer

Below are the general HTML structure of all pages.

HTML general Structure

Each section further described in Explaining every section

CSS


The theme comes with CSS (stylesheet) files grouped in the css folder:

1. bootstrap.css Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.

2. style.css is the main CSS file containg the layout styling of the pages.

3. font-awesome.min.css contains the iconic font style.

4. owl.carousel.css contains style owl touch slider

5. animate.css contains style for content animation

6. YTPlayer.css contains style YTPlayer plugin

7. cubeportfolio.css contains style for portfolio plugin

8. jquery.bxslider.css contains style for bxslider plugin

The main sections of the style.css are separated by comments and the classes are named with clear names for better understanding and easier navigation.

Fonts


This theme uses Montserrat google fonts and Raleway google fonts.

JavaScript


This template is heavily loaded with both custom JS functions and free jQuery plugins. All JS files are placed in a separate folder called "js". The list of files are as under:

Some of the jQuery plugins are heavily customized and chages in their files are not recommended.

All JS functions related to the theme content management are placed in theme.js. The script.js file is responsible for the main functions and all slider initialization script.

Explaining every pages


This section explains how every page section is implemented.

NAVIGATION

The navigation menu, Div containing id "fixed-navbar" contains nav tag brand logo and navigation menu.

navigation menu visibility control by JavaScript function. The smooth scroll effect is controlled by jQuery plugin. The screenshot below explains code for fixed menu.
logo menu

All navigation menu style contains in style.css file

HOME SECTION

Div containing id "home" contains fullscreen background image with parallax background image and Text slider on center of the screen. Div containing id "slider-home" contains home text slider. on scroll parallax effect is control by custom javascript in script.js file and jquery plugin.

Below are the general HTML structure home section.

home

All home page style contains in style.css file.

ABOUT SECTION

All html in this section is nested within a section with an id of "about". About section contains:

  1. about us header
  2. About us intro blocks

Div containing id "about" contains about us section heading and sub-heading text. Article id "about-intro" contains abous us intro block with icon, text title. Unordered list id "intro-blocks" contains individual intro block with on click of the block Intro Detail show on bottom of the block. Used jquery plugin and custom javascript in about us section. Below are the general HTML structure for about us section.

process

All styles for this section in style.css style






WHO WE ARE SECTION

All html in this section is nested within a section with an id of "who-we-are".

Div containing class "skills-col" contains individual skill bar with text and percentage. Used custom javascript and jquery plugin. Below are the general HTML structure for this section.

process

All styles for this section in style.css style






COUNTER SECTION

All html in this section is nested within a section with an id of "fun-facts".

Div containing class "fact-container" contains individual facts number and text title. Below are the general HTML structure for this section.

process

All styles for this section in style.css style






QUITES SECTION

All html in this section is nested within a section with an id of "quotes-separator" with parallax background image.

Div containing id "quotes-slider" contains individual quotes slider. Used jquery plugin for parallax effect and quotes slider. Below are the general HTML structure for this section.

process

All styles for this section in style.css style






TEAM SECTION

All html in this section is nested within a section with an id of "team".

Div containing class "team-member" contains individual team member with image, title, sub-title and social icon links. Below are the general HTML structure for this section.

process

All styles for this section in style.css style






VIDEO SECTION

All html in this section is nested within a section with an id of "video-separator".

Div containing id "fluid-width-video-wrapper" contains iframe which holds vimeo video. Below are the general HTML structure for this section.

process

All styles for this section in style.css style






SERVICES SECTION

All html in this section is nested within a div with an id of "services". Service section contains:

  1. Service Heading and sub-heading
  2. service block with on click popup description

Div containing class "serviceBlock" contains individual service block with icon and service name. Below are the general HTML structure for service block.

process-block

data-reveal-id link to open detail in overlay. All service block detail section are palced below body in div containing class "service-detail-wrapper" with clear comments. below are the general HTML structure for detail view for service block.

process-block

DIv id "service01" link to anchor tag in first service block. same way div id "service02" links to anchor tag with second service block same way all service block with anchor tag link to individual detail block. when click on service name the respective detail view is open in popup. Popup block contains icon, service description with previous and next service detail navigation SVG icon and close button to close popup block.

DIv class "close-reveal-modal" contains close button. Unordered list class "nav_modal" contains previous and next nav with anchor tag link to respective detail block with attributes "data-reveal-id".

All style contains in style.css file






HOW WE WORK SECTION

All html in this section is nested within a section with an id of "how-we-work" with parallax background image.

Div containing class "process-b" contains individual process block with text and icon. Below are the general HTML structure for this section.

process

All styles for this section in style.css style






PORTFOLIO

The next code shows an example of works/portfolio grid. All html in this section is nested within a div with an id of "portfolio". Below are the general html for work section.

Work page

Portfolio section contains following blocks

  1. Portfolio heading : HEader containing class "section-header" contains section heading and sub-heading
  2. Portfolio filter : Div containing id "filters-container" contains filter tag to filter portfolio thumbnail based on the filter name.
  3. portfolio thumbnail grid with links to open full work details and lightbox. Div containing id "grid-container" contains unordered list class "cbp-item" contains thumbnail project image and caption title with link to open full detail and view large image in lightbox. Below are the general HTML structure for thumbnail section. Work page
  4. Portfolio load more button: Div containing class "cbp-l-loadMore-button" loads portfolio grid via ajax.
  5. Project full detail contains project title and sub-title, project image slider, project full detail and related project blocks. Below are the general HTML structure for project detail page.

All work/portfolio styles in cubeportfolio.css and style.css file

Used jquery plugin jquery.cubeportfolio.js for portfolio section.






CLIENT SECTION

All html in this section is nested within a section with a class "client-logo" . Div containing id "clients" contains clients slider images. Below are the general HTML structure for client section.

All style contains in style.css style






TESTIMONIAL SECTION

Div containing id "testimonial" contains testimonial slider with parallax background image. Use custom javascript and jquery plugin for testimonial slider. Below are the general HTML structure.

testimonial

All style contains in style.css style






PRICE LIST SECTION

All html in this section is nested within a section with an id of "price-list" . Four column block contians price info, text and sign-up button. Below are the general HTML structure for Price list section.

testimonial

All style contains in style.css style






CONTACT ADDRESS SECTION

All html in this section is nested within a div with an id of "contact-adderss". Div containing class "contactBlock" contains individual contact block for address, contact number and email address with icon and title text. Below are the HTML structure of blog section.

blog-post

All style contains in style.css style






CONTACT FORM SECTION

All html in this section is nested within a div with an id of "contact-form" with background parallax image. Form tag containing an id "contactform" contains name, email, phone and message textbox. Use custom javascript and ajax for form submit. email.php script used for sending mail. Below are the HTML structure of contact form section.

blog-post

All style contains in style.css style






IMAGE GALLERY SLIDER

All html in this section is nested within a div with an id of "img-gallery".

Div containing id "gallery" contains image slider. Below are the general HTML structure for gallery slider. contact

All style contains in style.css file






All html in this section is nested within a div with an id of "footer". Below are the general HTML structure for footer section which contains copyright notes and footer menu. contact

All style contains in style.css file






 

Credits


Thanks!


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.

please feel free to send me a message here: abmathasuriya on ThemeForest.