Welcome

Dear customers, first of all we would like to thank you for choosing Gravity Template! We truly hope that Gravity will serve you well, and that it will live up to your expectations.

We hope you will enjoy using Gravity template's easy to navigate and user-friendly layout as well as developer-friendly code. Further more, a lot of resources have been employed and many options have been added just to make sure that our valued customers will be satisfied with their purchase.

Updates

In order to keep up with the fast paced evolution of web design trends, we always try to release new updates on continuous basis. Our goal with each update is to impress our customers and to put huge smile on their faces. We would like to bring to your attention that once you purchase Gravity Template, you become eligible for a lifetime entitlement to download updates for FREE! On the other hand, we regret to inform you that license upgrade is not available. If you wish to upgrade your license, a new purchase must be made.

Support

In Gravity we believe that support is a crucial aspect of any successful product. Therefore, we try our very best to offer the most excellent support, and we always try everything within our power to assist our valued customers. It is worth to mention that our support mainly covers all design issues that one might encounter in addition to frontend-related issues as long as it is not complete customized work.

If you like it please rate it five star. and do let us know if you could not understand anything about this theme, we will try our best to solve your problems.

If you have any questions that are beyond the scope of this help file, please feel free to tell us.

Theme Installation

FTP Upload

• Open up your FTP manager and connect to your Hosting,
• Browse to required directory,
• Upload the files inside template folder.

File Structure

The download package includes two folders template and documentation. All the live demo examples are located inside the template folder. The template folder is a main source folder where all assets files are located.

template folder structure

• assets - all source files such as css, js, images, plugins, ...
• pages - html files
• index.html - intro page

assets folder structure

• css - style.css, plugins.css
• js - gs.core.js and all js init files including components and helpers
• img - logos, patterns, custom icons and others images
• img-temp - all content placeholder image files
• figures - all svg graphic files
• vendor - 3rd party plugins and libraries like Bootstrap, JQuery, ...

CSS Structure

Notice

Every STRONG project needs some file structure and organization. For that, already exist a lot of methodologies and solutions such as BEM, ITCSS, OOCSS, Atomic CSS and others. These methodologies help to maintain the project easily and scalable. For example, BEM is used by Google, BBC and many other large companies. Also, the authors of the mentioned methodologies are very experienced people in this field.

Each methodology has its own file structure, strict rules, recommendations and even coding structure. However, it is very hard to pick up only one of them and fully follow in our project - Gravity.

For that reason, we have picked best optimal practices and features from some popular methodologies and implemented into Gravity. At the result, we came up with our own new file structure and methodology.

Naming Classes Globals and Components

We use namespaces and prefixes for the Blocks and Base Components and Core Globals classes. Both Globals and Components have their own rules.

The following table shows some examples of class names:

*Can be any number and value, for example: u-tabs-v3, u-accordion-v7, ...

**Info block classes like u-info-block-v* can be team, product etc. block variations. Instead of team-block-v1, team-block-v2 classes, we use u-info-block-v2-1, u-info-block-v2-2 etc. This method gives us to use any blocks differently in other pages. For example, the team block can be easily changed to product block with some Global classes.

JS Structure

Core JavaScript

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

GSCore Settings

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

GSCore Helpers

$.GSCore.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 the part of a 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 template/assets/js/helpers/..

GSCore Components

$.GSCore.components - this is the most voluminous component. Here you can include all the elements and components of the template. The aim of this approach is to give developers as much flexibilities as possible by giving all major parameters of shortcode components via data-* attributes initializing.

Extension 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 components are located under the following path template/assets/js/components/..

Global Classes

CSS - Wrong

CSS - Correct

HTML - Wrong

HTML - Correct

Starter Template