File Structures | Nova - Responsive WebApp UI Kit

Download package

Download package contains four main [assets], [documentation], [ui-components] and [demo-crypto] folders.

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

nova/
  ├── assets/
  │   ├── css/
  │   │   ├── theme.css
  │   ├── img/
  │   │   ├── 100x100/
  │   │   ├── 350x400/
  │   │   ├── ...
  │   ├── include/
  │   │   ├── ajax/
  │   │   │   ├── autocomplete-data.json
  │   │   ├── scss/
  │   │   │   ├── nova/
  │   │   │   │   ├── alerts/
  │   │   │   │   ├── avatar/
  │   │   │   │   ├── ...
  │   │   │   |   ├── vendor/
  │   │   │   ├── _user.scss
  │   │   │   ├── _user-variables.scss
  │   │   │   ├── theme.scss
  │   ├── js/
  │   │   ├── components/
  │   │   │   ├── hs.autocomplete.js
  │   │   │   ├── hs.bs-tabs.js
  │   │   │   ├── ...
  │   │   ├── hs.core.js
  │   ├── svg/
  │   │   ├── companies-logos/
  │   │   │   ├── ...
  │   │   ├── crypto/
  │   │   │   ├── ...
  │   ├── vendor/
  │   │   ├── bootstrap/
  │   │   │   ├── scss/
  │   │   │   ├── js/
  │   │   │   ├── css/
  │   │   ├── chartist-bar-labels/
  │   │   ├── ...
  ├── documentation/
  │   ├── assets/
  │   │   ├── ...
  │   ├── components/
  │   │   ├── *.html
  │   │   ├── ...
  │   ├── customization/
  │   │   ├── *.html
  │   │   ├── ...
  │   └── getting-started/
  │   │   ├── *.html
  │   │   ├── ...
  │   └── plugins/
  │   │   ├── *.html
  │   │   ├── ...
  │   └── utilities/
  │   │   ├── *.html
  │   │   ├── ...
  │   ├── index.html
  ├── demo-crypto/
  │   ├── actions/
  │   │   ├── *.html
  │   │   ├── ...
  │   ├── dashboards/
  │   │   ├── *.html
  │   │   ├── ...
  │   ├── settings/
  │   │   ├── *.html
  │   │   ├── ...
  │── ui-components/
  │   │   ├── cards/
  └── └── └── ...

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

HTML

[demo-crypto] and [ui-components] are the sources for HTML pages and contains HTML templates. 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
[svg] - Svg files
[vendor] - Third-party libraries

Core JavaScript

The foundation of the JavaScript structure in Nova 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, RTL version etc. and also you can store AJAX calls by default.

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 giving 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 initialize 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 in a result the initialization looks like this:

$.HSCore.components.HSFancyBox.init();

Expanding (Extension) the Decorator Pattern (Wrapper)

Extension of such an object can be in separate files, which even gives flexibility to keep the main file clear and it 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';

  $.HSCore.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 Nova 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.
By creating wrapper components, it simply solves complicated initializations structures for the users.
Very easy access to any starters components and core settings from anywhere in the template.