A light-weight, responsive, mobile-like menu plugin.

It’s an update to a previously submitted plugin; http://www.unheap.com/navigation/horizontal-tabbed/sliding-menu/

Illustration by akselkreis

ContentTools is a collection of small, flexible, extensible and framework agnostic JavaScript libraries for creating beautiful WYSIWYG editors for HTML content.

The ContentTools WYSIWYG editor can be added to any HTML page in a few simple steps.

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

Luminous is a simple, lightweight, no-dependencies JavaScript lightbox. Out of the box the styling is very basic, so you will want to style it to your needs. They do provide a basic theme to get you started.

It supports the latest version of Google Chrome and the current and previous major releases of desktop Firefox, Internet Explorer, and Safari on a rolling basis. Mobile support is tested on the most recent minor version of the current and previous major release for the default browser on iOS and Android (e.g., iOS 9.2 and 8.4).

Illustration by minnix

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.

Quick[select] is a jQuery plugin for quick selection of common options in select boxes.

Select boxes are a two tap or click operation. They take the user out of the flow of the form, and there are certain answers that are more commonly chosen than others, such as a reply of “yes” or “no.” Or maybe you would prefer people to give a definite yes/no answer. This plugin provides the ability to bring those options outside of the select list.

Quick[select] prompts a user to an answer, but provides flexibility for questions that need it. The tool uses the browser’s native select list for its overflow, meaning it will work great on all devices.

It’s been tested with jQuery 2, Internet Explorer 11+, Firefox 40+, Chrome 45+, Safari 8+, Chrome on Android and iOS and Safari on iOS, so it should work properly in most applications. Just download the source files from GitHub, include the JS and CSS tags, attach Quick[select] to the appropriate boxes and you are ready to go!

There are a handful of option classes available and some great examples of how to use this tool in the documentation.

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.

Have you ever wanted a drag and drop library that just works? One that doesn’t depend on bloated frameworks, and that has great support? Then Dragula is precisely what you have been looking for.

This little plugin makes drag and drop easier than you can imagine. Key features include:

• Super easy to set up
• No bloated dependencies
• Figures out sort order on its own
• A shadow where the item would be dropped offers visual feedback
• Touch events!
• Seamlessly handles clicks without any configuration

Install using NPM or Bower, include the CSS files and you are ready to go. (And there’s plenty of documentation if you need help along the way.)

Here’s how it works: By default, Dragula will allow the user to drag an element in any of the containers and drop it in any other container in the list. If the element is dropped anywhere that’s not one of the containers, the event will be gracefully cancelled according to the revertOnSpill and removeOnSpill options. (Note that dragging is only triggered on left clicks, and only if no meta keys are pressed.)

There are plenty of options and customizations so you can dictate exactly how this plugin will work on your website.

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.

PhotoSwipe is an image gallery plugin for mobile and desktop devices with a modular, independent framework.

The plugin comes with some nifty features including support of touch gestures, a browser history API that allows users to link to each gallery item with a unique URL to use the back button and loads and displays images quickly.

What PhotoSwipe does is solve some of your common photo issues all in one package. The plugin preserves detail in responsive images so that gallery photos look great anywhere on any device, it does not slow down page load times and it saves user bandwidth because images load progressively.

PhotoSwipe is made to work well on mobile devices — as implied by the name — and supports multiple touch gestures. You can use the basic gestures that are part of the plugin or assign your own actions. The include actions are spread to zoom, pinch to close, vertical swipe to close and horizontal swipe to switch items. (As a bonus, these same actions are emulated on desktop computers as well with wheel and trackpad actions.)

The plugin works on all modern browsers and is fairly light. Plus this is a photo plugin that does not force additional HTML markup in the gallery; you have complete control and images will remain crawlable to search engines using your meta data.

Have you ever needed a great chart for your website design but did not know where to start? Chartist is a plugin that helps you create simple responsive charts for almost any design project.

This set of charts includes bar graphs, line charts, pie charts, circular charts, dot graphs, scatter plots, donut graphs and plenty of cool animations to bring your data to life. Every chart is designed so that you can customize it with your information.

And editing is a breeze. The CSS editor is easy to understand and compatible with almost any data.

Chartist is different from some of the other tools out there in that it is super easy to configure because it uses the convention method, it includes great flexibility in style, images are SVG based and it it built with Sass. Chart configuration behavior is based on media queries so that every chart renders perfectly every time. Plus, every element in Chartist is responsive.

You don’t have to worry about compatibility issues with this plugin either. It works will all major browsers. Chartist is waiting for you to download and test it out. The file is light (only 10kb) and has no dependencies. This might just be the charting tool you have been looking for.

This tiny and flexible jQuery star rating plugin is just what you need to add super star ratings to your website. What makes it even better is that no images are required to make Rate Yo! work like a charm.

The plugin includes five stars from your created <div/> and some styles of your choice. Nifty hover actions make it easy for users to click to rate by filling stars with a color.

Rate Yo! is packed with options so you can make this rating plugin your own. You can change the width and size of stars, number of stars used, colors, fill options, spacing and animated options. (This is a robust set of options that make it easy to customize this plugin to your website’s style and color scheme.)

One of the coolest features of this plugin is the low to high rating, which allows you to change the color of stars from one color to the next based on value.

And because the plugin does not sure actual images, the lightweight code is lightning-fast and you’ll never have to worry about render issues. It’s a great solution for anyone looking for a rating tool.