Theme Name: Tejarat - Multipurpose Business & Corporate HTML Template
Author: AazzTech
Author URI: http://aazztech.com
Created: 31-Jan-2019
Version: 1.0.2
License: © AazzTech

Welcome

BIG THANKS for purchasing this template, your support is truly appreciated! This document covers the installation and use of this template and often reveals answers to common problems and issues - read this document thoroughly if you are experiencing any difficulties. If you have any questions that are beyond the scope of this document, Please feel free to contact with our dedicated Support team via contact@aazztech.com

Template Features

Tejarat is multipurpose business, agency HTML template built with Bootstrap 4. Clean professional design and a huge number of shortcode elements are the main features of Tejarat. We've developed it using latest trend-tools and best practices to leverage the development time and complexity also to ease customization process. We've used configurable SCSS for more control over templates style and layout. We structured it such a way that user can easily compose a new page using our component and customize it without too much hassle.

1. Beautiful Design
2. Clean Code
3. HTML5 & CSS3
4. Extensive Documentation
5. Sass files included
6. RTL Script Supported
7. Task automation with gulp
8. Bootstrap 4 compatible.
9. Configurable SCSS
10. W3C validated code
11. Easy to customize
12. Beautiful Line awesome icons
13. Free google fonts.
14. Huge number of shortcode elements.
15. Awesome revolution sliders
16. Fully Responsive Design
17. All files are well commented
18. Crossbrowser Compatible with IE10+, Firefox, Safari, Opera, Chrome
19. And lot more...

Installing Template

After unzip the download pack, you'll find a Template Folder ( Tejarat ) with all the files. You can view this Template in any browser, you can display or edit the Template without an internet connection.

Now open your FTP Client (like Filezilla) and upload the content of the Template on your server root. Once the files are done uploading go to www.yourdomainname.com/index.html

Folder Structure

    ├── src
    │   ├── img/
    │   ├── maps ( contains the sourcemap files of scss )
    │   ├── vendor_assets (third party plugins ans assets)
    │   │   ├── css
    │   │   │    ├── bootstrap
    │   │   │    ├── config.bs.scss (This file controls the style configuration of the entire theme)
    │   │   ├── js
    │   │   ├── Fonts
    │   │
    │   ├── theme_assets (Themes own assets)
    │   │   ├── sass (This directry contains all the styles of this theme)
    │   │   ├── js (Custom script and initialization)
    │
    ├── .gitignore
    ├── gulpfile.js
    ├── package.json
    ├── package-lock.json
    

HTML Structure

This Template has a Responsive layout and is based on the Bootstrap Framework. For more information about this visit Bootstrap Scaffolding.

All the files and folders are organized appropriately. These files are essential for proper working of the template. You can make changes in the files as shown below in this document but please don't alter the file structure, that is, don't remove or move any files from css, js and images folder unless instructed in this document.

please change mata tag content name description, author, summary, Classification to improve your SEO :)

Installing Node

Gulp requires node to run. And it usages npm packages to perform different task, So install node and npm first.Please fllow the guide

1.Installing node

>Go to https://nodejs.org/en/ and download the appropriate version for you OS.

2.Installing Gulp

> go to command and run npm install -g gulp it will install gulp globally

3.Getting started

> Now navigate to the Tejarat folder and run npm install, it will install all the dependecies

Configuring style & Bootstrap compatibility

Instead of overriding Bootstraps components. We have made it compatible with theme using Bootstraps native scss varibles. and it's recommended by Bootstrap. This way we are able to manage leveraging decent ammount of css , as there is no overriding. And we made it centrally configurable with config.bs.scss file in vendor_assets/css/bootstrap/ directory

1.config.bs.scss

This file contains and controls all the Bootstraps default components.It also contains the color scheme, font, spacing and other common staff.If you want customize anything of Bootstrap, you can literally do it here by overriding bootstrap varibles.

2.Where and to find and how to customize Bootstraps SCSS variables

Go to vendor_assets/css/bootstrap/scss/_variables.scss and search for the variable or component name. Evey components configurable property will be avaible in this file. You can just copy the variable form there and paste it in config.bs.scss removing the default flag and assigning a new value. For Example, here I've redefined color scheme for this theme:

Gulp tasks

Gulp is amazing tools for task automation. It automates time-consuming tiresome task for you. It helps keep the concentration on actual work by taking care of many redundant and boring task such as sass compilation, css compression, js/css injection etc. Different version generation. IE (build, dist etc)

> gulp build

this command will take the html, css, js, fonts from the src/ directory to build/ with optimizing the images, cmpiling the sass, minimizing the css and js file. ready to upload

> gulp build:optimize

this command will take the html, css, js, fonts from the src/ directory to dist/ with optimizing the images, cmpiling the scss, minimizing the css and js file. Difference between build and build:optimize is on build:optimize command the css and js files compress into 4 files only. 2 js ile and 2 css file and injected into html files. for better performance

> gulp serve

gulp serve command is handy during development, cause it takes the index.html file from src/ directory and opens in the browser at localhost:3000/

> gulp rtl

gulp rtl command generate an rtl version of sytle.css and bootstarp.css files. Use this command after adding or editing codes to regenerate those file again if necessary.

> gulp

Gulp command is equivlent to gulp default it runs the default task that has been assigned to it. In this particular project Gulp serves the project in the browser, watches for sass,css,js,html changes and synchronizes and excutes task associated with it.

Important note: For better image optimization, We used Tinypng api based gulp-tinypng-compress package. It requires a API key to perform the task. Please replace the api key with your own API key like shown in the image below

to get the api key please vist this link https://tinypng.com/developers. Sign up with you email and get the api key from here https://tinypng.com/dashboard/developers

Update Navigation & Logo

How to change logo

you can see a class logo inside it put your own image path. you can use text also.

Navigation structure

Change the navigation according to your content, also you can add or remove according to your needs. Smoothscroll will work automatically. make sure you keep the class scrolling and specific section id

Update Video

Video structure
please provide youtube or vemio video url here.

Update Your map location

To update your map location please add your map location Longitude and Longitude. to do that go to theme_assets/js/map.js and change the lat lang of with your desired location lat-lang.

and update

RTL Setup

It's easy to add RTL support to your website. Read this section Theming & BS4 compatibility to know how to generate RTL css. We have already generated rtl version of syle.css and bootstrap.css files. Just link those files in place of these (syle.css and bootstrap.css) files. Do not use both version of code at the same time.

Credit

Fonts

1. Poppins

Icons

1. fontawesome
2. Line Awesome

Framework

1. Bootstrap

Tools

1. Gulp
2. NPM