420 lines
20 KiB
HTML
420 lines
20 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
|
||
|
|
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
|
||
|
|
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
|
||
|
|
<!--[if (gte IE 9)|!(IE)]><!-->
|
||
|
|
<html lang="en">
|
||
|
|
<!--<![endif]-->
|
||
|
|
|
||
|
|
<head>
|
||
|
|
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||
|
|
<meta name="description" content="">
|
||
|
|
<meta name="author" content="">
|
||
|
|
<meta name="keywords" content="">
|
||
|
|
|
||
|
|
<title>Hub - Bootstrap 4 E-commerce template | Documentation by Ondrej Svestka</title>
|
||
|
|
|
||
|
|
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.3.0/css/font-awesome.min.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="css/stroke.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="css/animate.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="css/prettyPhoto.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="css/style.css">
|
||
|
|
|
||
|
|
<link rel="stylesheet" type="text/css" href="js/syntax-highlighter/styles/shCore.css" media="all">
|
||
|
|
<link rel="stylesheet" type="text/css" href="js/syntax-highlighter/styles/shThemeRDark.css" media="all">
|
||
|
|
|
||
|
|
<!-- CUSTOM -->
|
||
|
|
<link rel="stylesheet" type="text/css" href="css/custom.css">
|
||
|
|
|
||
|
|
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
|
||
|
|
<!--[if lt IE 9]>
|
||
|
|
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
||
|
|
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
||
|
|
<![endif]-->
|
||
|
|
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div id="wrapper">
|
||
|
|
<div class="container">
|
||
|
|
<section class="section docs-heading" id="top">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-12">
|
||
|
|
<div class="big-title text-center">
|
||
|
|
<h1>Hub - Bootstrap 4 E-commerce template</h1>
|
||
|
|
|
||
|
|
<p class="lead">Template version 1.2</p>
|
||
|
|
</div>
|
||
|
|
<!-- end title -->
|
||
|
|
</div>
|
||
|
|
<!-- end 12 -->
|
||
|
|
</div>
|
||
|
|
<!-- end row -->
|
||
|
|
|
||
|
|
<hr />
|
||
|
|
</section>
|
||
|
|
<!-- end section -->
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-3">
|
||
|
|
<nav class="docs-sidebar" data-offset-bottom="200" data-offset-top="300" data-spy="affix" role="navigation">
|
||
|
|
<ul class="nav">
|
||
|
|
<li><a href="#line1">Getting Started</a></li>
|
||
|
|
<li><a href="#line2">CSS</a></li>
|
||
|
|
<li><a href="#line3">SCSS</a></li>
|
||
|
|
<li><a href="#line4">JavaScript</a></li>
|
||
|
|
<li><a href="#line5">Google Maps</a></li>
|
||
|
|
<li><a href="#line6">Credits</a></li>
|
||
|
|
<li><a href="#line10">Version History (Changelog)</a></li>
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-md-9">
|
||
|
|
<section class="welcome">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-12 left-align">
|
||
|
|
<h2 class="dark-text">Introduction</h2>
|
||
|
|
|
||
|
|
<hr />
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-12 full">
|
||
|
|
<div class="intro1">
|
||
|
|
<ul>
|
||
|
|
<li><strong>Item Name : </strong>Hub - Bootstrap 4 E-commerce template</li>
|
||
|
|
<li><strong>Item Version : </strong> v 1.2</li>
|
||
|
|
<li><strong>Author : </strong> <a href="https://ondrejsvestka.cz" target="_blank">Ondrej Svestka</a></li>
|
||
|
|
<li><strong>Contact email : </strong> <a href="mailto:ahoj@ondrejsvestka.cz"
|
||
|
|
target="_blank">ahoj@ondrejsvestka.cz</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<hr />
|
||
|
|
<div>
|
||
|
|
<p>Hello,<br /> thank you for downloading. I hope you wil enjoy working with the
|
||
|
|
template.
|
||
|
|
<br /> You are entitled to get free lifetime updates to this product.</p>
|
||
|
|
|
||
|
|
<p>This documentation is to help you with template's customization. Basic HTML
|
||
|
|
and CSS knowledge is required to customize this template. You may learn basics
|
||
|
|
<a href="http://www.w3schools.com/" target="_blank">here</a>, <a href="https://developer.mozilla.org/"
|
||
|
|
target="_blank">here</a> and <a href="http://learn.shayhowe.com/html-css/building-your-first-web-page/"
|
||
|
|
target="_blank">here</a>.</p>
|
||
|
|
|
||
|
|
<h3>Requirements</h3>
|
||
|
|
|
||
|
|
<p>You will need the following sofwares to customize this template.</p>
|
||
|
|
|
||
|
|
<ol>
|
||
|
|
<li>Code Editing Software (eg: Dreamweaver, Sublime Text, Visual Studio Code)</li>
|
||
|
|
<li>Web Browser for testing (eg: Google Chrome or Mozilla Firefox)</li>
|
||
|
|
<li>FTP Tool to upload files to Server (eg: <a href="https://filezilla-project.org/download.php?type=client"
|
||
|
|
target="_blank">FileZilla</a>)</li>
|
||
|
|
</ol>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- end row -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="section" id="line1">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-12 left-align">
|
||
|
|
<h2 class="dark-text">Getting started <a href="#top">#back to top</a></h2>
|
||
|
|
|
||
|
|
<hr />
|
||
|
|
</div>
|
||
|
|
<!-- end col -->
|
||
|
|
</div>
|
||
|
|
<!-- end row -->
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-12">
|
||
|
|
<p>This template uses Bootstrap 4 CSS framework, a powerful tool to help you building great
|
||
|
|
websites in a short time.</p>
|
||
|
|
|
||
|
|
<h3>Template's directory structure</h3>
|
||
|
|
|
||
|
|
<ul>
|
||
|
|
<li><strong>HTML files</strong> - HTML files are located in the root folder. These are index.html,
|
||
|
|
category.html, etc.</li>
|
||
|
|
<li><code>/css</code> - <strong>CSS files</strong> including Bootstrap CSS, CSS for the components
|
||
|
|
and main template stylesheets</li>
|
||
|
|
<li><code>/icons-reference</code> - <strong>Custom icons list</strong> and sources</li>
|
||
|
|
<li><code>/fonts</code> - Font Awesome icon font</li>
|
||
|
|
<li><code>/img</code> - Images for demo purposes. Mostly replaced by placeholder images in
|
||
|
|
the download archive.</li>
|
||
|
|
<li><code>/js</code> - Javascript files</li>
|
||
|
|
<li><code>/scss</code> - SCSS source files for easier customization</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- end col -->
|
||
|
|
</div>
|
||
|
|
<!-- end row -->
|
||
|
|
</section>
|
||
|
|
<!-- end section -->
|
||
|
|
|
||
|
|
<section class="section" id="line2">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-12 left-align">
|
||
|
|
<h2 class="dark-text">CSS <a href="#top">#back to top</a></h2>
|
||
|
|
|
||
|
|
<hr />
|
||
|
|
</div>
|
||
|
|
<!-- end col -->
|
||
|
|
</div>
|
||
|
|
<!-- end row -->
|
||
|
|
|
||
|
|
<h3>Switching colour variant</h3>
|
||
|
|
|
||
|
|
<p>The theme stylesheet is <code>css/style.default.css</code>. Colour variants are named accordingly,
|
||
|
|
to use a different colour variant, just replace link to the <code>style.default.css</code> with
|
||
|
|
e.g. <code>style.pink.css</code> in the <code><head></code> element in HTML files.</p>
|
||
|
|
|
||
|
|
<h3>Custom CSS code</h3>
|
||
|
|
|
||
|
|
<p>I suggest placing your changes and CSS declarations in <code>custom.css</code> file. This way, you
|
||
|
|
will keep your code separated and you can update the original template stylesheet if an updated
|
||
|
|
is released.</p>
|
||
|
|
</section>
|
||
|
|
<!-- end section -->
|
||
|
|
|
||
|
|
<section class="section" id="line3">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-12 left-align">
|
||
|
|
<h2 class="dark-text">SCSS <a href="#top">#back to top</a></h2>
|
||
|
|
|
||
|
|
<hr />
|
||
|
|
</div>
|
||
|
|
<!-- end col -->
|
||
|
|
</div>
|
||
|
|
<!-- end row -->
|
||
|
|
|
||
|
|
<h3>What is SASS and SCSS</h3>
|
||
|
|
|
||
|
|
<p>This template contains its SCSS source codes too. These can be very handy when you would want to
|
||
|
|
create your own custom colour variant, create a new button style and similar situations.</p>
|
||
|
|
|
||
|
|
<p>If you are completely new to SASS, check out <a href="http://sass-lang.com/install">their official website</a> and download a compiler for your OS. SASS uses a bit different syntax than CSS but you should
|
||
|
|
not have a problem working with it if you understand CSS.</p>
|
||
|
|
|
||
|
|
<h3>File structure</h3>
|
||
|
|
|
||
|
|
<p>The easies way to change theme colours, fonts and any CSS rules in general is by editing the SCSS
|
||
|
|
files.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>In the SCSS directory, there is a main file <code>style.default.scss</code> or its colour variants.
|
||
|
|
In these files, we just define which of the predefined colours will be used and the rest is done
|
||
|
|
by <code>core.scss</code> file. It takes control of all the necessary module includes. The modules
|
||
|
|
(blog, pages, etc.) are located in the modules subdirectory.</p>
|
||
|
|
|
||
|
|
<pre class="brush: text">
|
||
|
|
core.scss (core file handling all the includes)
|
||
|
|
style.default.scss (main file)
|
||
|
|
style.blue.scss (main file)
|
||
|
|
style.green.scss (main file)
|
||
|
|
style.pink.scss (main file)
|
||
|
|
style.red.scss (main file)
|
||
|
|
style.sea.scss (main file)
|
||
|
|
style.violet.scss (main file)
|
||
|
|
theme.scss (main Bootstrap components based on settings in the variable file)
|
||
|
|
|
||
|
|
-- <modules> (includes all partials included in the main stylesheets - style.default.scss, etc.)
|
||
|
|
|
||
|
|
---- _general.scss - generic styling of the template -buttons, header, footer, sections..
|
||
|
|
---- _mixins-custom.scss - my custom mixins
|
||
|
|
---- _mixins.scss - Bootstrap 4 mixins (included from the mixins directory)
|
||
|
|
---- _variables-custom.scss - file based on the Bootstrap 4 variables file.
|
||
|
|
---- about.scss - styles for the about page
|
||
|
|
---- blog.scss - styles for the blog pages
|
||
|
|
---- cart.scss - styles for the shopping cart
|
||
|
|
---- contact.scss - styles for the contact page
|
||
|
|
---- checkout.scss - styles for the checkout pages
|
||
|
|
---- product-categories.scss - styles for the detail page
|
||
|
|
---- product-details.scss - styles for the category pages
|
||
|
|
---- _demo.scss - styles for the demo purposes only
|
||
|
|
|
||
|
|
---- <mixins> (original Bootstrap 4 mixins)
|
||
|
|
---- <utilities> (original Bootstrap 4 ulilities)
|
||
|
|
</pre>
|
||
|
|
</section>
|
||
|
|
<!-- end section -->
|
||
|
|
|
||
|
|
<section class="section" id="line4">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-12 left-align">
|
||
|
|
<h2 class="dark-text">JavaScript <a href="#top">#back to top</a></h2>
|
||
|
|
|
||
|
|
<hr />
|
||
|
|
</div>
|
||
|
|
<!-- end col -->
|
||
|
|
</div>
|
||
|
|
<!-- end row -->
|
||
|
|
|
||
|
|
<h3>Main JavaScript file</h3>
|
||
|
|
|
||
|
|
<p>Main template file is called <code>js/front.js</code> and takes care of the following tasks. Most
|
||
|
|
of them can be reconfigured there too.</p>
|
||
|
|
|
||
|
|
<ul>
|
||
|
|
<li>Affixing navbar</li>
|
||
|
|
<li>Form validation rules</li>
|
||
|
|
<li>Owl carousels initialization and settings</li>
|
||
|
|
<li>Google maps on the contact form</li>
|
||
|
|
</ul>
|
||
|
|
</section>
|
||
|
|
<!-- end section -->
|
||
|
|
|
||
|
|
<section class="section" id="line5">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-12 left-align">
|
||
|
|
<h2 class="dark-text">Google Maps <a href="#top">#back to top</a></h2>
|
||
|
|
|
||
|
|
<hr />
|
||
|
|
</div>
|
||
|
|
<!-- end col -->
|
||
|
|
</div>
|
||
|
|
<!-- end row -->
|
||
|
|
|
||
|
|
<h3>API key</h3>
|
||
|
|
|
||
|
|
<p>Provided Google API key is OK for localhost but will not work on production server. You will need
|
||
|
|
to generate your own API key at <a href="https://developers.google.com/maps/documentation/javascript/get-api-key">https://developers.google.com/maps/documentation/javascript/get-api-key</a>.</p>
|
||
|
|
|
||
|
|
<p>Replacing API key:</p>
|
||
|
|
|
||
|
|
<pre class="brush: html">
|
||
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
|
||
|
|
</pre>
|
||
|
|
</section>
|
||
|
|
<!-- end section -->
|
||
|
|
<section class="section" id="line6">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-12 left-align">
|
||
|
|
<h2 class="dark-text">Credits <a href="#top">#back to top</a></h2>
|
||
|
|
|
||
|
|
<hr />
|
||
|
|
</div>
|
||
|
|
<!-- end col -->
|
||
|
|
</div>
|
||
|
|
<!-- end row -->
|
||
|
|
|
||
|
|
|
||
|
|
<ul>
|
||
|
|
<li><a href="http://getbootstrap.com/" target="_blank">Bootstrap 4.0.0</a></li>
|
||
|
|
<li><a href="http://fontawesome.io/" target="_blank">Font Awesome icon font</a></li>
|
||
|
|
<li><a href="https://fonts.google.com/specimen/Poppins" target="_blank">Google Fonts Poppins</a></li>
|
||
|
|
<li><a href="https://silviomoreto.github.io/bootstrap-select/">Bootstrap select</a></li>
|
||
|
|
<li><a href="http://abpetkov.github.io/powerange/">Powerange Slider</a></li>
|
||
|
|
<li><a href="https://owlcarousel2.github.io/OwlCarousel2/index.html">Owl Carousel 2</a></li>
|
||
|
|
<li><a href="https://github.com/gijsroge/OwlCarousel2-Thumbs">Owl Carousel Thumbs</a></li>
|
||
|
|
<li>Custom icon font: Created with <a href="http://fontastic.me/">Fontastic</a> with free SVGs
|
||
|
|
from <a href="http://www.flaticon.com/">FlatIcon</a></li>
|
||
|
|
<li>Demo logo: <a href="http://www.freepik.com/free-vector/fashion-talk-logo_1209481.htm">Frepik</a></li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<p> </p>
|
||
|
|
</section>
|
||
|
|
<!-- end section -->
|
||
|
|
|
||
|
|
<section class="section" id="line10">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-12 left-align">
|
||
|
|
<h2 class="dark-text">Version History (Changelog) <a href="#top">#back to top</a></h2>
|
||
|
|
|
||
|
|
<hr />
|
||
|
|
</div>
|
||
|
|
<!-- end col -->
|
||
|
|
</div>
|
||
|
|
<!-- end row -->
|
||
|
|
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-12">
|
||
|
|
<p> </p>
|
||
|
|
|
||
|
|
<pre class="brush: html">
|
||
|
|
-----------------------------------------------------------------------------------------
|
||
|
|
Version 1.2 - 01/11/2017
|
||
|
|
-----------------------------------------------------------------------------------------
|
||
|
|
|
||
|
|
- Added 6 new pages: customer-account, customer-addresses, customer-login, customer-order,
|
||
|
|
customer-orders, checkout5
|
||
|
|
- Fixed a bug in breadcrums (changed syntax)
|
||
|
|
- For unlogged user, user icon in navbar leads to Login page now
|
||
|
|
- Added optional shipping address in checkout1
|
||
|
|
|
||
|
|
|
||
|
|
-----------------------------------------------------------------------------------------
|
||
|
|
Version 1.1.2 - 24/10/2017
|
||
|
|
-----------------------------------------------------------------------------------------
|
||
|
|
|
||
|
|
- Fixed a bug in product modals (.modal-body should be a child of .modal-content,
|
||
|
|
added .btn to one of the buttons)
|
||
|
|
|
||
|
|
|
||
|
|
-----------------------------------------------------------------------------------------
|
||
|
|
Version 1.1.1 - 24/10/2017
|
||
|
|
-----------------------------------------------------------------------------------------
|
||
|
|
|
||
|
|
- Updated to Bootstrap 4.0.0-Beta.2
|
||
|
|
- Removed Bootstrap utilities from SCSS and CSS (= stylesheets lot smaller now)
|
||
|
|
|
||
|
|
-----------------------------------------------------------------------------------------
|
||
|
|
Version 1.1 - 6/10/2017
|
||
|
|
-----------------------------------------------------------------------------------------
|
||
|
|
|
||
|
|
- Moved 3rd-party plugins to vendor directory
|
||
|
|
- Added SCSS files
|
||
|
|
- Updated plugins to last stable versions
|
||
|
|
|
||
|
|
-----------------------------------------------------------------------------------------
|
||
|
|
Version 1.0 - 12/9/2017
|
||
|
|
-----------------------------------------------------------------------------------------
|
||
|
|
|
||
|
|
- Initial release
|
||
|
|
|
||
|
|
|
||
|
|
</pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- end row -->
|
||
|
|
</section>
|
||
|
|
<!-- end section -->
|
||
|
|
</div>
|
||
|
|
<!-- // end .col -->
|
||
|
|
</div>
|
||
|
|
<!-- // end .row -->
|
||
|
|
</div>
|
||
|
|
<!-- // end container -->
|
||
|
|
</div>
|
||
|
|
<!-- end wrapper -->
|
||
|
|
|
||
|
|
|
||
|
|
<script src="js/jquery.min.js"></script>
|
||
|
|
<script src="js/bootstrap.min.js"></script>
|
||
|
|
<script src="js/retina.js"></script>
|
||
|
|
<script src="js/jquery.fitvids.js"></script>
|
||
|
|
<script src="js/wow.js"></script>
|
||
|
|
<script src="js/jquery.prettyPhoto.js"></script>
|
||
|
|
|
||
|
|
<!-- CUSTOM PLUGINS -->
|
||
|
|
<script src="js/custom.js"></script>
|
||
|
|
<script src="js/main.js"></script>
|
||
|
|
|
||
|
|
<script src="js/syntax-highlighter/scripts/shCore.js"></script>
|
||
|
|
<script src="js/syntax-highlighter/scripts/shBrushXml.js"></script>
|
||
|
|
<script src="js/syntax-highlighter/scripts/shBrushPlain.js"></script>
|
||
|
|
<script src="js/syntax-highlighter/scripts/shBrushCss.js"></script>
|
||
|
|
<script src="js/syntax-highlighter/scripts/shBrushJScript.js"></script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|