HTML Templates Documentation

Template structure

This section includes information on complete template and its separate files structure.

Package structure

After HTML Website Template package extracting you'll see the following files structure:

documentation

includes template's documentation files (on template editing and setup).
- documentation.html
  
  main documentation file. Includes link to online documentation you are currently reading.
screenshots

includes template's sceenshots. Not to be used at live site.
site

includes template's pages as .html files.
- bat
  
  includes all .php scripts, used in template.
- audio
  
  includes all audio files, used in template.
- css
  
  includes all .css files, used in template.
- fonts
  
  includes all custom typography and iconic fonts, used in template.
- images
  
  includes all images, used in .html files.
- js
  
  includes JavaScript libraries and jQuery plugins.
- video
  
  includes all audio files, used in template.
sources

includes template's source files.
- psd
  
  includes .psd Adobe Photoshop files.
- sass
  
  includes .scss SASS files, used in template.
info.txt

includes information on a password-protected "sources" folder.

HTML Structure

HTML Website Template .html pages structure is built on the following principle:

<!DOCTYPE html>
<html lang="en">
<head>

    <!-- Your Stylesheets, Core Scripts (jQuery etc) & Title -->
    ...

</head>
<body>

<!-- The Main Wrapper -->
<div class="page">
    <!--=================================================
                           Header
    ==================================================-->
    <header class="page-header">

        ...

    </header>

    <!--=================================================
                           Content
    ==================================================-->
    <main class="page-content">
        <section>
            <div class="container">

                ...

            </div>
        </section>
    </main>

    <!--=================================================
                           Footer
    ==================================================-->
    <footer class="page-footer">
        <div class="container">

            ...

        </div>
    </footer>
</div>

<!-- Additional Functionality Scripts -->
<script src="js/script.js"></script>
</body>
</html>

CSS Structure

All HTML Website Templates styles are located in style.css file.

Code is commented according to CSSDoc standard.

Structure of style.css file is built on the following principle:

    /*
    * @package      Style
    * @description  This package holds style declarations of all
    *               included page layouts
    */

    /*
    * @section      Page Layouts
    * @description  This section holds page layouts style declarations
    */

    ...

    /*
    * @section      Main Styles
    * @description  This section holds template default elements style
    *               declarations
    */

    ...

    /*
    * @section      Main Layout
    * @decsription  This section holds class declarations for elements
    *               indent creation
    */

    ...

    /*
    * @section      Helpers
    * @description  This section holds various helper classes for conditional
    *               page styling
    */

    ...

    /*
    * @section      Components
    * @description  This section holds all elements style declarations of
    *               template
    */

    ...

    /*
    * @section      Extensions
    * @description  This section holds some of style declarations for
    *               necessary scripts
    */

    ...

    /*
    * @section      Page Header
    * @description  This section holds specific style redeclarations for
    *               some of common elements in page header
    */

    ...

    /*
    * @section      Page Content
    * @description  This section holds specific style redeclarations for
    *               some of common elements in page content
    */

    ...

    /*
    * @section      Page Footer
    * @description  This section holds specific style redeclarations for
    *               some of common elements in page footer
    */

    ...