Eshop-Laravel/public/lib/hub/docs/index.html

420 lines
20 KiB
HTML
Raw Normal View History

2019-10-18 09:25:37 +00:00
<!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&#39;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&#39;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>&lt;head&gt;</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)
-- &lt;modules&gt; (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
---- &lt;mixins&gt; (original Bootstrap 4 mixins)
---- &lt;utilities&gt; (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">
&lt;script src=&quot;https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&quot;&gt;&lt;/script&gt;
</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>&nbsp;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>&nbsp;</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>&nbsp;</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>