Another great gem from Zurb. What if you wanted to make a user aware of a piece of content long before their mouse directly hovers over its element? Perhaps it was a piece of content that a user would have never otherwise hovered over (thus rendering all that CSS you styled on the :hover of your class forever invisible to your user). What is a designer/developer to do?

Reactive Listener allows us to affect change over an element from a distance that otherwise would not be possible. In this example, we detect the proximity of the mouse pointer to an element which reacts more vibrantly the closer to user’s mouse comes to it. Here we use this effect to draw attention to some additional information contained in a hidden div, but many more practical uses abound, like drawing attention to a share button, or CTA.

The reactive listener is currently a prototype where the only real thing it knows how to watch for is mouse position, but the core concept is extensible, and we can imagine reacting to things like scroll, rotation, GPS, and a variety of other data sources.

Notyf is probably the quickest way to add notifications to your website or app. This plugin allows to show non-blocking, stacked notifications in a pretty good looking way.

Notyf is a dead simple, responsive, vanilla javascript plugin for showing notifications on site. No jQuery required.

Looking for a quick way to make that Youtube video responsive? Reframe.js is your answer.

Brought to you by the engineering team at Dollar Shave Club, Reframe.js removes a specified element’s height & width attributes & then wraps that element in responsive div that is an intrinsic ratio of the original element. This plugin is meant for embedded content like iframes or videos.

Reframe.js is inspired by FitVids & does what FitVids does but without the need for jQuery. This makes the plugin highly valuable when including it in a module that has to be very small & with minimal dependencies.

This plugin is small – ~1.3kb unminified & is meant to do 1 thing – wrap elements that aren’t responsive & make them responsive. ?

formerly known as jquery.mark or jmHighlight, mark.js is a text highlighter written in JavaScript and jQuery. It can be used to dynamically mark search terms or custom regular expressions and offers you built-in options like diacritics support, separate word search, custom synonyms, iframes support, custom filters, accuracy definition, custom element, custom class name and more.

Nanobar is a very lightweight progress bar (~699 bytes gzipped). It does not require jQuery. For iE7+ and the rest of the world.

Illustration by akselkreis

Minigrid is a minimal (2kb), zero dependency cascading grid layout plugin. Its responsive and even has the ability to add animations. It’s a great option if your cards are all going to be the same width. If your cards have different width sizes or you need more control I’d recommend Isotope

Large data sets can pollute DOM with used tags. This can cause a scroll lag as you display the data. Cluserize.js elegantly solves this issue with a clever solution that splits your data into clusters and only loads it as you scroll. This gives you a smooth and fast scroll no matter how many rows of data there are.

You can apply Clusterize.js to a table, ordered list, unordered list or a div. They have a very useful sandbox on the demo site.

Sortable is a minimalist Javascript library that helps you create reorderable, drag and drop lists for modern web browsers and touch devices. And it does not use jQuery!

The tool comes with plenty of other nifty features as well, such as

• CSS animation when moving items
• Support for drag handles and selectable text
• Smart auto-scrolling
• Support for meteor, AngularJS, React and Polymer
• Supports any CSS library (such as Bootstrap)
• Has a simple API
• Allows dragging within a list or between lists

Sortable is packed with customization options as well including sorting, delay, filtering, ghost classes, fallbacks, and scrolling sensitivity and speed.

Sortable comes with plenty of documentation to help you get started and if you want to go the jQuery route, there’s support and documentation for that as well.

bLazy is a lightweight lazy loading, multi-serving image script. It’s written in JavaScript and doesn’t have any dependencies for third party libraries like jQuery.

The goal of bLazy is to help save bandwidth and server requests to your site to everything loads that much faster. (As an added bonus it saves data usage for mobile users as well.)

The loader has a sleek look and can work with almost any style of website design. The code is fairly easy to understand and install.

Here are a few reasons why you should try it:

• bLazy is used on big sites with millions of monthly visitors so it has been tested plenty.
• bLazy is written in pure JavaScript and doesn’t depend on third-party libraries such as jQuery.
• bLazy can lazy load all types of images, including background images.
• bLazy can lazy load images depending on screen size (multi-serve images).
• bLazy can serve retina images on retina devices.
• bLazy is lightweight, less than 1.2KB and less than 1.05KB (if you don’t need IE7- support).
• bLazy is AMD, CommonJS and Browser global compatible.

This tool works on all modern browsers and is a great way to better serve images to your users.

List.js is the perfect library for adding search, sort, filters and flexibility to tables, lists and various HTML elements. It is built to be invisible and work on existing HTML.

Features of List.js include that it is simple and invisible, easy to apply to pretty much any HTML, has no dependencies, is fast and super lightweight and can handle thousands of items. It includes a simple template system that adds the possibility of editing, adding or removing items.

It works with modern browsers including Chrome, Safari, Firefox and Internet Explorer 6+.

Examples of usage include partnering List.js with an existing list, with an existing list plus adds, a new list, tables, fuzzy search and pagination.

The tool includes extensive documentation to help you install and use this tool with ease. List and item APIs are also available.

A javascript library that sets out to do one simple job — draw and animate the most perfect and playful text underline, that’s exactly what underline.js does.

Here are some of the features of the tool:

• It is pixel-perfect on the half pixel level for retina displays
• It has an optimized thin stroke width that is always one-sixth of the width of a period
• It sits on the optimal Y position between the baseline and descender line (the golden ratio point
• It has holes around descenders to completely respect the type’s shape

According to the developer, the concept of underline.js is in constant development and is designed to help push the boundary of web typography.

There’s more to learn about this tool as well if you are interested in the story behind its development. You can watch the video from the NY Tech Meetup where it was presented.

Blast separates text in order to facilitate typographic manipulation. It has four delimiters, including character, word, sentence and element. Alternatively, Blast can match custom regular expressions and phrases.

Blast’s uses include typographic animation, juxtaposition, styling, search and analysis.

The plugin is highly accurate; it neither splits words at spaces nor splits sentences at periods. All Latin alphabet languages and UTF-8 characters are supported. Features include:

• By only traversing text nodes, all HTML, event handlers, and spacing are preserved. Thus, you can safely apply Blast to any part of your page.
• Automatic class and ID generation make text selection simple.
• Blast can be fully undone with a single call.

The elements Blast generates can be accessed through both CSS and JavaScript by referencing auto-generated class names or iterating via jQuery/Zepto’s eq() function.

Blast is a cool little plugin that will make designers rejoice with additional text controls and manipulations for a variety of uses and website design options. It is a robust plugin that functions well while preserving some text specific styling such as bold and italics.

TitleNotifier is a lightweight (less than 3kb), dependency-free Javascript library to dynamically show the number of unread notifications in your webpage title.

It’s a super-cool little tool that adds that special something to your website framework. You can actually see the page title change as notifications are added or read.

This plugin is fairly simple so it does not come with a lot of options, but you can set a maximum number of notifications to display. (While you can have more than 100, the maximum number that will show in the title bar is 99+, much like many app icon notifications.)

It only takes one line of code to add the plugin to your website and a couple of modifications to set the number of notifications, add notifications, subtract notifications, reset notifications or call the current number of active notifications.

You have to see this plugin in action to get a good feel for how useful it might be for your website design. It has a large number of practical applications for many different site types.