Plugins
This theme comes with pre-installed plugins that are ready to use in your project. Below you can find the complete list and description for each one of them.
Making use of plugins
In orer to use the installed plugins you will need to add the scripts manually into the page you are using it. We made it this way so you can have control over the resources used in a specific page so it can be better optimized for speed and development.
For most of the plugins all you have to do is to add a style <link> and a <script> tag in the head and the footer of your page. All plugin scripts have to be placed between the core scripts
(jquery, popper and bootstrap) and the theme.js file.
Most of the time you will need to add only a script in the footer. It should look like this:
CSS
<!-- Page plugins -->
<script src="PATH_TO_YOUR_PLUGIN"></script>
<!-- Theme CSS -->
<link type="text/css" href="../assets/css/theme.css" rel="stylesheet">JS
<!-- Core -->
<script src="/assets/vendor/jquery/jquery.min.js"></script>
<script src="/assets/vendor/popper/popper.min.js"></script>
<script src="/assets/js/bootstrap/bootstrap.min.js"></script>
<!-- Page plugins -->
<script src="PATH_TO_YOUR_PLUGIN"></script>
<!-- Theme JS -->
<script src="/assets/js/theme.js"></script>Bootstrap Select
Bootstrap-select is a jQuery plugin that utilizes Bootstrap’s dropdown.js to style and bring additional functionality to standard select elements.
JS
<script src="/assets/vendor/bootstrap-select/js/bootstrap-select.min.js"></script>Initialization
.selectpicker- Apply this class on any form select control.
Bootstrap Tagsinput
jQuery plugin providing a Twitter Bootstrap user interface for managing tags
Script
<script src="/assets/vendor/bootstrap-tagsinput/bootstrap-tagsinput.min.js"></script>Initialization
data-role="tagsinput"- Apply this attribute on any form input text control.
Font Awesome 5
Get vector icons and social logos on your website with Font Awesome, the web’s most popular icon set and toolkit.
Note: Font Awesome is already included on all pages by default.
Script
<script src="/assets/vendor/./assets/vendor/fontawesome/js/fontawesome-all.min.js" defer></script>Initialization
.fas- Apply Font Awesome's classes on
<i class="fas fa-heart"></>
Input mask
An input mask helps the user with the input by ensuring a predefined format. This can be usefull for dates, numerics, phone numbers and so on.
Script
<script src="/assets/vendor/input-mask/input-mask.min.js"></script>Initialization
.input-mask- Apply this class on any form input control.
data-mask="0000 0000"- Apply this attribute to apply the mask rule pattern.
NoUI Slider
noUiSlider is a range slider without bloat. It offers a ton off features, and it is as small, lightweight and minimal as possible, which is great for mobile use on the many supported devices, including iPhone, iPad, Android devices & Windows (Phone) 8 desktops, tablets and all-in-ones. It works on desktops too, of course!
Script
<script src="/assets/vendor/nouislider/js/nouislider.min.js"></script>Countdown
The Countdown is a plugin tailored to be used in any layout, without any CSS/HTML dependency. The goal was to fit and mimic differents countdown styles as you see out there in coupons and auction sites.
Script
<script src="/assets/vendor/countdown/js/jquery.countdown.min.js"></script>Initialization
.countdown- Apply this class on the countdown div.
data-countdown-date="12/01/2018"- Apply this attribute on the countdown element and add the final date in this forma: DD/MM/YY.
Count to
Type any number and animate it with this beautiful plugin that allows you to emphasize any milestone on you web page. We combined this plugin with a viewport checker script in order to start the counting animation when the elements eneters the visible area.
Script
<script src="/assets/vendor/viewportchecker/viewportchecker.min.js"></script>
<script src="/assets/vendor/count-to/count-to.min.js"></script>Initialization
.milestone-count- Apply this class to initialize the milestone counter.
data-from="0"- The number to start counting from. (default: 0)
data-to="500"- The number to stop counting at. (default: 100)
data-speed="1500"- The number of milliseconds it should take to finish counting. (default: 1000)
data-refresh-interval="100"- The number of milliseconds to wait between refreshing the counter. (default: 100)
Fancybox
JavaScript lightbox library for presenting various types of media. Responsive, touch-enabled and customizable.
CSS
<link type="text/css" href="/assets/vendor/fancybox/css/jquery.fancybox.min.css" rel="stylesheet">JS
<script src="/assets/vendor/fancybox/js/jquery.fancybox.min.js"></script>Initialization
data-fancybox- Add this attribute to your element. This will automatically bind click event that will start fancybox.
Swiper
Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps. Designed mostly for iOS, but also works great on latest Android, Windows Phone 8 and modern Desktop browsers
Typed JS
Typed.js is a library that types. Enter in any string, and watch it type at the speed you’ve set, backspace what it’s typed, and begin a new sentence for however many strings you’ve set.