Plugins

Website / Docs, GitHub, npm

Use Countdown to add a ticking timer to your pages. These are typically used on "coming soon" pages to indicate the launch date of a website.

Setting the date

Simply add the attribute data-countdown-date to any element (usually a span) and the countdown timer will be displayed as the content of the element.

The accepted date formats are:

• YYYY/MM/DD
• MM/DD/YYYY
• YYYY/MM/DD hh:mm:ss
• MM/DD/YYYY hh:mm:ss

<span data-countdown-date="2025-10-21"></span>

Change the Word "days"

To override the word days for translation purposes, use the data-days-text attribute. Eg. for Spanish language use data-days-text="dias".

<span data-countdown-date="2025-10-21" data-days-text="dias"></span>

The above example would render 72 dias 10:34:50.

Override the Format

To provide a different format for the countdown text use the data-date-format attribute. This will replace the default format, and will override the data-days-text option.

<span data-countdown-date="2025-10-21" data-date-format="`%D Days, %H Hours`"></span>

The above example would render 10 Days, 16 Hours. For a full list of formatting options, please consult the countdown docs.

Fallback String

To provide a fallback string for when the timer has elapsed (ie. when the target date has been reached) use the data-date-fallback attribute.

<span data-countdown-date="2025-10-21" data-date-fallback="The timer has elapsed..."></span>

Website / Docs, GitHub, npm

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

Carousels in Insight are initialized 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.

Insight automatically initializes wizards which have the .wizard class.

See more on the Insight Components page.

Website / Docs, GitHub, npm

Fancybox provides a gallery interface for a single image, or a group of images and can also display videos from Youtube or Vimeo.

Fancybox is initialized by adding data-fancybox to a link element. To group items and show them in the same gallery, give each link the same, data-fancybox ID, such as data-fancybox="gallery1". Each gallery on the page must use a unique ID.

The link should contain an image which serves as the thumbnail for the image item. The href of the link should point to the full-size image to be shown in the gallery.

A full list of options can be found in the docs at the fancybox website. Individual options can be configured by providing a JSON string in the data-options attribute. Single options can be added via paramaterizing the option name in a data attribute such as data-loop="true".

Docs, Get Api Key

Apply the data-maps-api-key attribute with a valid API key to any div to initialize your map element. The required Google Maps API script will then be automatically added to the page, and maps will initialize when the API loads.

The map div must be given a set height. You can achieve this by adding a height-* utility class.

Set the center of the map by providing either a data-address or data-latlong attribute. The string provided in data-address will be geocoded by Google.

<div class="height-30"
  data-maps-api-key="AIzaSyCfo_V3gmpPm1WzJEC9p_sRbgvyVbiO83M"
  data-address="State Library of Victoria">
</div>

Events:

loaded.mr.maps

You can access map instances by listening for the loaded.mr.maps event which will fire when the map has been centred at the specified location. The Google Map instance is passed in to the event as map.

The below example runs the same code on all maps on the page. It will set the center over Canada and change the zoom level to 3.

$(document).on('loaded.mr.maps', function(evt){
  evt.map.setCenter(new google.maps.LatLng(62.2270,105.3809));
  evt.map.setZoom(3);
});

See the Insight Components page for more options such as markers, info windows, map styling and zoom controls that can be applied to customize map elements.

Website / Docs, GitHub, npm

Isotope handles filterable collections in Insight. Scripts in theme.js handle filtering the collection on button click events.

To set up filter buttons for your filterable collection, simply nest them in an element with the same data-isotope-id as your collection.

To specify the filter string for each button, provide a class selector in the data-isotope-filter attribute on the button. Elements in the corresponding filterable collection will be filtered based on whether or not they have the specified class.

To create a "show all" button, use data-isotope-filter="*"

To set up a collection, simply add class isotope to the parent element which will house the collection of items and use the same data-isotope-id as was used on your filters. Filterable items in the collection must have the grid-item class to be recognised by isotope.

The below HTML is an example, however, it is not necessary to use any specific type of nav structure. The example uses nav-pills, but a div with button elements would suffice.

<!-- Collection of buttons to filter the collection -->
<nav class="nav-pills d-flex" data-isotope-id="projects">
  <a href="#" class="nav-link active" data-isotope-filter="*">All</a>
  <a href="#" class="nav-link" data-isotope-filter=".corporate">Corporate</a>
  <a href="#" class="nav-link" data-isotope-filter=".startup">Startup</a>
  <a href="#" class="nav-link" data-isotope-filter=".nonprofit">Non-Profit</a>
</nav>
<!-- Collection of items to be filtered -->
<div class="row isotope" data-isotope-id="projects">
   <div class="col-sm-6 mb-3 grid-item corporate> ... </div>
   <div class="col-sm-6 mb-3 grid-item startup> ... </div>
   <div class="col-sm-6 mb-3 grid-item nonprofit> ... </div>
</div>

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.

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

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

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.

Insight'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

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 Insight can be enhanced with this effect by adding the data-action="zoom" attribute to the img tag.