878 lines
32 KiB
HTML
878 lines
32 KiB
HTML
<!DOCTYPE html>
|
||
<html dir="ltr" lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||
<title>Meblya</title>
|
||
<link rel="icon" type="image/png" href="images/favicon.png">
|
||
|
||
<!-- fonts -->
|
||
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i" rel="stylesheet">
|
||
|
||
<!-- css -->
|
||
<link rel="stylesheet" type="text/css" href="css/style.css">
|
||
<link rel="stylesheet" type="text/css" href="vendor/highlight.js-9.13.1/styles/github-gist.css">
|
||
|
||
<!-- js -->
|
||
<script src="vendor/highlight.js-9.13.1/highlight.pack.js"></script>
|
||
<script>hljs.initHighlightingOnLoad();</script>
|
||
</head>
|
||
<body>
|
||
<div class="docs-markup">
|
||
<nav class="docs-nav">
|
||
|
||
<div class="docs-nav__logo">
|
||
<a href="" target="_blank">
|
||
<svg class="docs-logo" xmlns="http://www.w3.org/2000/svg" width="82px" height="24px">
|
||
<path d="M79.011,17.987 L79.011,15.978 C79.011,15.978 77.402,17.366 76.739,17.672 C76.074,17.979 75.110,17.987 74.043,17.987 C72.730,17.987 71.698,17.757 70.944,17.004 C70.191,16.252 70.001,15.282 70.001,13.892 C70.001,12.437 70.421,10.962 71.435,10.272 C72.450,9.581 73.878,9.020 75.924,8.947 L78.295,8.953 C78.295,7.563 77.586,6.768 76.168,6.768 C75.077,6.768 73.794,7.099 72.319,7.761 L71.085,5.235 C72.657,4.409 74.400,3.997 76.315,3.997 C78.149,3.997 79.555,4.397 80.532,5.198 C81.510,6 81.999,7.217 81.999,8.852 L81.999,17.987 L79.011,17.987 ZM78.295,11.636 L76.852,11.685 C75.769,11.718 74.963,11.914 74.434,12.273 C73.904,12.633 73.639,13.181 73.639,13.917 C73.639,14.971 74.242,15.297 75.448,15.297 C76.311,15.297 77.101,14.948 77.619,14.449 C78.135,13.951 78.295,13.590 78.295,12.764 L78.295,11.636 ZM57.289,24 C56.646,24 55,23.994 55,23.994 L55,20.995 C55,20.995 56.332,20.998 56.861,20.998 C59.189,20.998 59.962,17.898 59.962,17.898 L54,4 L58,4 L61.720,14.396 L65,4 L69,4 L62.989,19.741 C61.931,22.589 59.909,24 57.289,24 ZM49,0 L52,0 L52,18 L49,18 L49,0 ZM41.500,18 C40.163,18 38.953,17.368 38,16.358 L38,18 L35,18 L35,0 L38,0 L38,5.642 C38.953,4.632 40.163,4 41.500,4 C44.538,4 47,7.134 47,11 C47,14.866 44.538,18 41.500,18 ZM41,7 C39.343,7 38,8.791 38,11 C38,13.209 39.343,15 41,15 C42.657,15 44,13.209 44,11 C44,8.791 42.657,7 41,7 ZM25.157,14.338 C25.743,14.932 26.565,15.229 27.623,15.229 C28.444,15.229 29.222,15.144 29.954,14.973 C30.687,14.802 31.451,14.529 32,14.155 L32,17.036 C31.598,17.361 30.902,17.603 30.162,17.762 C29.421,17.921 28.518,18 27.452,18 C24,18 21,16 21,11 C21,8 22,4 27,4 C32,4 33,8 33,11 L33,12 L24.217,12 C24.257,13.162 24.571,13.744 25.157,14.338 ZM29.527,9 C29.510,8.081 29,7 27,7 C25,7 24.367,8.081 24.302,9 L29.527,9 ZM16,4.500 L10.977,18 L8,18 L3,4.500 L3,18 L0,18 L0,0 L5,0 L9.500,13.400 L14,0 L19,0 L19,18 L16,18 L16,4.500 Z"></path>
|
||
<path class="docs-logo__accent" d="M0,22 L52,22 L52,24 L0,24 L0,22"></path>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
|
||
<ul class="docs-nav__links">
|
||
|
||
<li>
|
||
<a class="docs-nav__link" href="#section-home">
|
||
Introduction
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a class="docs-nav__link" href="#section-features">
|
||
Features
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a class="docs-nav__link" href="#section-getting-started">
|
||
Getting Started
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a class="docs-nav__link" href="#section-html-structure">
|
||
HTML Structure
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a class="docs-nav__link" href="#section-css-files">
|
||
CSS Files
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a class="docs-nav__link" href="#section-javascript">
|
||
Javascript
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a class="docs-nav__link" href="#section-fonts">
|
||
Fonts
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a class="docs-nav__link" href="#section-sources">
|
||
Sources
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a class="docs-nav__link" href="#section-customization">
|
||
Customization
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a class="docs-nav__link" href="#section-changelog">
|
||
Changelog
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a class="docs-nav__link" href="#section-known-issues">
|
||
Known Issues
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a class="docs-nav__link" href="#section-credits">
|
||
Credits
|
||
</a>
|
||
</li>
|
||
|
||
</ul>
|
||
</nav>
|
||
<div class="docs-content">
|
||
|
||
<section class="docs-section" id="section-home">
|
||
<h1 class="docs-section__title">Meblya</h1>
|
||
|
||
<div class="docs-typography">
|
||
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please
|
||
feel free to email via my user page contact form <a href="https://themeforest.net/user/kos9">here</a>. Thanks so
|
||
much!
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<section class="docs-section" id="section-features">
|
||
<h1 class="docs-section__title">Features</h1>
|
||
|
||
<div class="docs-typography">
|
||
<ul>
|
||
<li>100% Responsive Layout</li>
|
||
<li><strong>LTR/RTL version</strong></li>
|
||
<li>HTML5 and CSS3</li>
|
||
<li>Bootstrap 4</li>
|
||
<li>SASS</li>
|
||
<li>CSS3 Animation</li>
|
||
<li>SVG Icons</li>
|
||
<li>Font Awesome Icons</li>
|
||
<li>BEM syntax</li>
|
||
<li>Open Sans Google Font</li>
|
||
<li>Compatible with all major browsers</li>
|
||
<li>Grid / list products view</li>
|
||
<li><strong>Photoswipe</strong> gallery</li>
|
||
</ul>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<section class="docs-section" id="section-getting-started">
|
||
<h1 class="docs-section__title">Getting Started</h1>
|
||
|
||
<div class="docs-typography">
|
||
<p>
|
||
There are two ways to start using the <strong>Meblya</strong> template:
|
||
</p>
|
||
|
||
<ul>
|
||
<li>The first way is to use pre-compiled HTML files. The description of this method is below;</li>
|
||
<li>The second way is to build a template from sources, it is suitable for experienced developers (See the section <a href="#section-sources">Sources</a>).</li>
|
||
</ul>
|
||
|
||
<h2>Pre-compiled HTML</h2>
|
||
|
||
<p>
|
||
After downloading and unpacking the <strong>Meblya</strong> template, pre-compiled HTML files will be located in the <code>HTML</code> directory.
|
||
</p>
|
||
|
||
<p>
|
||
So, the <code>HTML</code> directory will look like after unpacking:
|
||
</p><pre><code class="language-text">HTML/
|
||
classic/
|
||
dark/</code></pre>
|
||
|
||
<p>This directory contains different versions of the template:</p>
|
||
|
||
<ul>
|
||
<li><strong>classic</strong> - standard version;</li>
|
||
<li><strong>dark</strong> - version with dark header and footer.</li>
|
||
</ul>
|
||
|
||
<p>Choose the one you want to use (for example classic):</p><pre><code class="language-text">HTML/
|
||
classic/
|
||
css/
|
||
images/
|
||
js/
|
||
vendor/
|
||
404.html
|
||
about-us.html
|
||
account.html
|
||
blog.html
|
||
...</code></pre>
|
||
|
||
<p>
|
||
Description of <a href="#section-html-structure">HTML Structure</a>, <a href="#section-css-files">CSS Files</a> and
|
||
<a href="#section-javascript">Javascript</a>
|
||
files are in the relevant sections.
|
||
</p>
|
||
|
||
<p>
|
||
If you want to add images or make changes to CSS or Javascript files, you need to open the corresponding files.
|
||
</p>
|
||
|
||
<div class="docs-alert docs-alert--warning">
|
||
Please note that any errors or broken layouts that result from you editing the CSS or JavaScript files are not covered by support.
|
||
Edit these files at your own risk.
|
||
</div>
|
||
|
||
<p>
|
||
To continue customizing the template, go to the "Customization" section.
|
||
</p>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<section class="docs-section" id="section-html-structure">
|
||
<h1 class="docs-section__title">HTML Structure</h1>
|
||
|
||
<div class="docs-typography">
|
||
<p>
|
||
This template based on a responsive layout. All of the information within the main content area is nested within a body tag.
|
||
The general template structure is the same throughout the template. Here is the general structure.
|
||
</p><pre><code class="language-html"><body>
|
||
<!-- mobilemenu -->
|
||
<div class="mobilemenu">
|
||
...
|
||
</div>
|
||
<!-- mobilemenu / end -->
|
||
|
||
<!-- site -->
|
||
<div class="site">
|
||
<!-- site__header -->
|
||
<header class="site__header">
|
||
...
|
||
</header>
|
||
<!-- site__header / end -->
|
||
|
||
<!-- site__body -->
|
||
<div class="site__body">
|
||
...
|
||
</div>
|
||
<!-- site__body / end -->
|
||
|
||
<!-- site__footer -->
|
||
<footer class="site__footer">
|
||
...
|
||
</footer>
|
||
<!-- site__footer / end -->
|
||
</div>
|
||
<!-- site / end -->
|
||
|
||
<!-- photoswipe -->
|
||
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
|
||
...
|
||
</div>
|
||
<!-- photoswipe / end -->
|
||
</body></code></pre>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<section class="docs-section" id="section-css-files">
|
||
<h1 class="docs-section__title">CSS Files</h1>
|
||
|
||
<div class="docs-typography">
|
||
<p>
|
||
This template uses six css files:
|
||
</p>
|
||
|
||
<ul>
|
||
<li>
|
||
<strong>css/style.css</strong><br>
|
||
Contains main stylesheets.
|
||
|
||
<strong>css/style.ltr.css</strong> - same as <code>css/style.css</code> but only contains styles for LTR direction.<br>
|
||
<strong>css/style.rtl.css</strong> - same as <code>css/style.css</code> but only contains styles for RTL direction.
|
||
</li>
|
||
<li>
|
||
<strong>vendor/bootstrap/css/bootstrap.min.css</strong><br>
|
||
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS.
|
||
</li>
|
||
<li>
|
||
<strong>vendor/owl-carousel/assets/owl.carousel.min.css</strong><br>
|
||
Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.
|
||
Used for home page slider, products carousel, posts carousel, etc.
|
||
</li>
|
||
<li>
|
||
<strong>vendor/photoswipe/photoswipe.css</strong><br>
|
||
<strong>vendor/photoswipe/default-skin/default-skin.css</strong><br>
|
||
JavaScript image gallery for mobile and desktop, modular, framework independent.
|
||
Used on the product page in the product gallery.
|
||
</li>
|
||
<li>
|
||
<strong>vendor/fontawesome/css/all.min.css</strong><br>
|
||
This CSS file is required for Icon Font.
|
||
</li>
|
||
</ul>
|
||
|
||
<h2>style.css</h2>
|
||
|
||
<p>
|
||
At the very beginning of the <code>css/style.css</code> file you will find a table of
|
||
contents that you can use to quickly navigate through the file.
|
||
</p>
|
||
|
||
<p>
|
||
Here is an example of the structure of the <code>style.css</code>:
|
||
</p><pre><code class="language-text">/* ----------------------------------------
|
||
|
||
Table of content:
|
||
|
||
- Components:
|
||
- alert
|
||
- breadcrumb
|
||
- button-remove
|
||
...
|
||
- Common:
|
||
...
|
||
- Blog:
|
||
...
|
||
- Shop:
|
||
...
|
||
- Blocks:
|
||
...
|
||
- Widgets:
|
||
...
|
||
- Filters:
|
||
...
|
||
- Header:
|
||
...
|
||
- Footer:
|
||
...
|
||
|
||
---------------------------------------- */
|
||
|
||
/* ----------------------------------------
|
||
// Components
|
||
// ---------------------------------------- */
|
||
/*
|
||
* alert
|
||
*/
|
||
|
||
...
|
||
|
||
/*
|
||
* breadcrumb
|
||
*/
|
||
|
||
...
|
||
|
||
/*
|
||
* button-remove
|
||
*/
|
||
|
||
...
|
||
|
||
/* ----------------------------------------
|
||
// Common
|
||
// ---------------------------------------- */
|
||
|
||
...</code></pre>
|
||
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<section class="docs-section" id="section-javascript">
|
||
<h1 class="docs-section__title">Javascript</h1>
|
||
|
||
<div class="docs-typography">
|
||
<p>
|
||
This template uses seven javascript files:
|
||
</p>
|
||
|
||
<ul>
|
||
<li>
|
||
<strong>js/main.js</strong><br>
|
||
This file contains all javascript code related to theme.
|
||
</li>
|
||
<li>
|
||
<strong>vendor/jquery/jquery.js</strong><br>
|
||
jQuery is a Javascript library that greatly reduces the amount of code that you must write.
|
||
</li>
|
||
<li>
|
||
<strong>vendor/nouislider/nouislider.js</strong><br>
|
||
Lightweight JavaScript range slider with full touch support.
|
||
</li>
|
||
<li>
|
||
<strong>vendor/owl-carousel/owl.carousel.js</strong><br>
|
||
Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.
|
||
</li>
|
||
<li>
|
||
<strong>vendor/svg4everybody/svg4everybody.min.js</strong><br>
|
||
SVG for Everybody adds SVG External Content support to all browsers.
|
||
</li>
|
||
<li>
|
||
<strong>vendor/photoswipe/photoswipe.min.js</strong><br>
|
||
<strong>vendor/photoswipe/photoswipe-ui-default.min.js</strong><br>
|
||
JavaScript image gallery for mobile and desktop, modular, framework independent.
|
||
Used on the product page in the product gallery.
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<section class="docs-section" id="section-fonts">
|
||
<h1 class="docs-section__title">Fonts</h1>
|
||
|
||
<div class="docs-typography">
|
||
<p>We used two fonts in this template:</p>
|
||
|
||
<ul>
|
||
<li>
|
||
<strong>Open Sans</strong> (Google Web Font: <a href="https://fonts.google.com/specimen/Open+Sans">https://fonts.google.com/specimen/Open+Sans</a>)
|
||
The main font used in the template.
|
||
</li>
|
||
<li>
|
||
<strong>FontAwesome</strong> (<a href="https://fontawesome.com/">https://fontawesome.com/</a>)
|
||
Icon Font to display some icons in the template.
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<section class="docs-section" id="section-sources">
|
||
<h1 class="docs-section__title">Sources</h1>
|
||
|
||
<div class="docs-typography">
|
||
<div class="docs-alert docs-alert--warning">
|
||
Attention! This section is for advanced users.
|
||
</div>
|
||
|
||
<p>
|
||
Template source codes are in the <code>Sources</code> directory.
|
||
After downloading and unpacking the template, the <code>Sources</code> directory will look like this:
|
||
</p><pre><code class="language-text">Sources/
|
||
gulp/
|
||
tasks.js
|
||
src/
|
||
...
|
||
gulpfile.js
|
||
package.json
|
||
package-lock.json</code></pre>
|
||
|
||
<h2>Preparation</h2>
|
||
|
||
<ol>
|
||
<li>Make sure your system has installed <a href="https://nodejs.org">Node.js</a>.</li>
|
||
<li>Open a terminal window and go to the <code>Source</code> directory.</li>
|
||
<li>Run the <code>npm install</code> command. This command will load all necessary dependencies specified in the <code>package.json</code> file.</li>
|
||
</ol>
|
||
|
||
<p>To build the project run the command:</p><pre><code class="language-text">./node_modules/.bin/gulp build</code></pre>
|
||
|
||
<p>Or (if gulp is installed globally):</p><pre><code class="language-text">gulp build</code></pre>
|
||
|
||
<p>After executing the command, the compiled template will be located in the <code>dist</code> directory.</p>
|
||
|
||
<p>For a complete list of available commands, see the <strong>Gulp Tasks</strong> section below.</p>
|
||
|
||
<h2>Gulp Tasks</h2>
|
||
|
||
<p>
|
||
Gulp tasks are in the <code>gulp/tasks.js</code> and <code>gulpfile.js</code> files.
|
||
Unfortunately, such a bit of unusual structure is necessary for us to automatically build the package for themeforest.
|
||
</p>
|
||
|
||
<p>Gulp tasks description:</p>
|
||
|
||
<ul>
|
||
<li><strong>twig</strong> - Compiles twig templates into html pages.</li>
|
||
<li><strong>scss</strong> - Compiles scss to <code>css/style.css</code> file.</li>
|
||
<li><strong>vendor</strong> - Copies the contents of the <code>src/vendor</code> directory to the <code>dist/vendor</code> directory.</li>
|
||
<li><strong>images</strong> - Copies the contents of the <code>src/images</code> directory to the <code>dist/images</code> directory.</li>
|
||
<li><strong>svg</strong> - Creates SVG sprite (<code>sprite.svg</code>) from svg files and save it to the <code>dist/images</code> directory.</li>
|
||
<li><strong>js</strong> - Copies the contents of the <code>src/js</code> directory to the <code>dist/js</code> directory.</li>
|
||
<li><strong>serve</strong> - Runs a local http server and the template build process with change tracking.</li>
|
||
<li><strong>watch</strong> - Runs the template build process with change tracking.</li>
|
||
<li><strong>build</strong> - Builds a template.</li>
|
||
</ul>
|
||
|
||
<h2>Twig templates</h2>
|
||
|
||
<p>
|
||
We used <a href="https://github.com/twigjs/twig.js/wiki">twig.js</a> as a template engine (this is a port of the popular PHP library for javascript).
|
||
Documentation on its syntax can be found on the <a href="https://twig.symfony.com/doc/2.x/">official site</a>.
|
||
</p>
|
||
|
||
<h3>Data for templates</h3>
|
||
|
||
<p>
|
||
Each file from the <code>Sources/src/data</code> directory is projected into the global namespace.
|
||
The variable name is the file name without the extension.
|
||
For example, we have the file <code>Sources/src/data/theme.json</code> with the following contents:
|
||
</p><pre><code class="language-json">{
|
||
"name": "Meblya"
|
||
}</code></pre>
|
||
|
||
<p>Now, to display the name of the theme in the template, we can use the following construction <code>{{ theme.name }}</code>.</p>
|
||
|
||
<p>
|
||
Pay attention to the fact that all files must be in json format, and their names must match the
|
||
regular expression <code>/^[_A-Za-z0-9]+\.json$/</code>.
|
||
</p>
|
||
|
||
<h3>Template directories</h3>
|
||
|
||
<p>The directory with the templates (<code>Sources/src/twig</code>) is divided into the following subdirectories:</p>
|
||
|
||
<ul>
|
||
<li><strong>blocks</strong> - Independent parts that can be used on different pages.</li>
|
||
<li><strong>footer</strong> - Template files associated with the site footer.</li>
|
||
<li><strong>header</strong> - Template files associated with the site header.</li>
|
||
<li><strong>layouts</strong> - In this directory is the base layout used by all pages.</li>
|
||
<li><strong>pages</strong> - These are the main template files that are directly compiles into html page files.</li>
|
||
<li><strong>partials</strong> - Other parts not included in any other directory.</li>
|
||
<li><strong>widgets</strong> - Component parts of blocks (usually they are used in the sidebar).</li>
|
||
</ul>
|
||
|
||
<h2>SCSS Files</h2>
|
||
|
||
<p>The directory with SCSS files contains the following files and subdirectories:</p><pre><code class="language-text">scss/
|
||
blocks/
|
||
blog/
|
||
common/
|
||
components/
|
||
filters/
|
||
footer/
|
||
header/
|
||
mixins/
|
||
shop/
|
||
widgets/
|
||
_custom.scss
|
||
_custom-variables.scss
|
||
_dark-theme.scss
|
||
_functions.scss
|
||
_mixins.scss
|
||
_variables.scss
|
||
style.ltr.scss
|
||
style.rtl.scss
|
||
style.scss</code></pre>
|
||
|
||
<p>You can make changes to any of these files.</p>
|
||
|
||
<p>
|
||
To make it easier for you in the future to upgrade the template to the new version,
|
||
we recommend (if possible) making changes only to <code>_custom-variables.scss</code> and <code>_custom.scss</code> files.
|
||
</p>
|
||
|
||
<ul>
|
||
<li><code>_custom-variables.scss</code> - It is used to override the values of variables.</li>
|
||
<li><code>_custom.scss</code> - Use to write your own scss code.</li>
|
||
</ul>
|
||
|
||
<h2>Dark header and footer</h2>
|
||
|
||
<p>
|
||
To enable dark header and footer, open the <code>_custom-variables.scss</code> file, then find and uncomment following line:
|
||
</p><pre><code class="language-text">//@import 'dark-theme';</code></pre>
|
||
|
||
<p>
|
||
After that, you need to rebuild the template using the <code>gulp build</code> command.
|
||
</p>
|
||
|
||
<h2>How does LTR/RTL support work?</h2>
|
||
|
||
<p>The direction is controlled using two scss variables:</p>
|
||
|
||
<ul>
|
||
<li>
|
||
<code>$direction</code> - indicates direction. Possible values: <code>ltr</code> or <code>rtl</code>.
|
||
</li>
|
||
<li>
|
||
<code>$both-directions</code> - if <code>true</code> compiles styles for two directions, the <code>$direction</code> variable will be ignored.
|
||
Possible values: <code>true</code> or <code>false</code>.
|
||
</li>
|
||
</ul>
|
||
|
||
<p>
|
||
Some "magic" variables are also used, which change their value depending on the given direction value.
|
||
The names of these variables are the same as the names of the
|
||
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties" target="_blank">Logical Properties</a>
|
||
(for example, variable <code>$margin-inline-start</code>).
|
||
These variables should only be used in the <code>direction</code> mixin.
|
||
</p>
|
||
|
||
<p>This example demonstrates how it works:</p><pre><code class="language-scss">.alert {
|
||
@include direction {
|
||
#{$margin-inline-start}: 20px;
|
||
}
|
||
}</code></pre>
|
||
|
||
|
||
|
||
<p>Will be compiled to:</p>
|
||
|
||
<ul>
|
||
<li>
|
||
If <code>$direction == ltr</code> and <code>$both-directions == false</code>:<pre><code class="language-css">.alert {
|
||
margin-left: 20px;
|
||
}</code></pre>
|
||
</li>
|
||
<li>
|
||
If <code>$direction == rtl</code> and <code>$both-directions == false</code>:<pre><code class="language-css">.alert {
|
||
margin-right: 20px;
|
||
}</code></pre>
|
||
</li>
|
||
<li>
|
||
If <code>$both-directions == true</code>:<pre><code class="language-css">[dir=ltr] .alert {
|
||
margin-left: 20px;
|
||
}
|
||
[dir=rtl] .alert {
|
||
margin-right: 20px;
|
||
}</code></pre>
|
||
</li>
|
||
</ul>
|
||
|
||
<h3>What if you want to use only one direction?</h3>
|
||
|
||
<p>
|
||
Open <code>src/scss/_custom-variables.scss</code>, and define next variables:
|
||
</p><pre><code class="language-scss">$direction: ltr; // specify the direction you need (ltr or rtl)
|
||
$both-directions: false; // set to false to disable style compilation
|
||
// for two directions</code></pre>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<section class="docs-section" id="section-customization">
|
||
<h1 class="docs-section__title">Customization</h1>
|
||
|
||
<div class="docs-typography">
|
||
<h2>Table of content</h2>
|
||
|
||
<ul>
|
||
<li>How to change the logo?</li>
|
||
<li>How to change the font?</li>
|
||
<li>How to remove/change copyright notice?</li>
|
||
<li>How to change direction (LTR <-> RTL)?</li>
|
||
</ul>
|
||
|
||
<h2>How to change the logo?</h2>
|
||
|
||
<p>
|
||
<i>If you are working with HTML files:</i>
|
||
</p>
|
||
|
||
<p>
|
||
In HTML files, find comments <code><!-- logo --></code> and <code><!-- logo / end --></code> and replace code
|
||
between them with your logo image.
|
||
</p>
|
||
|
||
<hr>
|
||
|
||
<p>
|
||
<i>If you are working with source code:</i>
|
||
</p>
|
||
|
||
<ol>
|
||
<li>Open the <code>src/twig/header/header.twig</code> file.</li>
|
||
<li>Find comments <code><!-- logo --></code> and <code><!-- logo / end --></code> and replace code between them with your logo image.</li>
|
||
</ol>
|
||
|
||
<h2>How to change the font?</h2>
|
||
|
||
<p>
|
||
<i>If you are working with HTML files:</i>
|
||
</p>
|
||
|
||
<ol>
|
||
<li>
|
||
In HTML files find and replace with the desired font:<pre><code class="language-html"><!-- fonts -->
|
||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700,700i"></code></pre>
|
||
</li>
|
||
<li>Open the <code>css/style.css</code> file.</li>
|
||
<li>
|
||
Insert at the end:<pre><code class="language-css">body {
|
||
font-family: "YOUR_FONT_NAME";
|
||
}</code></pre>
|
||
</li>
|
||
</ol>
|
||
|
||
<hr>
|
||
|
||
<p>
|
||
<i>If you are working with source code:</i>
|
||
</p>
|
||
|
||
<ol>
|
||
<li>Open the <code>src/twig/layouts/basic.twig</code> file.</li>
|
||
<li>
|
||
Find and replace with the desired font:<pre><code class="language-html"><!-- fonts -->
|
||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700,700i"></code></pre>
|
||
</li>
|
||
<li>Open the <code>src/scss/_custom-variables.scss</code> file.</li>
|
||
<li>
|
||
And define a special variable, as in the example below:<pre><code class="language-scss">$body-font-family: 'YOUR_FONT_NAME';</code></pre>
|
||
</li>
|
||
</ol>
|
||
|
||
<h2>How to remove/change copyright notice?</h2>
|
||
|
||
<p>
|
||
<i>If you are working with HTML files:</i>
|
||
</p>
|
||
|
||
<p>
|
||
In HTML files, find comments <code><!-- copyright --></code> and <code><!-- copyright / end --></code>,
|
||
then replace code between them with your copyright.
|
||
</p>
|
||
|
||
<hr>
|
||
|
||
<p>
|
||
<i>If you are working with source code:</i>
|
||
</p>
|
||
|
||
<ol>
|
||
<li>Open the <code>src/twig/footer/footer.twig</code> file.</li>
|
||
<li>
|
||
Find comments <code><!-- copyright --></code> and <code><!-- copyright / end --></code>,
|
||
then replace code between them with your copyright.
|
||
</li>
|
||
</ol>
|
||
|
||
<h2>How to change direction (LTR <-> RTL)?</h2>
|
||
|
||
<p>
|
||
<i>If you are working with HTML files:</i>
|
||
</p>
|
||
|
||
<ol>
|
||
<li>Open <code>HTML/{THEME_NAME}/{*}.html</code> (for example <code>HTML/classic/index.html</code>);</li>
|
||
<li>
|
||
And specify value of the <code>dir</code> attribute (ltr or rtl) for <code><html></code> tag, for example:<pre><code class="language-html"><!DOCTYPE html>
|
||
<html lang="en" dir="rtl">
|
||
...</code></pre>
|
||
|
||
By default, <code>style.css</code> is used in template files, it contains styles for both directions.
|
||
If you want to use one direction, you can replace it with a more efficient version <code>style.{direction}.css</code>.
|
||
</li>
|
||
<li>
|
||
Find: <code><link rel="stylesheet" href="css/style.css"></code>.<br>
|
||
And replace to: <code><link rel="stylesheet" href="css/style.rtl.css"></code>
|
||
</li>
|
||
</ol>
|
||
|
||
<hr>
|
||
|
||
<p>
|
||
<i>If you are working with source code:</i>
|
||
</p>
|
||
|
||
<p>Described in the "Sources" section.</p>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<section class="docs-section" id="section-changelog">
|
||
<h1 class="docs-section__title">Changelog</h1>
|
||
|
||
<div class="docs-typography">
|
||
<p>
|
||
<strong>Version 1.3.0</strong> – January 18, 2022
|
||
</p>
|
||
|
||
<ul>
|
||
<li>Updated: <strong>jQuery</strong> from <code>3.4.1</code> to <code>3.6.0</code>;</li>
|
||
<li>Updated: <strong>Bootstrap</strong> from <code>4.4.1</code> to <code>5.1.3</code> and other dependencies;</li>
|
||
<li>Other: Replace node-sass with dart-sass.</li>
|
||
</ul>
|
||
|
||
<p>
|
||
<strong>Version 1.2.0</strong> – March 11, 2020
|
||
</p>
|
||
|
||
<ul>
|
||
<li>Added: <strong>RTL support</strong>;</li>
|
||
<li>Added: <strong>PhotoSwipe</strong> gallery on the product page;</li>
|
||
<li>Added: Customization section to the documentation;</li>
|
||
<li>Changed: Scripts moved to the end of page;</li>
|
||
<li>Updated: <strong>Bootstrap</strong> from <code>4.3.1</code> to <code>4.4.1</code>;</li>
|
||
<li>Updated: <strong>jQuery</strong> from <code>3.3.1</code> to <code>3.4.1</code>;</li>
|
||
<li>Updated: <strong>noUiSlider</strong> from <code>13.1.4</code> to <code>14.1.1</code>;</li>
|
||
<li>Updated: <strong>Font Awesome</strong> from <code>5.8.1</code> to <code>5.12.1</code>;</li>
|
||
<li>Other: Now instead of black images of stubs, more friendly gray images with an image resolution printed on them are used.</li>
|
||
</ul>
|
||
|
||
<p>
|
||
<strong>Version 1.1.0</strong> – March 29, 2019
|
||
</p>
|
||
|
||
<ul>
|
||
<li>Updated <strong>Bootstrap</strong> from <code>4.1.3</code> to <code>4.3.1</code>;</li>
|
||
<li>Updated <strong>Font Awesome</strong> from <code>5.6.1</code> to <code>5.8.1</code>;</li>
|
||
<li>Updated <strong>noUiSlider</strong> from <code>12.1.0</code> to <code>13.1.4</code>.</li>
|
||
</ul>
|
||
|
||
<p>
|
||
<strong>Version 1.0.0</strong> – January 20, 2019
|
||
</p>
|
||
|
||
<ul>
|
||
<li>Initial Release.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<section class="docs-section" id="section-known-issues">
|
||
<h1 class="docs-section__title">Known Issues</h1>
|
||
|
||
<div class="docs-typography">
|
||
<p>
|
||
<strong>SVG icons are not displayed when opening HTML files in a browser</strong>
|
||
</p>
|
||
|
||
<p>
|
||
When loading pages via <code>file://</code> URI, due to the security policy,
|
||
browsers block the loading of external SVG icons because they have a unique origin.
|
||
To fix this, you need to open HTML files using the HTTP/HTTPS protocol.
|
||
To do this, launch a local HTTP server or upload files to a remote server.
|
||
</p>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<section class="docs-section" id="section-credits">
|
||
<h1 class="docs-section__title">Credits</h1>
|
||
|
||
<div class="docs-typography">
|
||
<ul>
|
||
<li>jQuery (<a href="https://jquery.com">https://jquery.com</a>)</li>
|
||
<li>Bootstrap (<a href="http://getbootstrap.com">http://getbootstrap.com</a>)</li>
|
||
<li>SVG for Everybody (<a href="https://github.com/jonathantneal/svg4everybody">https://github.com/jonathantneal/svg4everybody</a>)</li>
|
||
<li>noUiSlider (<a href="https://github.com/leongersen/noUiSlider/">https://github.com/leongersen/noUiSlider/</a>)</li>
|
||
<li>Owl Carousel 2 (<a href="https://github.com/OwlCarousel2/OwlCarousel2">https://github.com/OwlCarousel2/OwlCarousel2</a>)</li>
|
||
<li>Font Awesome (<a href="https://fontawesome.com/">https://fontawesome.com/</a>)</li>
|
||
<li>PhotoSwipe (<a href="https://photoswipe.com/">https://photoswipe.com/</a>)</li>
|
||
</ul>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
</div>
|
||
</div>
|
||
<script>
|
||
const links = [].slice.call(document.querySelectorAll('.docs-nav__links a'));
|
||
|
||
links.forEach(link => {
|
||
if (link.hash === window.location.hash) {
|
||
link.classList.add('docs-nav__link--current');
|
||
|
||
const section = document.querySelector(link.hash);
|
||
|
||
window.addEventListener('load', () => {
|
||
setTimeout(() => {
|
||
window.scrollTo({top: section.offsetTop});
|
||
}, 0);
|
||
});
|
||
} else {
|
||
link.classList.remove('docs-nav__link--current');
|
||
}
|
||
});
|
||
|
||
window.addEventListener('hashchange', () => {
|
||
links.forEach(link => {
|
||
if (link.hash === window.location.hash) {
|
||
link.classList.add('docs-nav__link--current');
|
||
|
||
const section = document.querySelector(link.hash);
|
||
window.scrollTo({top: section.offsetTop});
|
||
} else {
|
||
link.classList.remove('docs-nav__link--current');
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|