Quadrone HTML Template

Premium HTML 5 website

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email. Thank you very much!

Quadrone HTML Template is Html5 + CSS3 Website template and works fine in all major browsers. It's powered by jQuery and you'll find nice and discreet interactivity. The code is clearly written and you will find comments for each considerable parts.

Lets take a closer look at the structure of Html, Css, JavaScript.

Folder Structure

Here they are, sorted alphabetically:

  1. documentation - Documentation for Quadrone HTML Template site template
  2. html - Main folder for template
  3. src - A source that to build the project with GULP

HTML folder structure:

  • /build
    • /css (Template CSS)
    • /external (External plugins)
    • /images (All Images)
    • /scss (Template scss)
    • /js (All js)

SRC - Html folder Structure: (folder your workflow "Gulp" https://gulpjs.com/)

  • /build
    • /external (External plugins)
    • /favicon (Template favicon)
    • /images (All Images)
    • /js (All js)
    • /scss (Template scss)
    • /includes (All js)
      • includes/header/header-01.html (Header - Layout 01)
      • includes/header/header-02.html (Header - Layout 02)
      • includes/header/header-03.html (Header - Layout 03)
      • includes/header/objects (All Objects Header)
      • includes/footer/footer-01.html (Footer - Layout 01)
      • includes/footer/footer-02.html (Footer - Layout 02)
      • includes/footer/footer-03.html (Footer - Layout 03)
      • includes/svg-sprite (Svg icon - which are embedded in html)
      • includes/btn-scroll-down.html ((html object "btn-scroll-down" - which are embedded in htm)
      • includes/btn-scroll-top.html ((html object "btn-scroll-top" - which are embedded in htm)

BUILD - HTML FOLDER STRUCTURE:

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.

		<!DOCTYPE html>
				<html lang="en">
						...
				</html>

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).

		<div class="row">
				<div class="col-lg-4">...</div>
				<div class="col-lg-8">...</div>
		</div>

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.

		<div class="row">
						<div class="col-lg-4">...</div>
						<div class="col-lg-4 col-lg-offset-2">...</div>
				</div>

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

Css Files

Css file located at css folder.

  • style.css - Theme main CSS file.

Scss Files

All Scss files located at scss folder.

  • style.scss - Theme main less file.

JavaScript

All JS files located at js folder.

  • js/bundle.js - Theme main JS file.
  • external/ - external plugins JS files

and other.

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

Icons

Demo icons you can see: src/includes/svg-sprite/demo.html

SVG Sprite that connects to the pages to see: src/includes/svg-sprite/sprite.html (*Created with: https://elrumordelaluz.github.io/micro-svg-spreact/)

Icon items: src/includes/svg-sprite/item/**.svg

Fonts

To change the custom font, please take a look in the Forum.css: 
	/* Google font */
	(src/scss/_variables_style.scss)
	includes/head.html - include Google fonts
To change fonts, go to http://www.google.com/webfonts, choose new fonts and use the generated code.

Gulp

To build the project was used - GULP. Gulp is a toolkit that helps you automate painful or time-consuming tasks in your development workflow.

The main commands are in the file - gulpfile.js

Link on documentation: https://gulpjs.com/

To project deployment the project you need in cmd enter command: "npm i"

To start the server: "gulp watch"

To build the project: "gulp build"

There is a separate command for generating SVG sprite - gulp svg
*All icons are located here: src/includes/svg-sprite/item, generating SVG sprite. By name can be called in html:

Sources and Credits

We have used the following files as listed.

Hope that you will enjoy in Quadrone HTML Template as much as I've enjoyed designing this template.