<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Title -->
<title>Soup - Restaurant with Online Ordering System Template</title>
<!-- Favicons -->
<link rel="shortcut icon" href="../assets/img/favicon.png">
<link rel="apple-touch-icon" href="../assets/img/favicon_60x60.png">
<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/favicon_76x76.png">
<link rel="apple-touch-icon" sizes="120x120" href="../assets/img/favicon_120x120.png">
<link rel="apple-touch-icon" sizes="152x152" href="../assets/img/favicon_152x152.png">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&family=Raleway:wght@100;200;400;500&display=swap" rel="stylesheet">
<!-- CSS Core -->
<link rel="stylesheet" href="../dist/css/core.css" />
<!-- CSS Theme -->
<link id="theme" rel="stylesheet" href="../dist/css/theme-beige.css" />
</head>
<body data-spy="scroll" data-target="#side-navigation" data-offset="10">
<!-- Body Wrapper -->
<div id="body-wrapper" class="animsition">
<!-- Content -->
<div id="content">
<section class="section section-lg bg-light">
<div class="container" data-local-scroll>
<div class="col-lg-8">
<img src="../assets/img/logo-dark.svg" width="90" alt="" class="mb-5">
<h1>Documentation</h1>
<p class="text-muted lead">This page includes all designed elements which you may use while creating sites based on this template.</p>
<a href="#main" class="btn btn-outline-primary btn-lg"><span>Start Exploring <i class="i-after ti ti-arrow-down"></i></span></a>
<a href="../chooser.html" class="btn btn-secondary btn-lg"><span>Go to chooser</span></a>
</div>
</div>
</section>
<section id="main" class="container">
<div class="row">
<div class="col-md-9">
<!-- Getting Started -->
<div id="start">
<h1 class="border-bottom pb-3">Getting Started</h1>
<p class="lead">Soup is a HTML/CSS template based on <a href="http://v4-alpha.getbootstrap.com/" target="_blank" class="text-primary">Bootstrap 4</a> framework. It allows to built modern, fast and mobile friendly websites for restaurants. What's more it includes componentes for online ordering system.</p>
<!-- HTML Structure -->
<div id="start-htmlStructure" class="py-3">
<h2>HTML Structure</h2>
<p class="lead">This is the base of each HTML file:</p>
<pre class="prettyprint">
<!-- Header -->
<header id="header">
...
</header>
<!-- Header / End -->
<!-- Content -->
<div id="content">
<!-- Section -->
<section>
...
</section>
<!-- Footer -->
<footer>
...
</footer>
</div>
<!-- Content / End -->
</pre>
</div>
<!-- Grid -->
<div id="start-grid" class="py-3">
<h2>Grid System</h2>
<p class="lead">Soup Template supporst all features of <strong>Bootstrap</strong> Grid System - go to <a href="http://v4-alpha.getbootstrap.com/layout/grid/" target="_blank" class="text-primary"> Bootrstrap's page</a> and check how does it work.</p>
</div>
</div>
<!-- Getting Started / End -->
<!-- Content Elements -->
<div id="elements" class="py-5">
<h1 class="border-bottom pb-3">Content</h1>
<p class="lead">It will be pleasure to build content with this stuff!. More at <a href="http://v4-alpha.getbootstrap.com/content/reboot/" target="_blank" class="text-primary">Bootstrap's 4 page</a>.</p>
<!-- Typography -->
<div id="elements-typography" class="py-3">
<h2>Typography</h2>
<p class="lead">Useful elements to create nice texts.</p>
<!-- Headings -->
<h3>Headings</h3>
<div class="example-box">
<div class="example-box-title">Example</div>
<div class="example-box-content">
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
</div>
</div>
<pre class="prettyprint">
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
</pre>
<!-- Paragraph -->
<h3>Paragraph</h3>
<div class="example-box">
<div class="example-box-title">Example</div>
<div class="example-box-content">
<p class="lead">Maecenas a risus quis ipsum convallis fringilla in ut magna. Phasellus et sagittis odio. Sed in enim condimentum, lacinia metus id, sollicitudin libero. In ac ultricies justo. </p>
<p>Curabitur sit amet turpis eu diam luctus viverra. Sed viverra ornare ex, quis lobortis diam vehicula a. In imperdiet est tristique, malesuada odio quis, volutpat ante. Nulla ullamcorper, nisl sed faucibus posuere, dui turpis mattis turpis, in porttitor massa odio nec sapien.</p>
</div>
</div>
<pre class="prettyprint"><p class="lead">...</p>
<p>...</p>
</pre>
<!-- Blockquote -->
<h3>Blockquote</h3>
<p>Blocquote with alternative <code>.light</code> version.</p>
<div class="example-box">
<div class="example-box-title">Example</div>
<div class="example-box-content">
<div class="blockquotes">
<!-- Blockquote -->
<blockquote class="blockquote mb-0">
<div class="blockquote-content dark">
<div class="rate rate-sm mb-3"><i class="fa fa-star active"></i><i class="fa fa-star active"></i><i class="fa fa-star active"></i><i class="fa fa-star active"></i><i class="fa fa-star"></i></div>
<p>Great food and great atmosphere!</p>
</div>
<footer>
<img src="http://assets.suelo.pl/soup/img/avatars/avatar01.jpg" alt="">
<span class="name">Kate Hudson<span class="text-muted">, LinkedIn</span></span>
</footer>
</blockquote>
</div>
</div>
</div>
<pre class="prettyprint">
<!-- Blockquote -->
<blockquote class="blockquote">
<div class="blockquote-content dark">
<div class="rate rate-sm mb-3"><i class="fa fa-star active"></i><i class="fa fa-star active"></i><i class="fa fa-star active"></i><i class="fa fa-star active"></i><i class="fa fa-star"></i></div>
<p>Great food and great atmosphere!</p>
</div>
<footer>
<img src="http://assets.suelo.pl/soup/img/avatars/avatar01.jpg" alt="">
<span class="name">Kate Hudson<span class="text-muted">, LinkedIn</span></span>
</footer>
</blockquote>
</pre>
</div>
<!-- Code -->
<div id="elements-code" class="py-3">
<h2>Code</h2>
<p class="lead">Easy & effectife way to resent code. More at <a href="http://v4-alpha.getbootstrap.com/content/code/" target="_blank" class="text-primary">Bootstrap's 4 page</a>.</p>
<!-- Inline Code -->
<h3>Inline code</h3>
<div class="example-box">
<div class="example-box-title">Example</div>
<div class="example-box-content">
For example, <code><section></code> should be wrapped as inline.
</div>
</div>
<pre class="prettyprint">
For example, <code>&lt;section&gt;</code> should be wrapped as inline.
</pre>
<!-- Inline Code -->
<h3>Code block</h3>
<div class="example-box">
<div class="example-box-title">Example</div>
<div class="example-box-content">
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
</div>
</div>
<pre class="prettyprint">
<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>
</pre>
</div>
<!-- Images -->
<div id="elements-images" class="py-3">
<h2>Images</h2>
<div class="example-box">
<div class="example-box-title">Example</div>
<div class="example-box-content">
<img src="http://assets.suelo.pl/soup/img/avatars/avatar01.jpg" alt="..." class="rounded">
<img src="http://assets.suelo.pl/soup/img/avatars/avatar01.jpg" alt="..." class="img-thumbnail">
</div>
</div>
<pre class="prettyprint">
<img src="..." alt="..." class="rounded">
<img src="..." alt="..." class="img-thumbnail">
</pre>
</div>
<!-- Icons -->
<div id="elements-icons" class="py-3">
<h2>Icons</h2>
<p class="lead">Soup template includes two fantastic sets of icons - <a href="http://themify.me/themify-icons/" target="_blank" class="text-primary">Themify Icons</a> and <a href="http://suelo.pl/themeforest/lineicons/demo.html" target="_blank" class="text-primary">Line Icons</a></p>
<h3>Basic Icons</h3>
<div class="example-box">
<div class="example-box-title">Example</div>
<div class="example-box-content">
<div class="row">
<div class="col-md-4">
<span class="icon icon-lg"><i class="ti ti-desktop"></i></span>
</div>
<div class="col-md-4">
<span class="icon"><i class="ti ti-desktop"></i></span>
</div>
<div class="col-md-4">
<span class="icon icon-sm"><i class="ti ti-desktop"></i></span>
</div>
</div>
</div>
</div>
<pre class="prettyprint html-code">
<span class="icon icon-lg"><i class="ti ti-desktop"></i></span>
<span class="icon"><i class="ti ti-desktop"></i></span>
<span class="icon icon-sm"><i class="ti ti-desktop"></i></span>
</pre>
<h3>Circle Icons</h3>
<div class="example-box">
<div class="example-box-title">Example</div>
<div class="example-box-content">
<div class="row">
<div class="col-md-4">
<span class="icon icon-circle icon-primary icon-lg"><i class="ti ti-desktop"></i></span>
</div>
<div class="col-md-4">
<span class="icon icon-circle icon-primary"><i class="ti ti-desktop"></i></span>
</div>
<div class="col-md-4">
<span class="icon icon-circle icon-primary icon-sm"><i class="ti ti-desktop"></i></span>
</div>
</div>
</div>
</div>
<pre class="prettyprint html-code">
<span class="icon icon-circle icon-primary icon-lg"><i class="ti ti-desktop"></i></span>
<span class="icon icon-circle icon-primary"><i class="ti ti-desktop"></i></span>
<span class="icon icon-circle icon-primary icon-sm"><i class="ti ti-desktop"></i></span>
</pre>
<h3>Colors</h3>
<p>Each icon may be used in any color from <a href="#colors" class="text-primary">Available Colors</a> section. Please use <code>.icon-[color-name]</code> - for example:</p>
<div class="example-box">
<div class="example-box-title">Example</div>
<div class="example-box-content">
<span class="icon icon-success"><i class="ti ti-desktop"></i></span>
<span class="icon icon-circle icon-warning"><i class="ti ti-desktop"></i></span>
</div>
</div>
<pre class="prettyprint html-code">
<span class="icon icon-success"><i class="ti ti-desktop"></i></span>
<span class="icon icon-circle icon-warning"><i class="ti ti-desktop"></i></span>
</pre>
<h3>Social Icons</h3>
<p>This product supports lots of social icon types.</p>
<div class="example-box">
<div class="example-box-title">Example</div>
<div class="example-box-content">
<a href="#" class="icon icon-facebook"><i class="ti ti-facebook"></i></a>
<a href="#" class="icon icon-twitter"><i class="ti ti-twitter-alt"></i></a>
<a href="#" class="icon icon-google"><i class="ti ti-google"></i></a>
<a href="#" class="icon icon-dribbble"><i class="ti ti-dribbble"></i></a>
<a href="#" class="icon icon-flickr"><i class="ti ti-flickr"></i></a>
<a href="#" class="icon icon-instagram"><i class="ti ti-instagram"></i></a>
<a href="#" class="icon icon-linkedin"><i class="ti ti-linkedin"></i></a>
<a href="#" class="icon icon-skype"><i class="ti ti-skype"></i></a>
<a href="#" class="icon icon-tumblr"><i class="ti ti-tumblr-alt"></i></a>
<a href="#" class="icon icon-vimeo"><i class="ti ti-vimeo-alt"></i></a>
<a href="#" class="icon icon-youtube"><i class="ti ti-youtube"></i></a>
</div>
</div>
<pre class="prettyprint html-code">
<a href="#" class="icon icon-facebook"><i class="ti ti-facebook"></i></a>
<a href="#" class="icon icon-twitter"><i class="ti ti-twitter-alt"></i></a>
<a href="#" class="icon icon-google"><i class="ti ti-google"></i></a>
<a href="#" class="icon icon-dribbble"><i class="ti ti-dribbble"></i></a>
<a href="#" class="icon icon-flickr"><i class="ti ti-flickr"></i></a>
<a href="#" class="icon icon-instagram"><i class="ti ti-instagram"></i></a>
<a href="#" class="icon icon-linkedin"><i class="ti ti-linkedin"></i></a>
<a href="#" class="icon icon-skype"><i class="ti ti-skype"></i></a>
<a href="#" class="icon icon-tumblr"><i class="ti ti-tumblr-alt"></i></a>
<a href="#" class="icon icon-vimeo"><i class="ti ti-vimeo-alt"></i></a>
<a href="#" class="icon icon-youtube"><i class="ti ti-youtube"></i></a>
</pre>
<div class="example-box">
<div class="example-box-title">Example</div>
<div class="example-box-content">
<a href="#" class="icon icon-circle icon-facebook"><i class="ti ti-facebook"></i></a>
<a href="#" class="icon icon-circle icon-twitter"><i class="ti ti-twitter-alt"></i></a>
<a href="#" class="icon icon-circle icon-google"><i class="ti ti-google"></i></a>
<a href="#" class="icon icon-circle icon-dribbble"><i class="ti ti-dribbble"></i></a>
<a href="#" class="icon icon-circle icon-flickr"><i class="ti ti-flickr"></i></a>
<a href="#" class="icon icon-circle icon-instagram"><i class="ti ti-instagram"></i></a>
<a href="#" class="icon icon-circle icon-linkedin"><i class="ti ti-linkedin"></i></a>
<a href="#" class="icon icon-circle icon-skype"><i class="ti ti-skype"></i></a>
<a href="#" class="icon icon-circle icon-tumblr"><i class="ti ti-tumblr-alt"></i></a>
<a href="#" class="icon icon-circle icon-vimeo"><i class="ti ti-vimeo-alt"></i></a>
<a href="#" class="icon icon-circle icon-youtube"><i class="ti ti-youtube"></i></a>
</div>
</div>
<pre class="prettyprint html-code">
<a href="#" class="icon icon-circle icon-facebook"><i class="ti ti-facebook"></i></a>
<a href="#" class="icon icon-circle icon-twitter"><i class="ti ti-twitter-alt"></i></a>
<a href="#" class="icon icon-circle icon-google"><i class="ti ti-google"></i></a>
<a href="#" class="icon icon-circle icon-dribbble"><i class="ti ti-dribbble"></i></a>
<a href="#" class="icon icon-circle icon-flickr"><i class="ti ti-flickr"></i></a>
<a href="#" class="icon icon-circle icon-instagram"><i class="ti ti-instagram"></i></a>
<a href="#" class="icon icon-circle icon-linkedin"><i class="ti ti-linkedin"></i></a>
<a href="#" class="icon icon-circle icon-skype"><i class="ti ti-skype"></i></a>
<a href="#" class="icon icon-circle icon-tumblr"><i class="ti ti-tumblr-alt"></i></a>
<a href="#" class="icon icon-circle icon-vimeo"><i class="ti ti-vimeo-alt"></i></a>
<a href="#" class="icon icon-circle icon-youtube"><i class="ti ti-youtube"></i></a>
</pre>
</div>
</div>
<!-- Content Elements / End -->
<!-- Components -->
<div id="components" class="py-5">
<h1 class="border-bottom pb-3">Components</h1>
<p class="lead">Thanks to the prepared components you will be able to create really cool and effective, easy to use websites. Let's start exploring them!</p>
<!-- Alerts -->
<div id="components-alerts" class="py-3">
<h2>Alerts</h2>
<div class="example-box">
<div class="example-box-title">Example</div>
<div class="example-box-content">
<div class="alert alert-success" role="alert">
<strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-info" role="alert">
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<div class="alert alert-danger" role="alert">
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
</div>
</div>
<pre class="prettyprint">
<div class="alert alert-success" role="alert">
...
</div>
<div class="alert alert-info" role="alert">
...
</div>
<div class="alert alert-warning" role="alert">
...
</div>
<div class="alert alert-danger" role="alert">
...
</div>
</pre>
</div>
<!-- Buttons -->
<div id="components-buttons" class="py-3">
<h2>Buttons</h2>
<h3>Button Types</h3>
<div class="example-box">
<div class="example-box-title">Example - available colors</div>
<div class="example-box-content">
<button type="button" class="btn btn-primary"><span>Primary</span></button>
<button type="button" class="btn btn-secondary"><span>Secondary</span></button>
<button type="button" class="btn btn-success"><span>Success</span></button>
<button type="button" class="btn btn-info"><span>Info</span></button>
<button type="button" class="btn btn-warning"><span>Warning</span></button>
<button type="button" class="btn btn-danger"><span>Danger</span></button>
<button type="button" class="btn btn-link"><span>Link</span></button>
</div>
</div>
<pre class="prettyprint html-code">
<button type="button" class="btn btn-primary"><span>Primary</span></button>
<button type="button" class="btn btn-secondary"><span>Secondary</span></button>
<button type="button" class="btn btn-success"><span>Success</span></button>
<button type="button" class="btn btn-info"><span>Info</span></button>
<button type="button" class="btn btn-warning"><span>Warning</span></button>
<button type="button" class="btn btn-danger"><span>Danger</span></button>
<button type="button" class="btn btn-link"><span>Link</span></button>
</pre>
<h3>Outline Buttons</h3>
<div class="example-box">
<div class="example-box-title">Example - available colors</div>
<div class="example-box-content">
<button type="button" class="btn btn-outline-primary"><span>Primary</span></button>
<button type="button" class="btn btn-outline-secondary"><span>Secondary</span></button>
<button type="button" class="btn btn-outline-success"><span>Success</span></button>
<button type="button" class="btn btn-outline-info"><span>Info</span></button>
<button type="button" class="btn btn-outline-warning"><span>Warning</span></button>
<button type="button" class="btn btn-outline-danger"><span>Danger</span></button>
</div>
</div>
<pre class="prettyprint html-code">
<button type="button" class="btn btn-outline-primary"><span>Primary</span></button>
<button type="button" class="btn btn-outline-secondary"><span>Secondary</span></button>
<button type="button" class="btn btn-outline-success"><span>Success</span></button>
<button type="button" class="btn btn-outline-info"><span>Info</span></button>
<button type="button" class="btn btn-outline-warning"><span>Warning</span></button>
<button type="button" class="btn btn-outline-danger"><span>Danger</span></button>
</pre>
<h3>Button Sizes</h3>
<p>Want to create bigger or smaller buttons? Just use <code>.btn-lg</code>, <code>.btn-sm</code>, <code>.btn-xs</code> classes.</p>
<div class="example-box">
<div class="example-box-title">Example</div>
<div class="example-box-content">
<button type="button" class="btn btn-lg btn-primary"><span>Button Large</span></button>
<button type="button" class="btn btn-primary"><span>Button Default</span></button>
<button type="button" class="btn btn-sm btn-primary"><span>Button Small</span></button>
</div>
</div>
<pre class="prettyprint html-code">
<button type="button" class="btn btn-lg btn-primary"><span>Button Large</span></button>
<button type="button" class="btn btn-primary"><span>Button Default</span></button>
<button type="button" class="btn btn-sm btn-primary"><span>Button Small</span></button>
</pre>
<h3>Button Groups</h3>
<p>Arrange awesome button groups!</p>
<div class="example-box">
<div class="example-box-title">Example</div>
<div class="example-box-content">
<div class="btn-group">
<button type="button" class="btn btn-dark"><span>Button Dark</span></button>
<button type="button" class="btn btn-primary"><span>Button Primary</span></button>
</div>
</div>
</div>
<pre class="prettyprint">
<div class="btn-group">
<button type="button" class="btn btn-dark"><span>Button Dark</span></button>
<button type="button" class="btn btn-primary"><span>Button Primary</span></button>
</div>
</pre>
</div>
<!-- Forms -->
<div id="components-forms" class="py-3">
<h2>Forms</h2>
<p>To validate the form please add <code>data-validate</code> attribute and <code>required</code> atribute to <code>input</code> / <code>textarea.</code></p>
<div class="example-box">
<div class="example-box-title">Example</div>
<div class="example-box-content">
<form action="#" class="validate-form">
<div class="form-group">
<label>Your e-mail</label>
<input name="email" type="email" class="form-control" required>
</div>
<div class="form-group">
<label>Your message</label>
<textarea name="message" id="message" cols="30" rows="5" class="form-control" required></textarea>
</div>
<div class="form-group form-submit">
<button type="submit" class="btn btn-primary btn-block"><span>Send message!</span></button>
</div>
</form>
</div>
</div>
<pre class="prettyprint">
<form action="#" class="validate-form">
<div class="form-group">
<label>Your e-mail</label>
<input name="email" type="email" class="form-control" required>
</div>
<div class="form-group">
<label>Your message</label>
<textarea name="message" id="message" cols="30" rows="5" class="form-control" required></textarea>
</div>
<div class="form-group form-submit">
<button type="submit" class="btn btn-primary btn-block"><span>Send message!</span></button>
</div>
</form>
</pre>
</div>
<!-- Pagination -->
<div id="components-pagination" class="py-3">
<h2>Pagination</h2>
<div class="example-box">
<div class="example-box-title">Example</div>
<div class="example-box-content">
<nav>
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<i class="ti ti-angle-left"></i>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<i class="ti ti-angle-right"></i>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
<pre class="prettyprint">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<i class="ti ti-angle-left"></i>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<i class="ti ti-angle-right"></i>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</pre>
</div>
<!-- Tabs -->
<div id="components-tabs" class="py-3">
<h2>Tabs</h2>
<p class="lead">Feel free to use the tabs for dynamic content.</p>
<div class="example-box">
<div class="example-box-title">Example</div>
<div class="example-box-content">
<!-- Nav Pills -->
<ul class="nav nav-pills nav-fill mb-3" role="tablist">
<li class="nav-item"><a class="nav-link active" href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li class="nav-item"><a class="nav-link" href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
</ul>
<!-- Tab Panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade show active" id="home">Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</div>
<div role="tabpanel" class="tab-pane fade" id="profile">Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. </div>
<div role="tabpanel" class="tab-pane fade" id="messages">Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</div>
</div>
</div>
</div>
<pre class="prettyprint">
<!-- Nav Pills -->
<ul class="nav nav-pills nav-fill mb-3" role="tablist">
<li class="nav-item"><a class="nav-link active" href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li class="nav-item"><a class="nav-link" href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
</ul>
<!-- Tab Panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
<div role="tabpanel" class="tab-pane fade" id="profile">...</div>
<div role="tabpanel" class="tab-pane fade" id="messages">...</div>
</div></pre>
</div>
<!-- Modal -->
<div id="components-modal" class="py-3">
<h2>Modal</h2>
<p class="lead">Modal window is perfect place for any kind of content.</p>
<div class="example-box">
<div class="example-box-title">Example</div>
<div class="example-box-content">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#demoModal"><span>Launch demo modal</span></button>
</div>
</div>
<!-- Modal / Demo -->
<div class="modal fade" id="demoModal" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="ti ti-close"></i></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-dark" data-dismiss="modal"><span>Close</span></button>
<button type="button" class="btn btn-primary"><span>Save changes</span></button>
</div>
</div>
</div>
</div>
<pre class="prettyprint">
<!-- Button trigger modal -->
<button type="button" class="btn btn-blue btn-lg" data-toggle="modal" data-target="#demoModal"><span>Launch demo modal</span></button>
<!-- Modal / Demo -->
<div class="modal fade" id="demoModal" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="ti ti-close"></i></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-dark" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div></pre>
<h3>Sizes</h3>
<p>Modals have three optional sizes <code>.modal-sm</code>, <code>.modal-lg</code> available via modifier classes to be placed on a .modal-dialog.</p>
</div>
<!-- Video Modal -->
<div id="components-videoModal" class="py-3">
<h2>Video Modal</h2>
<p class="lead">Video Modal was created to place video in popup window. Use <code>data-video</code> attribute to place url to your video.</p>
<div class="example-box">
<div class="example-box-title">Example</div>
<div class="example-box-content">
<!-- Button trigger modal -->
<a href="#" class="btn-play-2" data-toggle="video-modal" data-target="#modalVideo" data-video="https://www.youtube.com/embed/uVju5--RqtY"><span></span>Check it now!</a>
</div>
</div>
<!-- Video Modal / Demo -->
<div class="modal modal-video fade" id="modalVideo" role="dialog">
<button class="close" data-dismiss="modal"><i class="ti ti-close"></i></button>
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<iframe height="500"></iframe>
</div>
</div>
</div>
<pre class="prettyprint">
<!-- Button trigger modal -->
<a href="#" class="btn-play-2" data-toggle="video-modal" data-target="#modalVideo" data-video="https://www.youtube.com/embed/uVju5--RqtY"><span></span>Check it now!</a>
<!-- Video Modal / Demo -->
<div class="modal modal-video fade" id="modalVideo" role="dialog">
<button class="close" data-dismiss="modal"><i class="ti ti-close"></i></button>
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<iframe height="500"></iframe>
</div>
</div>
</div>
</pre>
</div>
<!-- Carousel -->
<div id="components-carousel" class="py-3">
<h2>Carousel</h2>
<p class="lead">Carousel is a component perfect to preset any kind of content like photos, icons, texts, etc. Go to the <a class="text-primary" href="http://kenwheeler.github.io/slick/" target="_blank">Slick's page</a> to see full documentation of this components. </p>
<div class="example-box">
<div class="example-box-title">Example</div>
<div class="example-box-content">
<!-- Carousel -->
<div class="carousel carousel-items" data-slick='{
"slidesToShow": 3,
"slidesToScroll": 1,
"dots": true,
"arrows": false,
"responsive": [
{
"breakpoint": 991,
"settings": {
"slidesToShow": 2
}
},
{
"breakpoint": 575,
"settings": {
"slidesToShow": 1
}
}
]
}'>
<div class="carousel-item">
<img src="http://assets.suelo.pl/soup/img/posts/post01.jpg" class="rounded" alt="">
</div>
<div class="carousel-item">
<img src="http://assets.suelo.pl/soup/img/posts/post02.jpg" class="rounded" alt="">
</div>
<div class="carousel-item">
<img src="http://assets.suelo.pl/soup/img/posts/post03.jpg" class="rounded" alt="">
</div>
<div class="carousel-item">
<img src="http://assets.suelo.pl/soup/img/posts/post04.jpg" class="rounded" alt="">
</div>
</div>
</div>
</div>
<pre class="prettyprint">
<!-- Carousel -->
<div class="carousel carousel-items" data-slick='{
"slidesToShow": 3,
"slidesToScroll": 1,
"dots": true,
"arrows": false,
"responsive": [
{
"breakpoint": 991,
"settings": {
"slidesToShow": 2
}
},
{
"breakpoint": 575,
"settings": {
"slidesToShow": 1
}
}
]
}'>
<div class="carousel-item">
...
</div>
<div class="carousel-item">
...
</div>
<div class="carousel-item">
...
</div>
<div class="carousel-item">
...
</div>
<div class="carousel-item">
...
</div>
</div>
</pre>
</div>
<!-- Badges -->
<div id="components-badges" class="py-3">
<h2>Badges</h2>
<div class="example-box">
<div class="example-box-title">Example</div>
<div class="example-box-content">
<span class="badge badge-default">Default</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>
</div>
</div>
<pre class="prettyprint html-code">
<span class="badge badge-default">Default</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>
</pre>
</div>
<!-- Tooltip -->
<div id="components-tooltip" class="py-3">
<h2>Tooltips</h2>
<p class="lead">Hover the buttons to see the tooltips.</p>
<div class="example-box">
<div class="example-box-title">Example</div>
<div class="example-box-content">
<button type="button" class="btn btn-outline-primary btn-sm" data-toggle="tooltip" data-placement="left" title="Tooltip on left"><span>Tooltip on left</span></button>
<button type="button" class="btn btn-outline-primary btn-sm" data-toggle="tooltip" data-placement="top" title="Tooltip on top"><span>Tooltip on top</span></button>
<button type="button" class="btn btn-outline-primary btn-sm" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom"><span>Tooltip on bottom</span></button>
<button type="button" class="btn btn-outline-primary btn-sm" data-toggle="tooltip" data-placement="right" title="Tooltip on right"><span>Tooltip on right</span></button>
</div>
</div>
<pre class="prettyprint html-code">
<button type="button" class="btn btn-outline-primary btn-sm" data-toggle="tooltip" data-placement="left" title="Tooltip on left"><span>Tooltip on left</span></button>
<button type="button" class="btn btn-outline-primary btn-sm" data-toggle="tooltip" data-placement="top" title="Tooltip on top"><span>Tooltip on top</span></button>
<button type="button" class="btn btn-outline-primary btn-sm" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom"><span>Tooltip on bottom</span></button>
<button type="button" class="btn btn-outline-primary btn-sm" data-toggle="tooltip" data-placement="right" title="Tooltip on right"><span>Tooltip on right</span></button>
</pre>
</div>
</div>
<!-- Components / End -->
<!-- Utilities -->
<div id="utilities" class="py-5">
<h1 class="border-bottom pb-3">Utilities</h1>
<p class="lead">Below are listed important configuration options for whole template.</p>
<!-- Colors -->
<div id="utilities-colors" class="py-3">
<h2>Available Colors</h2>
<h3>Colour scheme:</h3>
<div class="row">
<!-- Color -->
<div class="col-lg-2 col-sm-3 col-xs-6">
<div class="text-center">
<span class="shape square bg-primary mb-2"></span>
<h6 class="text-muted">primary</h6>
</div>
</div>
<!-- Color -->
<div class="col-lg-2 col-sm-3 col-xs-6">
<div class="text-center">
<span class="shape square bg-secondary mb-2"></span>
<h6 class="text-muted">secondary</h6>
</div>
</div>
</div>
<h3>Other:</h3>
<div class="row">
<!-- Color -->
<div class="col-lg-2 col-sm-3 col-xs-6">
<div class="text-center">
<span class="shape square bg-info mb-2"></span>
<h6 class="text-muted">info</h6>
</div>
</div>
<!-- Color -->
<div class="col-lg-2 col-sm-3 col-xs-6">
<div class="text-center">
<span class="shape square bg-success mb-2"></span>
<h6 class="text-muted">success</h6>
</div>
</div>
<!-- Color -->
<div class="col-lg-2 col-sm-3 col-xs-6">
<div class="text-center">
<span class="shape square bg-warning mb-2"></span>
<h6 class="text-muted">warning</h6>
</div>
</div>
<!-- Color -->
<div class="col-lg-2 col-sm-3 col-xs-6">
<div class="text-center">
<span class="shape square bg-danger mb-2"></span>
<h6 class="text-muted">danger</h6>
</div>
</div>
<!-- Color -->
<div class="col-lg-2 col-sm-3 col-xs-6">
<div class="text-center">
<span class="shape square bg-light mb-2"></span>
<h6 class="text-muted">light</h6>
</div>
</div>
<!-- Color -->
<div class="col-lg-2 col-sm-3 col-xs-6">
<div class="text-center">
<span class="shape square bg-white border mb-2"></span>
<h6 class="text-muted">white</h6>
</div>
</div>
<!-- Color -->
<div class="col-lg-2 col-sm-3 col-xs-6">
<div class="text-center">
<span class="shape square bg-dark mb-2"></span>
<h6 class="text-muted">dark</h6>
</div>
</div>
<!-- Color -->
<div class="col-lg-2 col-sm-3 col-xs-6">
<div class="text-center">
<span class="shape square bg-black mb-2"></span>
<h6 class="text-muted">black</h6>
</div>
</div>
</div>
</div>
<!-- Helper Classes -->
<div id="utilities-classes" class="py-3">
<h2>Helper Classes</h2>
<h3>Text Colors</h3>
<p>It is possible to add any color form <a href="#colors" class="text-primary">Available Colors</a> section by <code>.text-[color-name]</code> class</p>
<div class="example-box">
<div class="example-box-title">Example</div>
<div class="example-box-content">
<span class="text-primary">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</span>
</div>
</div>
<pre class="prettyprint html-code">
<span class="text-primary">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</span>
</pre>
<h3>Backgrounds</h3>
<p>Similar to text colors it is possible to add backgorund color from <a href="#colors" class="text-primary">Available Colors</a> section by <code>.bg-[color-name]</code> class. <br><br>
For dark background colors it is necessary to add <code>dark</code> class to adjust font colors and other styles. Sometimes, if inside dark element is placed element with light background you should add <code>light</code> class to such element.</p>
<div class="example-box">
<div class="example-box-title">Example</div>
<div class="example-box-content">
<p class="bg-success dark p-2">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
</div>
</div>
<pre class="prettyprint">
<p class="bg-success dark p-2">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
</pre>
<h3>Border</h3>
<p>It is possible to add border to any of html elements by adding proper class:</p>
<ul class="list-unstyled">
<li><code>.border</code> - adds border to element</li>
<li><code>.border-top</code> - adds top border to element</li>
<li><code>.border-bottom</code> - adds bottom border to element</li>
</ul>
<div class="example-box">
<div class="example-box-title">Example</div>
<div class="example-box-content">
<div class="border-bottom">Element with border-bottom.</div>
</div>
</div>
<pre class="prettyprint">
<div class="pb-10 border-bottom">Element with border-bottom.</div>
</pre>
<h3>Heights & vertical center position</h3>
<p>The template allows to set minimial height of block html element. It is possible by using <code>.h-[value]</code> class.<br>
<small>[value] is a number from 100 to 900 with 100 gap or sm (40% of viewport), md (60% of viewport) and lg (80% of viewport)</small>.</p>
<p>By <code>.fullheight</code> class you set elements height equal to the browser viewport height.</p>
<p>Using <code>.v-center</code> class makes element positioned vertically center in relation to the parent.</p>
<div class="example-box">
<div class="example-box-title">Example</div>
<div class="example-box-content">
<div class="bg-light h-200">
<h2 class="text-center v-center mb-0">H2 inside 200px container.</h2>
</div>
</div>
</div>
<pre class="prettyprint">
<div class="bg-light h-200">
<h2 class="text-center mb-0 v-center">H2 inside 200px container.</h2>
</div>
</pre>
<p class="lead">More useful helper classes are listed on <a href="http://v4-alpha.getbootstrap.com/css/#helper-classes" target="_blank" class="text-primary">Bootstrap's 4 website</a>!</p>
</div>
</div>
<!-- Configuration -->
<div id="configuration" class="py-5">
<h1 class="border-bottom pb-3">Configuration</h1>
<p class="lead">The template includes some configurable elements - here you will find informations how to use them!</p>
<!-- Google Maps -->
<div id="configuration-googleMap" class="py-3">
<h2>Google Map</h2>
<p>Google Maps require to set your own API key - <a href="https://developers.google.com/maps/documentation/javascript/get-api-key">click here</a> for more informations how to generate it. To put it into the template please run <a href="#development">development mode</a> and paste it into <code>js/modules/google-map.js</code> file</p>
<p>To latitude and longitude parameters just please edit <code>data-latitude</code> and <code>data-longitude</code> attributes of <code>#google-map</code> element. To get it please visit site like <a href="http://itouchmap.com/latlong.html" class="text-primary" target="_blank">this</a>.</p>
<div class="example-box">
<div class="example-box-title">Example</div>
<div class="example-box-content">
<div class="google-map h-500 shadow" data-lat="50.064651" data-lon="19.944981"></div>
</div>
</div>
<pre class="prettyprint">
<div class="google-map h-500 shadow" data-lat="50.064651" data-lon="19.944981" data-style="dream"></div></pre>
</div>
<!-- Contact Form -->
<div id="configuration-bookingForm" class="py-3">
<h2>Booking Form</h2>
<p>To configure booing form please open <strong>booking-form.php</strong> file from <strong>/assets/php</strong> directory and go the line with an e-mail address to change it to your own - like this.</p>
<pre class="prettyprint">
$emailTo = 'your@email.com';</pre>
<p>After that you will recieve the messages from your websites to this e-mail address.</p>
<div class="alert alert-warning"><strong>SentMail</strong> function must be enabled on your hositng. Otherway I recommend use and configure plugin like "PHPMailer".</div>
</div>
<!-- Sign Up Form -->
<div id="configuration-signupForm" class="py-3">
<h2>SignUp Form</h2>
<p class="lead">SignUp form is made with <a href="http://mailchimp.com/" class="text-primary" target="_blank">Mailchimp</a> API.</p>
<h3>How to create the form?</h3>
<div class="alert alert-info">To create Sign Up form you have to have an account on <a href="http://mailchimp.com/" target="_blank"><strong>Mailchimp</strong></a> site.</div>
<ol>
<li>Log into the <a href="http://mailchimp.com/" class="text-primary" target="_blank">Mailchimp</a> site.</li>
<li>Create subscribers list.
<img src="assets/img/docs/signup01.png" alt="" class="block"></li>
<li>Get into the list and go to "Signup forms" tab.
<img src="assets/img/docs/signup02.png" alt="" class="block"></li>
<li>Pick "Embedded forms".
<img src="assets/img/docs/signup03.png" alt="" class="block"></li>
<li>Pick "Classic version" and copy / paste somewhere generated code (don't change anything).</li>
<li>Find <code>form</code> selector and copy <code>action</code> atribute valuse into your form. Remember to add <code>method="POST"</code> attribute.</li>
<li>Modify action URI by changing <code>.../post?...</code> to <code>.../post-json?...</code>. It should look like this <code>action="//suelo.us12.list-manage.com/subscribe/post-json?u=ed47dbfe167d906f2bc46a01b&id=24ac8a22ad"</code></li>
<li>Find email input and copy <code>type</code>, <code>name</code> and <code>id</code> to your input - it should look like this: <code><input type="email" value="" name="EMAIL" class="form-control input-lg" id="mce-EMAIL"></code></li>
<li>Find input which prevents bot signups and paste it somewhere in the form - it should be hidden!
<img src="assets/img/docs/signup04.png" alt="" class=" mt-20 mb-20 block"></li>
<li>Add submit button and enjoy your working Sign Up form!</li>
</ol>
</div>
<!-- Local Scroll -->
<div id="configuration-localScroll" class="py-3">
<h2>Local Scroll</h2>
<p>If you want to use local scroll somewhere in the content please add <code>data-local-scroll</code> attribute in the parent selector of a link to local selector.</p>
</div>
<!-- Animations -->
<div id="configuration-animations" class="py-3">
<h2>Aniamtions</h2>
<p class="lead">The template allows to add really cool animations for each of html elements. Let's check how to use it!</p>
<h3>Entrance animation</h3>
<p>This animation fires when element appears in the browser viewport. To add such animation you need to place <code>.animated</code> class in the animted element and preciese which animation do you want to use by <code>data-animation</code>attribute. It is also possible to add some delay to the animation (in ms) by <code>data-animation-delay</code> attribute.</p>
<div class="example-box">
<div class="example-box-title">Example</div>
<div class="example-box-content">
<span class="icon icon-lg icon-secondary icon-circle animated" data-animation="fadeInRight"><i class="ti ti-heart"></i></span>
<span class="icon icon-lg icon-primary icon-circle animated" data-animation="bounceIn" data-animation-delay="400"><i class="ti ti-star"></i></span>
</div>
</div>
<pre class="prettyprint html-code">
<span class="icon icon-lg icon-secondary icon-circle animated" data-animation="fadeInRight"><i class="ti ti-heart"></i></span>
<span class="icon icon-lg icon-primary icon-circle animated" data-animation="bounceIn" data-animation-delay="400"><i class="ti ti-star"></i></span></pre>
</div>
<!-- Cart -->
<div id="configuration-cart" class="py-3">
<h2>Cart</h2>
<p class="lead">The template contains two shopping cart components located in <code>./src/js/modules</code> directory.</p>
<h3><code>cart.js</code></h3>
<p>The first one is based on JSON and localStore and it. It requires to receive JSON structure with menu categories and items.</p>
<pre class="prettyprint">
const JSON_CATEGORIES = './data/categories.json'
const JSON_MENU = './data/menu.json'
const JSON_DELIVERY = './data/delivery.json'</pre>
<h4><code>categories.json</code></h4>
<pre class="prettyprint">
[
{
"id": 1,
"name": "Burgers",
"additions": [
{
"id": 1,
"name": "Chicken",
"price": 2.0
},
{
"id": 2,
"name": "Angus Beef",
"price": 5.0
}
...
]
},
...
}</pre>
<h4><code>menu.json</code></h4>
<pre class="prettyprint">
[
{
"id": 1,
"categoryId": 1,
"name": "Beef Burger",
"price": 9.0,
"ingredients": ["Beef", "Cheese", "Potato", "Onion", "Fries"],
"sizes": [
{
"id": 1,
"active": true,
"name": "Normal",
"value": "200g",
"price": 9.0
},
{
"id": 2,
"active": false,
"name": "Double",
"value": "400g",
"price": 12.0
}
]
},
...
]</pre>
<h4><code>delivery.json</code></h4>
<pre class="prettyprint">
{
"price": 4.0
}</pre>
<p>It is fully working solution.</p>
<h3><code>cart-basic.js</code></h3>
<p>Basic version of the cart contains methods to show / hide modal and panel.</p>
<p>To set the aprriopriate module for you please update the import path e.g. <br><code>import Cart from './modules/cart'</code></p>
<h3>Entrance animation</h3>
<p>This animation fires when element appears in the browser viewport. To add such animation you need to place <code>.animated</code> class in the animted element and preciese which animation do you want to use by <code>data-animation</code>attribute. It is also possible to add some delay to the animation (in ms) by <code>data-animation-delay</code> attribute.</p>
<div class="example-box">
<div class="example-box-title">Example</div>
<div class="example-box-content">
<span class="icon icon-lg icon-secondary icon-circle animated" data-animation="fadeInRight"><i class="ti ti-heart"></i></span>
<span class="icon icon-lg icon-primary icon-circle animated" data-animation="bounceIn" data-animation-delay="400"><i class="ti ti-star"></i></span>
</div>
</div>
<pre class="prettyprint html-code">
<span class="icon icon-lg icon-secondary icon-circle animated" data-animation="fadeInRight"><i class="ti ti-heart"></i></span>
<span class="icon icon-lg icon-primary icon-circle animated" data-animation="bounceIn" data-animation-delay="400"><i class="ti ti-star"></i></span></pre>
</div>
</div>
<!-- Files & Credits -->
<div id="files" class="py-5">
<h1 class="border-bottom pb-3">Files & Credits</h1>
<!-- CSS Files -->
<div id="files-cssFiles" class="py-3">
<h2>CSS Files</h2>
<p class="lead">The template uses two CSS files:</p>
<pre class="prettyprint">
<!-- CSS Core -->
<link rel="stylesheet" href="dist/css/core.css" />
<!-- CSS Theme -->
<link id="theme" rel="stylesheet" href="dist/css/theme-[color].min.css" />
</pre>
<p class="lead">CSS Core is bundled stylesheet with all third-part styles.</p>
<p class="lead">CSS Theme is a main theme stylesheet and it is divided into following sections:</p>
<pre class="prettyprint">
1. Setup
2. Basic
3. Header
-- 4.1 Header Mobile
-- 4.2 Navigation Desktop
4. Content
-- 4.1 Blog
-- 4.2 Features
-- 4.3 Menu
-- 4.4 Other
-- 4.5 Page Title
-- 4.6 Sections
5. Footer
6. Elements
-- 6.1 Alerts
-- 6.2 Backgrounds
-- 6.3 Badges
-- 6.4 Buttons
-- 6.5 Carousel
-- 6.6 Forms
-- 6.7 Icons
-- 6.8 Loader
-- 6.9 Modals
-- 6.10 Navigations
-- 6.11 Notification Bar
-- 6.12 Other
-- 6.13 Pagination
-- 6.14 Testimonials
-- 6.15 Typography
7. Widgets
8. Animations
</pre>
<p>CSS Theme is also available in couple of diffrent color versions:</p>
<pre class="prettyprint">
theme-beige.css
theme-blue.css
theme-green.css
theme-mint.css
theme-orange.css
theme-red.css
theme-teal.css
</pre>
</div>
<!-- SASS Files -->
<div id="files-sassFiles" class="py-3">
<h2>SCSS Files</h2>
<p class="lead">CSS files are generated thanks to well organized SCSS files.</p>
<pre class="prettyprint">
├── _animations.scss
├── _base.scss
├── _basics.scss
├── _config.scss
├── _content
│ ├── _blog.scss
│ ├── _features.scss
│ ├── _menu.scss
│ ├── _other.scss
│ ├── _page-title.scss
│ └── _sections.scss
├── _content.scss
├── _elements
│ ├── _alerts.scss
│ ├── _backgrounds.scss
│ ├── _badges.scss
│ ├── _buttons.scss
│ ├── _carousel.scss
│ ├── _forms.scss
│ ├── _icons.scss
│ ├── _loader.scss
│ ├── _modals.scss
│ ├── _navs.scss
│ ├── _notification-bar.scss
│ ├── _other.scss
│ ├── _pagination.scss
│ ├── _panel-cart.scss
│ └── _typography.scss
├── _elements.scss
├── _footer.scss
├── _header
│ ├── _header-mobile.scss
│ └── _navigation-desktop.scss
├── _header.scss
├── _setup.scss
├── _widgets.scss
├── package.json
├── theme-beige.scss
├── theme-blue.scss
├── theme-green.scss
├── theme-mint.scss
├── theme-orange.scss
├── theme-red.scss
└── theme-teal.scss
</pre>
<ul class="list-unstyled">
<li><code>theme-[color-scheme].scss</code> is a main SCSS file where main colors have been set.</li>
<li><code>_base.css</code> file is a base for each theme which imports other partials.</li>
<li><code>_config.css</code> file with SASS variables which configure colors, fonts and more.</li>
</ul>
<div class="alert alert-info" data-local-scroll>
Go to <a href="#development" class="font-italic">Development</a> to check how to compile SASS.
</div>
</div>
<!-- JS Files -->
<div id="files-jsFiles" class="py-3">
<h2>JavaScript Files</h2>
<p class="lead">The core of this template is <code>src/js/core.js</code> file which imports all third-part plugins and custom modules. It is bundled by Webpack powered by various loaders so it contains either JS and CSS/SCSS files.</p>
<h5>Custom Modules</h5>
<pre class="prettyprint">
import BackToTop from './modules/back-to-top'
import Background from './modules/background'
import Carousel from './modules/carousel'
import Cart from './modules/cart'
import Collapse from './modules/collapse'
import Cookies from './modules/cookies'
import Components from './modules/components'
import CustomControl from './modules/custom-control'
import Forms from './modules/forms'
import GoogleMap from './modules/google-map'
import Navigation from './modules/navigation'
import Modal from './modules/modal'
import PageTransition from './modules/page-transition'
import Parallax from './modules/parallax'
import Sticky from './modules/sticky'
import Twitter from './modules/twitter'
import Docs from './modules/docs'
</pre>
<p class="lead">The output of the core JS file is placed at the bottom of the body of each HTML file.</p>
<pre class="prettyprint">
<script src="dist/js/core.js"></script>
</pre>
</div>
<!-- PHP Files -->
<div id="files-phpFiles" class="py-3">
<h2>PHP Files</h2>
<p class="lead">The template includes few PHP scripts:</p>
<ul class="list-unstyled">
<li><code>php/booking-form.php</code> - configuration file for contact form</li>
</ul>
</div>
<!-- Credits -->
<div id="files-credits" class="py-3">
<h2>Credits</h2>
<h3>Fonts:</h3>
<ol>
<li><strong>Oswald</strong> - <a href="https://fonts.google.com/specimen/Oswald" class="text-primary" target="_blank">https://fonts.google.com/specimen/Oswald</a></li>
<li><strong>Raleway</strong> - <a href="https://fonts.google.com/specimen/Raleway" class="text-primary" target="_blank">https://fonts.google.com/specimen/Raleway</a></li>
</ol>
<h3>Icons:</h3>
<ol>
<li><strong>Themify Icons</strong> - <a href="http://themify.me/themify-icons" class="text-primary" target="_blank">http://themify.me/themify-icons</a></li>
<li><strong>Font Awesome</strong> - <a href="fontawesome.io/" class="text-primary" target="_blank">fontawesome.io/</a></li>
</ol>
<h3>Libraries:</h3>
<ol>
<li><strong>jQuery</strong> - <a href="http://jquery.com/" class="text-primary" target="_blank">http://jquery.com/</a></li>
<li><strong>Bootstrap 4</strong> - <a href="http://getbootstrap.com/" class="text-primary" target="_blank">http://v4-alpha.getbootstrap.com/</a></li>
</ol>
<h3>Plugins:</h3>
<ol>
<li><strong>Appear</strong> - <a href="http://morr.github.io/appear.html" class="text-primary" target="_blank">http://morr.github.io/appear.html</a></li>
<li><strong>ScrollTo</strong> - <a href="https://github.com/flesler/jquery.scrollTo" class="text-primary" target="_blank">https://github.com/flesler/jquery.scrollTo</a></li>
<li><strong>Validate</strong> - <a href="https://jqueryvalidation.org/" class="text-primary" target="_blank">https://jqueryvalidation.org/</a></li>
<li><strong>Twitter Post Fetcher</strong> - <a href="https://github.com/jasonmayes/Twitter-Post-Fetcher" class="text-primary" target="_blank">https://github.com/jasonmayes/Twitter-Post-Fetcher</a></li>
<li><strong>Slick</strong> - <a href="http://kenwheeler.github.io/slick/" class="text-primary" target="_blank">http://kenwheeler.github.io/slick/</a></li>
<li><strong>Prettify</strong> - <a href="https://github.com/google/code-prettify" class="text-primary" target="_blank">https://github.com/google/code-prettify</a></li>
<li><strong>Skrollr</strong> - <a href="https://github.com/Prinzhorn/skrollr" class="text-primary" target="_blank">https://github.com/Prinzhorn/skrollr</a></li>
<li><strong>Animsition</strong> - <a href="http://git.blivesta.com/animsition/" class="text-primary" target="_blank">http://git.blivesta.com/animsition/</a></li>
</ol>
<h3>Images:</h3>
<p class="lead">Some images used in the template was free and have been <strong>included in a package</strong>. Rest of them was blurred becouse of licensing reasons.</p>
<ul class="list-unstyled text-xs">
<li><a href="https://www.pexels.com/photo/sliced-oranges-kiwi-melon-blueberry-and-dragonfruit-on-white-ceramic-platter-218844/">https://www.pexels.com/photo/sliced-oranges-kiwi-melon-blueberry-and-dragonfruit-on-white-ceramic-platter-218844/</a></li>
<li><a href="https://www.pexels.com/photo/white-ceramic-round-plate-on-round-brown-ornament-24859/">https://www.pexels.com/photo/white-ceramic-round-plate-on-round-brown-ornament-24859/</a></li>
<li><a href="https://www.pexels.com/photo/pasta-with-vegetable-on-white-ceramic-round-plate-169743/">https://www.pexels.com/photo/pasta-with-vegetable-on-white-ceramic-round-plate-169743/</a></li>
<li><a href="https://www.pexels.com/photo/table-in-vintage-restaurant-6267/">https://www.pexels.com/photo/table-in-vintage-restaurant-6267/</a></li>
<li><a href="https://www.pexels.com/photo/chocolate-and-cherry-top-cake-129893/">https://www.pexels.com/photo/chocolate-and-cherry-top-cake-129893/</a></li>
<li><a href="https://www.pexels.com/photo/red-drink-on-clear-glass-with-lemon-on-top-160150/">https://www.pexels.com/photo/red-drink-on-clear-glass-with-lemon-on-top-160150/</a></li>
<li><a href="https://www.pexels.com/photo/top-view-of-silver-macbook-beside-pumpkin-and-brown-wooden-tray-204693/">https://www.pexels.com/photo/top-view-of-silver-macbook-beside-pumpkin-and-brown-wooden-tray-204693/</a></li>
<li><a href="https://www.pexels.com/photo/food-pizza-slice-fast-food-7907/">https://www.pexels.com/photo/food-pizza-slice-fast-food-7907/</a></li>
<li><a href="https://www.pexels.com/photo/chopsticks-food-meal-sushi-80841/">https://www.pexels.com/photo/chopsticks-food-meal-sushi-80841/</a></li>
<li><a href="https://www.pexels.com/photo/food-restaurant-meal-chicken-106343/">https://www.pexels.com/photo/food-restaurant-meal-chicken-106343/</a></li>
<li><a href="https://www.pexels.com/photo/burger-in-white-textile-52570/">https://www.pexels.com/photo/burger-in-white-textile-52570/</a></li>
<li><a href="https://www.pexels.com/photo/pasta-dish-on-white-plate-26646/">https://www.pexels.com/photo/pasta-dish-on-white-plate-26646/</a></li>
<li><a href="https://www.pexels.com/photo/avocado-ceramic-plate-chopsticks-culture-343870/">https://www.pexels.com/photo/avocado-ceramic-plate-chopsticks-culture-343870/</a></li>
<li><a href="https://www.pexels.com/photo/person-holding-clear-shot-glass-in-front-of-black-wooden-table-63943/">https://www.pexels.com/photo/person-holding-clear-shot-glass-in-front-of-black-wooden-table-63943/</a></li>
<li><a href="https://www.pexels.com/photo/wine-glass-on-restaurant-table-225228/">https://www.pexels.com/photo/wine-glass-on-restaurant-table-225228/</a></li>
<li><a href="https://www.pexels.com/photo/table-with-plates-and-flowers-filed-neatly-selective-focus-photography-169190/">https://www.pexels.com/photo/table-with-plates-and-flowers-filed-neatly-selective-focus-photography-169190/</a></li>
<li><a href="https://www.pexels.com/photo/bar-blur-candle-celebration-299550/">https://www.pexels.com/photo/bar-blur-candle-celebration-299550/</a></li>
<li><a href="https://www.pexels.com/photo/black-and-copper-pen-169657/">https://www.pexels.com/photo/black-and-copper-pen-169657/</a></li>
<li><a href="https://www.pexels.com/photo/board-bread-breakfast-bunch-349610/">https://www.pexels.com/photo/board-bread-breakfast-bunch-349610/</a></li>
<li><a href="https://www.pexels.com/photo/restaurant-people-alcohol-bar-2286/">https://www.pexels.com/photo/restaurant-people-alcohol-bar-2286/</a></li>
<li><a href="https://www.pexels.com/photo/restaurant-bottles-dinner-lunch-66640/">https://www.pexels.com/photo/restaurant-bottles-dinner-lunch-66640/</a></li>
<li><a href="https://www.pexels.com/photo/brown-city-bike-near-person-wearing-white-and-black-shirt-white-sitting-outside-store-126371/">https://www.pexels.com/photo/brown-city-bike-near-person-wearing-white-and-black-shirt-white-sitting-outside-store-126371/</a></li>
<li><a href="https://www.pexels.com/photo/city-restaurant-table-pavement-4309/">https://www.pexels.com/photo/city-restaurant-table-pavement-4309/</a></li>
<li><a href="https://www.pexels.com/photo/close-up-of-hand-holding-coffee-cup-302902/">https://www.pexels.com/photo/close-up-of-hand-holding-coffee-cup-302902/</a></li>
<li><a href="https://www.pexels.com/photo/bread-food-sandwich-healthy-109400/">https://www.pexels.com/photo/bread-food-sandwich-healthy-109400/</a></li>
<li><a href="https://unsplash.com/search/photos/burger?photo=X9Za3VjKIgc">https://unsplash.com/search/photos/burger?photo=X9Za3VjKIgc</a></li>
</ul>
<h3>Videos:</h3>
<ul class="list-unstyled text-xs">
<li><a href="https://www.pexels.com/pl-pl/video/3296399/">https://www.pexels.com/pl-pl/video/3296399/</a></li>
<li><a href="https://www.pexels.com/pl-pl/video/2758322/">https://www.pexels.com/pl-pl/video/2758322/</a></li>
</ul>
</div>
<!-- Credits -->
<div id="files-changelog" class="py-3">
<h2>Changelog</h2>
<p class="lead">What has changed since first version?</p>
<pre>
Changelog
===============================================================
v 2.00 - 22.05.2020
---------------------------------------------------------------
ADD - Fresh Home Page
ADD - Dark Home Page
ADD - JSON / locaStorage based shopping cart
ADD - Cookies Popup
ADD - COVID-19 Modal
UPDATE - Developer Environment
UPDATE - Files structure
FIX - Minor Fixes
### Files affected
ADDED - index-fresh.html
ADDED - index-dark.html
ADDED - dist/theme-teal.css
ADDED - dist/core.css
ADDED - dist/theme-beige.css
ADDED - dist/theme-blue.css
ADDED - dist/theme-green.css
ADDED - dist/theme-mint.css
ADDED - dist/theme-orange.css
ADDED - dist/theme-red.css
ADDED - dist/js/core.js
ADDED - src/js/modules/twitter.js
ADDED - src/js/modules/styleswitcher.js
ADDED - src/js/modules/sticky.js
ADDED - src/js/modules/parallax.js
ADDED - src/js/modules/scroll.js
ADDED - src/js/modules/navigation.js
ADDED - src/js/modules/page-transition.js
ADDED - src/js/modules/google-map.js
ADDED - src/js/modules/modal.js
ADDED - src/js/modules/docs.js
ADDED - src/js/modules/forms.js
ADDED - src/js/modules/cookies.js
ADDED - src/js/modules/custom-control.js
ADDED - src/js/modules/collapse.js
ADDED - src/js/modules/components.js
ADDED - src/js/modules/cart.js
ADDED - src/js/modules/cart-basic.js
ADDED - src/js/modules/carousel.js
ADDED - src/js/modules/background.js
ADDED - src/js/modules/back-to-top.js
ADDED - src/js/modules/animations.js
REMOVED - assets/scss/*
REMOVED - assets/css/*
v 1.01 - 15.09.2017
---------------------------------------------------------------
ADD - Burger's Home Page
FIX - Minor Fixes
### Files affected
ADDED - index-burgers.html
UPDATE - css/themes/*.css
</pre>
</div>
</div>
<!-- Files & Credits / End -->
<!-- Development -->
<div id="development" class="py-5">
<h1 class="border-bottom pb-3">Development</h1>
<p>The source of the template is located in <code>./src/</code> directory. Whole template is based on Webpack which bundles the source files into <code>./dist/</code> folder.</p>
<p>The template is powered by NPM. The <code>package.json</code> contains three main scripts:</p>
<pre class="prettyprint">
"scripts": {
"dev": "webpack --config build/webpack.dev.conf.js",
"build": "webpack --config build/webpack.prod.conf.js"
"validate": "grunt validation"
}
</pre>
<p>You can invoke these scripts using e.g. <code>npm run dev</code> command.</p>
<ul class="list-unstyled">
<li><code>npm run dev</code> - starts development mode with BrowserSync server and JS/SCSS bundler.</li>
<li><code>npm run build</code> - builds minified JS/CSS files.</li>
<li><code>npm run validate</code> - runs HTML validation.</li>
</ul>
<alert class="alert-info">Plese note to install all dependencies by <code>npm install</code> command before staring development process.</alert>
</div>
</div>
<div class="col-md-3 hidden-sm hidden-xs">
<nav id="side-navigation" class="stick-to-content pt-5" data-local-scroll>
<ul class="nav nav-vertical">
<li class="nav-item">
<a class="nav-link" href="#start"><span>Getting Started</span></a>
<ul class="nav nav-vertical">
<li class="nav-item"><a class="nav-link" href="#start-htmlStructure"><span>HTML Structure</span></a></li>
<li class="nav-item"><a class="nav-link" href="#start-grid"><span>Grid System</span></a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#elements"><span>Content</span></a>
<ul class="nav nav-vertical">
<li class="nav-item"><a class="nav-link" href="#elements-typography"><span>Typography</span></a></li>
<li class="nav-item"><a class="nav-link" href="#elements-code"><span>Code</span></a></li>
<li class="nav-item"><a class="nav-link" href="#elements-images"><span>Images</span></a></li>
<li class="nav-item"><a class="nav-link" href="#elements-icons"><span>Icons</span></a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#components"><span>Components</span></a>
<ul class="nav nav-vertical">
<li class="nav-item"><a class="nav-link" href="#components-alerts"><span>Alerts</span></a></li>
<li class="nav-item"><a class="nav-link" href="#components-buttons"><span>Buttons</span></a></li>
<li class="nav-item"><a class="nav-link" href="#components-forms"><span>Forms</span></a></li>
<li class="nav-item"><a class="nav-link" href="#components-pagination"><span>Pagination</span></a></li>
<li class="nav-item"><a class="nav-link" href="#components-tabs"><span>Tabs</span></a></li>
<li class="nav-item"><a class="nav-link" href="#components-modal"><span>Modal</span></a></li>
<li class="nav-item"><a class="nav-link" href="#components-videoModal"><span>Video Modal</span></a></li>
<li class="nav-item"><a class="nav-link" href="#components-carousel"><span>Carousel</span></a></li>
<li class="nav-item"><a class="nav-link" href="#components-badges"><span>Badges</span></a></li>
<li class="nav-item"><a class="nav-link" href="#components-tooltip"><span>Tooltip</span></a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#utilities"><span>Utilities</span></a>
<ul class="nav nav-vertical">
<li class="nav-item"><a class="nav-link" href="#utilities-colors"><span>Available Colors</span></a></li>
<li class="nav-item"><a class="nav-link" href="#utilities-classes"><span>Helper Classes</span></a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#configuration"><span>Configuration</span></a>
<ul class="nav nav-vertical">
<li class="nav-item"><a class="nav-link" href="#configuration-googleMap"><span>Google Map</span></a></li>
<li class="nav-item"><a class="nav-link" href="#configuration-bookingForm"><span>Booking Form</span></a></li>
<li class="nav-item"><a class="nav-link" href="#configuration-signupForm"><span>Sign Up Form</span></a></li>
<li class="nav-item"><a class="nav-link" href="#configuration-localScroll"><span>Local Scroll</span></a></li>
<li class="nav-item"><a class="nav-link" href="#configuration-animations"><span>Animations</span></a></li>
<li class="nav-item"><a class="nav-link" href="#configuration-cart"><span>Cart</span></a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#files"><span>Files & Credits</span></a>
<ul class="nav nav-vertical">
<li class="nav-item"><a class="nav-link" href="#files-cssFiles"><span>CSS Files</span></a></li>
<li class="nav-item"><a class="nav-link" href="#files-sassFiles"><span>SASS Files</span></a></li>
<li class="nav-item"><a class="nav-link" href="#files-jsFiles"><span>JavaScript Files</span></a></li>
<li class="nav-item"><a class="nav-link" href="#files-phpFiles"><span>PHP Files</span></a></li>
<li class="nav-item"><a class="nav-link" href="#files-credits"><span>Credits</span></a></li>
<li class="nav-item"><a class="nav-link" href="#files-changelog"><span>Changelog</span></a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#development"><span>Development</span></a>
</li>
</ul>
</nav>
</div>
</div>
</section>
<!-- Footer -->
<footer id="footer" class="bg-dark dark">
<div class="container">
<!-- Footer 1st Row -->
<div class="footer-first-row row">
<div class="col-lg-3 text-center">
<a href="index.html"><img src="assets/img/logo-light.svg" alt="" width="88" class="mt-5 mb-5"></a>
</div>
<div class="col-lg-4 col-md-6">
<h5 class="text-muted">Latest news</h5>
<ul class="list-posts">
<li>
<a href="blog-post.html" class="title">How to create effective webdeisign?</a>
<span class="date">February 14, 2015</span>
</li>
<li>
<a href="blog-post.html" class="title">Awesome weekend in Polish mountains!</a>
<span class="date">February 14, 2015</span>
</li>
<li>
<a href="blog-post.html" class="title">How to create effective webdeisign?</a>
<span class="date">February 14, 2015</span>
</li>
</ul>
</div>
<div class="col-lg-5 col-md-6">
<h5 class="text-muted">Subscribe Us!</h5>
<!-- MailChimp Form -->
<form action="//suelo.us12.list-manage.com/subscribe/post-json?u=ed47dbfe167d906f2bc46a01b&id=24ac8a22ad" id="sign-up-form" class="sign-up-form validate-form mb-5" method="POST">
<div class="input-group">
<input name="EMAIL" id="mce-EMAIL" type="email" class="form-control" placeholder="Tap your e-mail..." required>
<span class="input-group-btn">
<button class="btn btn-primary btn-submit" type="submit">
<span class="description">Subscribe</span>
<span class="success">
<svg x="0px" y="0px" viewBox="0 0 32 32"><path stroke-dasharray="19.79 19.79" stroke-dashoffset="19.79" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11"/></svg>
</span>
<span class="error">Try again...</span>
</button>
</span>
</div>
</form>
<h5 class="text-muted mb-3">Social Media</h5>
<a href="#" class="icon icon-social icon-circle icon-sm icon-facebook"><i class="fa fa-facebook"></i></a>
<a href="#" class="icon icon-social icon-circle icon-sm icon-google"><i class="fa fa-google"></i></a>
<a href="#" class="icon icon-social icon-circle icon-sm icon-twitter"><i class="fa fa-twitter"></i></a>
<a href="#" class="icon icon-social icon-circle icon-sm icon-youtube"><i class="fa fa-youtube"></i></a>
<a href="#" class="icon icon-social icon-circle icon-sm icon-instagram"><i class="fa fa-instagram"></i></a>
</div>
</div>
<!-- Footer 2nd Row -->
<div class="footer-second-row">
<span class="text-muted">Copyright Soup 2020©. Made with love by Suelo.</span>
</div>
</div>
</footer>
<!-- Footer / End -->
</div>
<!-- Content / End -->
</div>
<!-- JS Core -->
<script src="../dist/js/core.js"></script>
</body>
</html>