Plugins

Giving your sparrow power ups

Adding new plugins #

Adding a new plugin to your Sparrow is simple. You 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:

npm install typed.js -S

Step 2:

In your gulpfile.js, add the plugin at the end of the Paths.DEPENDENCIES variable. eg:

Paths = {
	... 
	DEPENDENCIES: {
		...
		'typed.js': {
			FROM: 'node_modules/typed.js/lib/typed.js',
			TO: JS,
		},
	},
	...
},
or
Paths = {
	... 
	DEPENDENCIES: {
		...
		'typed.js': {
			FROM: 'node_modules/typed.js/lib/*.*',
			TO: lib,
		},
	},
	...
},

Here, JS refers to pages/assets/js and lib refers to pages/assets/lib, where gulp will copy files from the typed.js plugin. We use the JS folder when we need only the js files from the plugin. Otherwise, we use the lib folder for plugins like owl.carousel

Step 3:

Run the following command:

gulp copy:dependency

Built-in plugins #

Date countdown #

A simple and html agnostic date countdown plugin for jQuery

Implementation in sparrow - Full Documentation

Isotope #

Filter & sort magical layouts.

Masonry - Filter - Full Documentation

Lightbox is a JavaScript library that displays images and videos by filling the screen, and dimming out the rest of the web page.

Implementation in sparrow - Full Documentation

Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.

Implementation in sparrow - Full Documentation

Plyr #

A simple, accessible and customisable media player for Video, Audio, YouTube and Vimeo.

Implementation in sparrow - Full Documentation

ProgressBar.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.

Implementation in sparrow - Full Documentation

Rellax #

Rellax is a buttery smooth, super lightweight (1021bytes gzipped), vanilla javascript parallax library.

Implementation in sparrow - Full Documentation

Remodal #

Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.

Implementation in sparrow - Full Documentation

Semantic UI (Accordion) #

An accordion allows users to toggle the display of sections of content.

Implementation in sparrow - Full Documentation

jQuery.mb.YTPlayer #

An HTML5 Background player for YouTube video.

Implementation in sparrow - Full Documentation

Typed text #

A JavaScript library that types out, deletes them, and then types again.

Implementation in Sparrow - Full Documentation

Loaders.css #

Delightful and performance-focused pure css loading animations.

Full Documentation

FancyBox 3 #

JavaScript lightbox library for presenting various types of media. Responsive, touch-enabled and customizable.

Implementation in Sparrow - Full Documentation

Sticky Kit #

Sticky-kit provides an easy way to attach elements to the page when the user scrolls such that the element is always visible.

Use class="sticky-kit" on any dom element to make it sticky relative to it's parent.

Full Documentation

GreenSock #

Ultra high-performance, professional-grade animation for the modern web.

Implementation in Sparrow - Full Documentation