Overview

This guide will help you get started with Hostingard. All the information regarding file structure, build tools, components, credits, license and FAQ can be found here.

If you have any questions that are beyond the scope of this help documentation, please feel free to contact us with the links below and please don't forget to provide your website URL.

File Structure

After unzip downloaded file, there will be a directory called Hostingard where all the necessery files will be available. Ther directory map stated below:

Local Setup

There are two ways to change your style (CSS) for your template.

First of all, you can change your style from dist/asseta/css/style.css then upload the changed file to your live server.

The second way, If you want to change your style through SCSS. In that case, you need to follow the below steps to prepare your local environment and run it on your local. You can also minify the CSS. After your changes, you need to upload your changes assets (CSS) to your live server.

Installation SASS

Install SASS to your local through Node.js

Prerequisite: Node.js:

It is used to run the build processes. Download from the NodeJs from the official site and install it on your device according to your Operating System ( nodejs.org )

Check Node.js Version:

• Open the Terminal/ Command Line
• Run: node -v or node --version
• If you get the version then the installation of NodeJs is done

Check npm Version:

• Open the Terminal/ Command Line
• Run: npm -v or npm --version
• If you get the version then the installation of NodeJs is done

SASS Install:

• Open the Terminal/ Command Line
• Run: npm install -g sass
• Run: sass --version
• For Windows user, you need to set sass to the environment path: Go to environment variables - > system variables -> path -> Edit , and include file: C: \ Users \ your-user \ AppData \ Roaming \ npm \ sass. Then, Accept everything. and it's done.
• For more information, check: https://sass-lang.com/install

How to Run SASS

• After installing SASS, need to go to your project directory from your terminal/ command line. Path: Agentieco. Check that you have src and dist folders. To check that run on terminal: ls .
• Compile build file: Run on terminal:
  • $ npm run build
• Compile and Watch: Run on terminal:
  • $ npm run start
• Test: to check the changes, open a file (dist/index.html) and reload the page after your change in SCSS file. You will find the SCSS file in src/assets/scss/ folder. SCSS official documentation: https://sass-lang.com/guide

Grid

Based on Bootstrap, a sleek, intuitive, and powerful front-end framework.

Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.

The default Bootstrap grid system utilizes 12 columns.

For a simple two column layout, create a .row and add the appropriate number of .col-lg-* columns. As this is a 12-column grid, each .col-lg-* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).

Given this example, we have .col-lg-4 and .col-lg-8, making for 12 total columns and a complete row.

Move columns to the right using .col-lg-offset-* classes. Each class increases the left margin of a column by a whole column. For example, .col-lg-offset-4 moves .col-lg-4 over four columns.

If you need more information, please visit this site: http://getbootstrap.com/css/#grid

CSS File

Css file located at css folder.

• main.css - Theme main CSS file.

Javascript

All JS files located at js folder.

• js/app.js - Theme main JS file.
• js/vendors/**.js - External plugins JS files.

If you need more information, please visit plugins official sites.

Icons

1. Lineawesome - Lineawesome

Fonts

Sources and Credits

We have used the following files as listed.

• jQuery - JavaScript Library
• Bootstrap - Bootstrap by Twitter
• Magnific popup - Is a responsive lightbox
• Swiper - The Most Modern Mobile Touch Slider