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

Strix

Multipurpose 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!

Strix is Html5 + CSS3 Multipurpose template and works fine in all major browsers. 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, sorted alphabetically:

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

HTML Structure

This template contains 84 HTML5 pages. These HTML files are

  1. 20 Home Pages
    1. Home Corporate
    2. Home Agency
    3. Home Agency Boxed
    4. Home Agency Vertical
    5. Home Business
    6. Home Business Alt
    7. Home Construction
    8. Home Construction2
    9. Home Restaurant
    10. Home Restaurant2
    11. Home Read Estate
    12. Home Hosting
    13. Home Learning
    14. Home Medical
    15. Home App
    16. Home Freelancer
    17. Home Minimal (Portfolio)
    18. Home Portfilio 2 (Vertical)
    19. Home Shop
    20. Home Shop 2
  2. 3 About Pages
  3. 9 Blog Pages
  4. 3 Contact Pages
  5. 22 Portfolio Pages
  6. 5 Services Pages
  7. 4 Shop Pages
  8. 4 Single Post Pages
  9. 4 Single Project Pages
  10. 3 Product Pages
  11. 2 Team Pages
  12. Underconstruction
  13. Comming soon
  14. error 404
  15. Faq Page
  16. Faq

Let's take a look in default version, structure of tags in index.html file

Body part of the Html file contains a main div tag container, and this is divided in diferent 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 horizontal and vertical. Horizontal header is based on Bootstrap framework with logo and navigation

  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
    • Different sections

      • We have included different sections and eache section has it unique id or class (ex. portfolio-section, about-section, features-section etc), and each section is divided in small parts



  5. Footer

    Widgets in up part and copyright line at the bottom





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

  1. strix-assets.min.css
  2. style.css

Description:

  1. In strix-assets.min.css we have minified all 3rd party plugins style including bootstrap, owl carousel, flexslider, bxslider etc.
  2. In style.css which is main style sheet for "Element" 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:






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 first 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 9 javascript files, but all adjustments are in just one file: "script.js".

All JavaScript files:

Description:

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

Description

Sources and Credits

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


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 visitin our profile and sending an Email in Themeforest.

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

Hope that you will enjoy Strix as much as I've enjoyed coding this template.

Kind Regards,
Nunforest Team