Quadrone HTML Template
Premium HTML 5 website
- Created: 2019.
- By: author Artureanec
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:
- documentation - Documentation for Quadrone HTML Template site template
- html - Main folder for template
- 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 fontsTo 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.
- jQuery - JavaScript Library
- Bootstrap - Bootstrap by Twitter
- Magnific popup - Is a responsive lightbox
- Perfect scrollbar - Minimalistic but perfect custom scrollbar plugin
- Instafeed - Instagram plugin
- Isotope - Filter & sort magical layouts
- jquery-nice-select - A lightweight jQuery plugin that replaces native select elements with customizable dropdowns.
- imagesloaded - Detect when images have been loaded.
Hope that you will enjoy in Quadrone HTML Template as much as I've enjoyed designing this template.