1. Start
  2. Folder Structure
  3. HTML Structure
  4. CSS Files and Structure
  5. JavaScript
  6. Elements
  7. Sources and Credits

Flatible

Single Page HTML5 Template

Thank you for purchasing our theme. 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!

Flatible is Html5 + CSS3 responsive single page 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 6 folders.

Here they are, sorted alphabetically:

  1. HTML - Main folder for template
  2. Documentation - Documentation for Straight site template
  3. PSD - Photoshop format files

HTML Structure

This template is done in four versions(skins). All the skins are same except some changes on background-color, text colors and some icons. These versions are


Body part of the Html file is divided in three 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
    • Menu - with logo in the left

    Header is completely based on bootstrap 3.0 framwork. For more about bootstrap documentation find here

    Header navbar give to you oppurtunity to scroll over sections, and also remind you the section you are with active state in navbar



  3. SLIDER
    • Slider-Revolution - Slider is very reached with animations and many elements on it. If you want to know more about slider revolution, you can learn from Slider Revolution documentation

      • Slider-Revolution structure



  4. CONTENT
    • Different section

      • Content structure (e.x. testimonials section)



  5. FOOTER
    • Copyright - Copyright line at the bottom
    • Social network - few social icons




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 vertically.

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 8 CSS files

  1. bootstrap.css
  2. jquery.bxslider.css
  3. flexslider.css
  4. settings.css
  5. fullwidth.css
  6. magnific-popup.css
  7. responsive.css
  8. style.css

Description:

  1. In style.css which is main style sheet for "Straight" 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.css - grid structure based on Bootstrap Framework.

  3. Styles for bxslider. i have used this slider in testimonials section

  4. Styles for Flex Slider to work properly. Flex Slider is used on single-project, when you click link of the project it will be opened with magnific popup. Read more here.

  5. Also we have a unique files settings.css, settings.css for revolution slider

  6. Also we have a file for magnific popup called magnific-popup.css . If you want to know more about this popup you can read more here

  7. And we have a responsive.css file for fixing errors in responsive

JavaScript

In folder js you will find 10 javascript files, but all adjustments are in just one file: "app.js".

All JavaScript files:

Description:

Elements

I have used many elements, i will show the structure of this elements, it's very easy to implement in which part of your template you want.

Description

Sources and Credits

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

Once again, thank you for purchasing this Theme. As mentioned at the beginning of this documentation, we would be glad to help you if you have any questions related to this Theme. For more general question related to this Theme on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

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

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

Kind Regards,
WPBOX