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.
Front is a Static Template
For the time being, we do NOT offer any tutorials or any other materials on how to integrate Front with any CMS, Web Application framework (including Angular JS, Ruby on Rails and others) or any other similar technology. However, since Front is a static HTML/CSS and JS template, then it should be compatible with any backend technology.
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 filesimg- Imagesinclude- Ajax and SASS folders with their filesjs- JavaSscript filesvendor- Third-party libraries
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.