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,
		},
	},
	...
},

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

Owl carousel 2#

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