X

Muuri: Responsive, sortable grid layouts

Muuri creates responsive, sortable, filterable and draggable grid layouts. They manage to pack a lot of features into a small package. Muuri is basically Packery + Masonry + Isotope and jQuery UI sortable.

Muuri’s layout system allows positioning the grid items within the container in pretty much any way imaginable. The default “First Fit” bin packing layout algorithm generates similar layouts as Packery and Masonry. The implementation is heavily based on the “maxrects” approach as described by Jukka Jylänki in his research A Thousand Ways to Pack the Bin. However, you can also provide your own layout algorithm to position the items in any way you want.

Muuri uses Velocity for animating the grid items (positioining/showing/hiding) and Hammer.js for handling the dragging. Hammer.js is an optional dependency that is only required if dragging is enabled, but Velocity is a hard dependency.

And if you’re wondering about the name of the library “muuri” is Finnish meaning a wall.

A word of warning. Muuri is currently under active development and might be still a bit rough on the edges so production use is not recommended just yet. But when did that ever stop you ;)

  • Vanilla
  • Video
X

Notyf: Simple notification plugin

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.

  • Vanilla
X

Reframe.js: Makes unresponsive elements responsive.

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

X

sdFilterMe: Order and filter <ul> list

This jQuery plugin allows you to display a list as a set of boxes that can be ordered and filtered as desired.

Features

– filtering and sorting options available
– supports unlimited number of elements
– animation and CSS customizable
– boxes are href-able

 

Illustration by akselkreis

X

mouseTip: Cursor tooltips that follow mouse movement and position

Lightweight jQuery extension for creating cursor tooltips that follow mouse movement and position.

Illustration by akselkreis

X

ScrollReveal: Easy scroll animations for web and mobile browsers

scrollReveal.js is plain vanilla JS library that allows you to reveal elements as they enter the viewport. It’s remarkable in that it’s only 3kb minified, that’s small. The range of effects you can choose are vast, and it uses natural language to define the animation you want to run. No need for CSS3 transition and a script to detect the current page position in the browser window. Use ScrollReveal and be done with it!

  • Vanilla
X

mark.js: JavaScript keyword highlighter

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.

X

ZooMove: dynamically zoom images with mouseover

A plugin developed with jQuery, that allows to dynamically zoom images with mouseover, and view details with mouse move.
Compatible with: jQuery 1.7+ in Chrome 42+, Firefox 41+, Safari 9+, Opera 29+, Internet Explorer 9+

X

Marginotes: Reveal notes in the margin on hover

Marginotes takes your jQuery selection and adds notes to the margin with the text provided in HTML attributes. If you don’t want to use jQuery, there’s also a version of marginotes without it.

Marginotes works by adding a desc attribute to an HTML element, which will be displayed as a tooltip:

It works with links, as well as with <span> elements.

 

Illustration by akselkreis

  • Vanilla
X

nanobar: Very lightweight progress bars. No jQuery.

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

  • Vanilla
X

Minigrid: Cascading grid layout without pain

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

X

mediaWrapper: Responsive iframe video

iframe videos can be a pain for responsive pages. MediaWrapper is a plugin for wrapping iframes and embedded videos to behave more like images.

Illustration by akselkreis

X

scrollSpeed: For custom scrolling speed and easing

scrollSpeed is a lightweight jQuery extension for custom scrolling speed in modern web browsers. Supports vertical or horizontal scrolling direction, including user-defined easing. After setup, reference the scrollSpeed() method and modify the step and speed parameters to create the desired scrolling effect. The step parameter defaults to 100 units, while speed defaults to 800 milliseconds; custom easing is optional.

Illustration by akselkreis

X

AnchorScroll.js: A plugin for smooth scrolling to anchor targets

If you are looking to add a little flair to your anchor scrolling, this plugin can help. AnchorScroll.js is a lightweight, easy-to-use jQuery plugin for smooth scrolling to anchor targets that can also add classes to elements on scroll events. You can add blur effects, bounce effects or even text to let your user know you are scrolling to the right spot.