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 files (availability of PSD source files depends on the template, they may not be available in the particular template package).
- sass
  
  includes .scss files, used in template.
- pug
  
  includes .pug files, used in template.

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>
     <div class="page">
         <!-- Page Head -->
         <header class="page-head">
             ...
         </header>

         <!-- Page Content-->
         <section>
                     ...
         </section>

         <!-- Page Footer-->
         <footer class="page-footer">
                 ...
         </footer>
     </div>
     <!-- Javascript -->
     <script src="js/core.min.js"></script>
     <script src="js/script.js"></script>
     </body>
   </html>

CSS Structure

All Website Template 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:

/**
* Template Style
*
* [Table of contents]
*   1. Custom styles
*     1.1 Main Styles
*     1.2 Typography
*     1.3 Backgrounds
*     1.4 Colors
*     1.5 Main layout
*
*   2. Components
*     2.1 Icons
*     2.2 Buttons
*     2.3 Forms
*     2.4 Tables
*     2.5 Lists
*     2.6 Post
*     2.7 Thumbnail
*     2.8 Tooltip
*     2.9 Snackbars
*     2.10 Navigation
*     2.11 Preloader
*     2.12 Breadcrumbs
*     2.13 Panel custom
*
*   3. Helpers
*     3.1 Text-alignment
*     3.2 Text-styling
*     3.3 Visibility responsive
*     3.4 Groups
*     3.5 Context Styling
*     3.6 Sections
*     3.7 Offsets
*
*   4. Modules
*     4.1 Flex grid
*     4.2 Unit-responsive
*
*   5 Plugins
*     5.1 Animate
*     5.2 Isotope
*     5.3 Owl Carousel
*     5.4 RD Navbar
*     5.5 RD Parallax
*     5.6 RD Google-Map
*     5.7 RD Search
*     5.8 To top
*     5.9 Tabs
*     5.10 Photoswipe
*     5.11 Progress-bars
*     5.12 Counter
*     5.13 jquery-circle-progress
*     5.14 Timecircles
*     5.15 Swiper
*
*   6. Fonts
*     6.1 FontAwesome
*     6.2 MDI
**/