Plugins
Adding new plugins#
Adding a new plugin to your theme is simple.Here are two ways you can do that.
Simple approach
Place your new plugin in pages/assets/lib
folder. Eg: to add the typed.js
plugin, we will download it from here, unzip it and place the typed.js-master
folder in pages/assets/lib
folder.
Using NPM
Suppose we are installing the typed.js
plugin. Here are the steps:
Step 1:
Paths = {
...
DEPENDENCIES: {
...
'typed.js': {
FROM: 'node_modules/typed.js/lib/*.*',
TO: lib,
},
},
...
},
Here, lib
refers to pages/assets/lib
, where gulp will copy files from the typed.js
plugin. We actually use the lib
folder to store neccassary plugins
Step 3:
Run the following command:
gulp copy:dependency
Built-in plugins
Bootstrap Wizard#
This twitter bootstrap plugin builds a wizard out of a formatter tabbable structure
Implementation in theme - Full DocumentationChart.js#
Data Table#
DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, build upon the foundations of progressive enhancement, that adds all of these advanced features to any HTML table.
Implementation in theme - Full DocumentationDate Countdown#
A simple and html agnostic date countdown plugin for jQuery.
Implementation in theme - Full DocumentationDate Picker#
Lightweight, powerful javascript datetimepicker with no dependencies.
Implementation in theme - Full DocumentationDraggable#
Dropzone#
DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews.
Implementation in theme - Full DocumentationEcharts.js#
A powerful, interactive charting and visualization library for browser.
Implementation in theme - Full DocumentationEmojioneArea#
Fancybox 3#
JavaScript lightbox library for presenting various types of media. Responsive, touch-enabled and customizable.
Implementation in theme - Full DocumentationFontAwesome 5#
Get vector icons and social logos on your website with Font Awesome, the web's most popular icon set and toolkit.
Implementation in theme - Full DocumentationGoogle Map#
Build customized, agile experiences that bring the real world to your users with static and dynamic maps, Street View imagery, and 360° views.
Implementation in theme - Full DocumentationIs.js#
Micro check plugin. Check types, regexps, presence, time and more...
Full DocumentationjQuery.mb.YtPlayer#
Jquery Validation#
The jQuery Validation Plugin provides drop-in validation for your existing forms, while making all kinds of customizations to fit your application really easy.
Implementation in theme - Full DocumentationLeaflet#
A powerful, interactive charting and visualization library for browser.
Implementation in theme - Full DocumentationLeaflet.markercluster#
Provides Beautiful Animated Marker Clustering functionality for Leaflet, a JS library for interactive maps.
Implementation in theme - Full DocumentationLeaflet.TileLayer.ColorFilter#
A simple and lightweight Leaflet plugin to apply CSS filters on map tiles..
Implementation in theme - Full DocumentationLightbox 2#
Lightbox is a script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.
Implementation in theme - Full DocumentationLodash#
A modern JavaScript utility library delivering modularity, performance, & extras.
Full DocumentationLottie Web#
Render After Effects animations natively on Web, Android and iOS, and React Native.
Implementation in theme - Full DocumentationOwl Carousel 2#
Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.
Implementation in theme - Full DocumentationPerfect Scrollbar#
Plyr#
A simple, accessible and customisable media player for Video, Audio, YouTube and Vimeo.
Implementation in theme - Full DocumentationProgressBar.js#
With ProgressBar.js
, it's easy to create responsive and stylish progress bars for the web. Animations perform well even on mobile devices. It provides a few built‑in shapes like Line
, Circle
and SemiCircle
but you can also create custom
shaped progress bars with any vector graphic editor.
Raty#
Select2#
Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.
Implementation in theme - Full DocumentationTinymce#
The world's most popular JavaScript library for rich text editing.
Implementation in theme - Full DocumentationToastr#
A toastr is a Javascript library for Gnome / Growl type non-blocking notifications. jQuery is required. The goal is to create a simple core library that can be customized and extended.
Implementation in theme - Full DocumentationTyped Text#
A JavaScript library that types out, deletes them, and then types again.
Implementation in theme - Full DocumentationFullCalendar#
Day.js#
Fast 2kB alternative to Moment.js with the same modern API.
Full Documentation