File Structures

A guide to understanding how Front is structured and organized.

Download package

Download package contains three main assets/, html/ and starter/ folders.

Once downloaded, unzip the compressed folder and you'll see something like this:

            front/
              ├── assets/
              │   ├── css/
              │   │   ├── theme.css
              │   │   ├── sticky-footer.css
              │   ├── img/
              │   │   ├── 32x32/
              │   │   ├── 64x64/
              │   │   ├── ...
              │   ├── include/
              │   │   ├── ajax/
              │   │   │   ├── home-blog-agency-1/
              │   │   │   ├── home-blog-business-1/
              │   │   │   ├── ...
              │   │   ├── scss/
              │   │   │   ├── base/
              │   │   │   │   ├── alerts/
              │   │   │   │   ├── avatar/
              │   │   │   │   ├── ...
              │   │   │   |   ├── vendor/
              │   │   │   ├── custom/
              │   │   │   │   ├── _custom-functions.scss
              │   │   │   │   ├── _custom-mixins.scss
              │   │   │   │   ├── _custom-styles.scss
              │   │   │   │   ├── _custom-variables.scss
              │   │   │   ├── settings/
              │   │   │   │   ├── mixins/
              │   │   │   │   ├── _functions.scss
              │   │   │   │   ├── _mixins.scss
              │   │   │   ├── _theme-variables.scss
              │   │   │   ├── theme.scss
              │   ├── js/
              │   │   ├── components/
              │   │   │   ├── hs.chartist-area-chart.js
              │   │   │   ├── hs.chartist-bar-chart.js
              │   │   │   ├── ...
              │   │   ├── hs.core.js
              │   ├── svg/
              │   │   ├── clients-logo/
              │   │   │   ├── airbnb.svg
              │   │   │   ├── airbnb-original.svg
              │   │   │   ├── ...
              │   │   ├── components/
              │   │   │   ├── ...
              │   │   ├── flat-icons/
              │   │   │   ├── ...
              │   │   ├── icons/
              │   │   │   ├── ...
              │   │   ├── illustrations/
              │   │   │   ├── ...
              │   │   ├── logos/
              │   │   │   ├── ...
              │   │   ├── preloaders/
              │   │   │   ├── ...
              │   ├── vendor/
              │   │   ├── bootstrap/
              │   │   │   ├── scss/
              │   │   │   ├── bootstrap.css
              │   │   │   ├── bootstrap.min.js
              │   │   ├── chartist-js/
              │   │   ├── ...
              ├── design/
              │   └── logo/
              ├── documentation/
              │   ├── index.html
              │   ├── assets/
              │   │   ├── ...
              │   ├── components/
              │   │   ├── *.html
              │   │   ├── ...
              │   ├── customization/
              │   │   ├── *.html
              │   │   ├── ...
              │   └── getting-started/
              │   │   ├── *.html
              │   │   ├── ...
              │   └── plugins/
              │   │   ├── *.html
              │   │   ├── ...
              │   └── utilities/
              │   │   ├── *.html
              │   │   ├── ...
              ├── html/
              │   ├── account/
              │   │   ├── *.html
              │   │   ├── ...
              │   ├── blog/
              │   │   ├── *.html
              │   │   ├── ...
              │   ├── home/
              │   │   ├── *.html
              │   │   ├── ...
              │   ├── pages/
              │   │   ├── *.html
              │   │   ├── ...
              │   ├── portfolio/
              │   │   ├── *.html
              │   │   ├── ...
              │   └── shop/
              │   │   ├── *.html
              │   │   ├── ...
              │── starter/
              │   │   ├── index.html
              │   │   ├── headers/
              └── └── └── ...
            
          

This is the most basic form of Front: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (front*.css and hs.*.js), as well as compiled and minified CSS and JS (front*.min.css and hs.*.min.js).

HTML

html/ is the source for HTML pages and contains HTML templates, which you see in the online demo. These HTML files can be opened easily in any browser, imported to any project, or modified to suit your needs.

Assets

assets/ includes all the assets that are referenced in the HTML pages.

Precompiled versions of JavaScript and CSS files are generated in their respective assets/js/ and assets/css folders to support the self-contained 'static website'.

