Plugins

Website / Docs, GitHub, npm

Flickity creates responsive, touch-ready carousels from minimal markup.

Carousels in Wingman are initialised using Flickity via data attributes explained at the Flickity website.

Website / Docs, GitHub, npm

Smart Wizard is a flexible and heavily customizable jQuery step wizard plugin with Bootstrap support.

Wingman automatically initializes wizards which have the .wizard class.

See more on the Wingman Components page.

Website, Docs, GitHub, npm

A popper is an element on the screen which "pops out" from the natural flow of your application. Common examples of poppers are tooltips, popovers and drop-downs.

Wingman's navigation dropdowns rely on this plugin. Initialization of Popper is handled in bootstrap.js.

Website / Docs, GitHub, npm

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind.

Any code element in your HTML will be transformed automatically by an initialization in theme.js.

GitHub, npm

The scroll monitor allows us to receive events when elements enter or exit the viewport. It does this using watcher objects, which watch an element and trigger events.

Wingman uses scrollMonitor to manage 'sticky' elements that stick to the top of the window or beneath the nav.

You can make an element such as a .navbar or .navbar-dark stick to the viewport top by adding the data-sticky="top" attribute or if you want an in-page nav to scroll with the page, then stick below the main nav, use data-sticky="below-nav". If the sticky element has a section ancestor it will switch to stick to the bottom of that section when scrolled into view.

GitHub, npm

A lightweight script to animate scrolling to anchor links. This provides a better user experience for navigating one-page sites or long landing pages.

Wingman automatically applies the animation effect to all links with the data-smooth-scroll attribute.

You may have a nav which obscures the focussed element after it is scrolled to the top of the window. To avoid this, add the data-smooth-scroll-offset="110" where 110 is a value in pixels which matches the height of your nav.

GitHub, npm

A simple library for image zooming; as seen on Medium.

This is a vanilla javascript version of the zoom plugin created by fat.

Any image in Wingman can be enhanced with this effect by adding the data-action="zoom" attribute to the img tag.