Below given folders are used in the template:

  • css - CSS files
  • img - Images
  • include - Ajax and SASS folders with their files
  • js - JavaSscript files
  • vendor - Third-party libraries

JavaScript structure

Core JavaScript

The foundation of the JavaScript structure in Front is based on one main object which does not change the root when the new functionalities are added, but instead, it only expands without affecting the behavior of the core object. The name of the object is HSCore and the content of this object looks like this:

            
              /**
               * HSCore -
               *
               * @author HtmlStream
               * @version 1.0
               */

              ;(function($) {

                'use strict';

                $.HSCore = {
                  init: function() {

                    $(document).ready(function(e) {
                      // here you can initialize all components core, which will be applied (called) in all pages,
                      // once the DOM will be ready to go.

                      // example
                      $('[data-toggle="tooltip"]').tooltip();
                    });

                    $(window).on('load', function(e) {
                      // here you can initialize all components core,
                      // which should be called as soon as the all (scripts, videos, images) are loaded.

                      // example:
                      this.components.parallax.init({
                        ...
                      });
                    });

                  },

                  // Components
                  components: {},

                  // Helpers
                  helpers: {},

                  // Settings
                  settings: {
                    animationEasing: 'easeInQuad', // example:
                    animationDuration: 450, // example:
                    rtl: false
                    ...
                  }
                };

                $.HSCore.init(); // Initialization of HSCore object.

              })(jQuery);
            
          

Essentials of HSCore Object

HSCore Settings

$.HSCore.settings - here, all general settings are stored by default. For example, effects of jQuery animation and also you can store AJAX calls by default.

HSCore Helpers

$.HSCore.helpers - here, you can store helper functions in order to avoid repetition of codes or objects, which are often used by other core components (they are a part of the whole core). For example, a project needs to get the width of the browser's scrollbar and since it is different in all browsers you should write a tiny simple script. In this case, you may just place your script under the helpers.

In order to keep, the main file clear and easy-to-use, all helper components can be placed under the following path assets/js/helpers/

HSCore Components

$.HSCore.components - this is the most voluminous (massive) component. Here you can include all the starter components of the template. The aim of this approach is to give developers as much flexibilities as possible by providing all major parameters of starter components via data-* attributes initializing.

As an example, let's take a look how a "FancyBox" plugin (library) is used within this JavaScript approach by creating decorator pattern (wrapper) around the plugin, where it automatically initializes the diagram on the basis of the data-* obtained. In the result, the initialization is pretty simple:

              
                $.HSCore.components.HSFancyBox.init('.js-fancybox'), {
                  // Here you can include the object with its settings or you can just skip it.
                });
              
            

Such an object wrapper can be referred to the components and as the result the initialization looks like this:

              $.HSCore.components.HSFancyBox.init();
            
Expanding (Extension) the Decorator Pattern (Wrapper)

Extension of similar object can be in separate files, which even gives flexibility to keep the main file clear which is highly recommended. All wrappers of starter's components are located under the following path assets/js/components/

Here is an example how decorator pattern (wrapper) looks like:

              
                /**
                 * Starter Component wrapper.
                 *
                 * @author Htmlstream
                 * @version 1.0
                 * @requires (also, it can be integrated with other plugins)
                 *
                 */
                ;(function($){
                  'use strict';

                  $.Front.components.StarterComponent = {

                    _baseConfig : {
                      // ...
                    },

                    /**
                     * Initialization of StarterComponent wrapper.
                     *
                     * @param jQuery collection (optional)
                     * @param Object config (optional)
                     *
                     * @return jQuery pageCollection - collection of initialized items.
                     */
                    init: function(collection, config) {

                      // ...

                    },

                    ...

                  }

                })(jQuery);
              
            

Advantages

  • Avoiding the probabilities of conflicts between Front codes and third party plugins (libraries).
  • Intuitive clear architecture.
  • Everything is structured, each component in its own file and in its component in the main object.
  • The ability of extending functionality without affecting the behavior of the core object and not changing the existing functionality.
  • Creation of wrapper components simply solves complicated initializations structures for the users.
  • Very easy access to any starters components and core settings from anywhere in the template.