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.

Codepad is a place for developers to save & share code snippets. Join the community we can’t wait to let you in!

Save snippets online at Codepad making them easily accessible and all in one place. Become a Codepad member you get a sweet user profile where you can add a bit about yourself. There are various stats available we count snippet views, likes, downloads, comments, the list goes on.

When saving any snippet you have the option to make it public, part private or private. With your snippets saved online you can access your code snippets anywhere. Liking a snippet will keep a reference in your dashboard making it easy to find later.

This web color picker works very much like the color tools in Microsoft Office 2010 for a UI widget that is intuitive. The Evol.ColorPicker plugin works inline or as a popup bound to a text box.

The plugin comes ready to go with a few preset color themes including light, dark, redmond, sunny and le-frog.

When displayed, the tool shows as a box containing theme and standard colors, allowing a click to choose each color selection. Each clicked color also displays its value for even more ease of use. The tool also includes a honeycomb-style color picker that displays varying hues and color values.

Evol.ColorPicker requires a jQuery UI theme to be present and the included base CSS file. Add the proper tagging, and the widget is ready to use.

It also comes with a few customization options such as the default color value, default color palette, type of display indicator, history, hide and show options and transparency. The plugin works with modern browsers and has been tested with Internet Explorer 7+, Firefox 9+, Chrome 21+ and Safari 5+.

This nifty little tool is nice because of its intuitive nature; it looks like something most users are already comfortable using.

datedropper is a jQuery dates plugin that provides a quick and easy way to manage dates for input fields.

It supports 16 different language formats and is easy to use. The plugin only requires three bits of code for activation — head, body and end. The tool is also easy to modify so that it fits the aesthetics of any website outline — just edit the CSS in the datedropper folder and you’ll have a custom plugin.

This tool has plenty of practical applications. Use it to add dates to an an or website, set an itinerary for an upcoming event or even set an expiration date for a digital product.

When it comes to customization, you have plenty of options to choose from there as well; alter the date format, animation style, colors, language, text, number of years included, borders and strokes, shadows and boxed elements. And you can do it all with just a few clicks with datedropper. Find it on GitHub and see for yourself.

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.

This simple, small and fast jQuery polyfill for the HTML5 slider element looks great and works like a charm.

The rangeslider plugin is touchscreen friendly, recalculates onresize making it suitable for use in responsive designs, is small and fast and supports all major browsers including IE8+.

With plenty of numerical slider options, this little tool allows you to visualize negative attributes, floating point boundaries, programmatic value changes, programmatic attribute changes, destroy a plugin instance and more.

Installation of rangeslider is easy with Bower or NPM, but you can also download and install manually. Configuration is simple as well; all you need is a few lines of code. The rangeslider.js API is compatible with the standard HTML input methods.

The developer is open to suggestions and has released multiple updates for this plugin in order to make it even better.

Payment Info is a one-line, mobile friendly credit card input tool. The idea behind this plugin is to create a more streamlined credit card entry process.

The plugin was inspired by Luke Wroblewski’s thoughts on streamlining the collection of payment information by using input masks:

“Input masks constrain text entries to help people avoid mistakes. For example, a phone number input mask could only accept numeric entries and ignore any alphabetic characters or punctuation. Acceptable numbers could be limited to just a range, a specific pattern, or a combination. Input masks don’t just prevent errors, they can also guide people by presenting and maintaining input hints like specific formatting requirements. And last but not least, input masks can integrate multiple questions into logical sequences, keeping people from having to move between multiple input fields in a form.”

This is the concept employed by this simple plugin. The tool helps to seamlessly guide the user through the needed inputs to complete a transaction, but without having to navigate through multiple fields to accomplish this task.

Payment Info results in an easy tool that contributes to usability for your website.

This small plugin to style forms uniformly across all devices is easy to use and customize.

Formplate is available as a downloadable zip file, on Github and is also included automatically with Webplate downloads.

The plugin is best installed using Bowser and integrating Formplate requires jQuery and Modernizr, as well as dropping a copy of the css/icon-font-formplate folder into the CSS folder where the plugin will reside. Then to activate, you need to wrap form elements in a containing element with the class formplate and call the formplate plugin.

Then you are ready to use. The final step is to customize the plugin with a color scheme that matches your site aesthetic. You can also choose the desired color of your form hover and active states by adding a data attribute to the body tag. The color selections are grey, black, white, aqua, blue, green, orange, pink, purple, red, yellow, asbestos, asphalt, bondi-blue, grey-blue and silver.

PleaseJS is a simple way to help create randomly-generated color schemes for different types of projects. (So if you can’t settle on a hue or love the idea of a more whimsical color palette, this is the plugin for you.)

The plugin uses the hue-saturation-value (HSV) color model to create rainbow-style combinations that are naturally pleasing to the eye. It will also generate color schemes based on a single hue.

The little plugin is then packed with lots of other cool options. You can adjust the hue, saturation, value, base color, grayscale options, “golden-ness” which is color derived from the golden ratio and format. It reads different color types — RGB, HSV and HEX. (And will allow you to convert colors between formats without having to look them up.)

Once installed you can make a color scheme using this plugin for a default color palette for your site or create an entire color scheme based on the options built into the tool. Scheme options include concepts based on color theory and the color wheel — monochromatic, complementary, split-complimentary, double-complimentary, analogous and triadic — for almost perfect combinations every time.

Waves is a click effect tool inspired by Google’s Material Design. The plugin adds a simple wave (or ripple) to buttons and other user interface elements to show users that they have clicked the item.

The action event tool works with jQuery and Javascript event handlers such as Snarl.

You can get Waves pretty easily. Just download the file and install with Bower or NPM. Include the CSS and Javascript and its ready to use. For more advanced developers, the file is also available via LESS, SCSS, and SASS source.

Once Waves is installed, you can adjust a couple of simple parameters if you like and initialize the plugin. Waves works with all modern browsers including Internet Explorer 10+, Chrome 14+, Firefox 9+, Safari 5.1+, Opera 11.6+, iOS 6+, Windows Phone 8.1 and Android Browser 4+.

Rome is a dependency free, opt-in UI for a customizable date and time picker.

The plugin comes with a text input field that includes a drop down calendar and clock menu. (Or users can simply type in the date and time on their own.)

There are plenty of viable applications for this super little plugin. And Rome synchronizes in real-time with inputs, never steals focus and the CSS is entirely customizable. You can select the starting point for the week, date format, time format, display one or multiple months, set and disable use of the plugin on your site, set a time range for dates, black out invalid dates and more. Plus the plugin includes a ton of shortcuts to make workflow a breeze.

The plugin is also designed to work inline as well with the addition of a non-input element. The plugin is easy to install and setup using NPM or Bower. And if you are not sure where to start with customization, the default options are a good place to start. They can be changed at any time as you get more comfortable with using the tool.

Trumbowyg is a lightweight WYSIWYG editor to make work on your website as straightforward as it gets.

This plugin is the lightest tool of its kind at only 16kb for super-fast page loading. (Most other similar editors are 45kb or larger.) The weight is streamlined by stripping out unnecessary features for a simple, clean editor.

But there is still plenty you can do with Trumbowyg. It includes customizable options and design components and the default settings are even compatible with Retina displays.

The editor and generated code are optimized for HTML5 and are compatible with all current browsers. It also includes localization support.

In addition to the included features, this plugin can be adapted for your needs as well. Create or suggest a plugin to add to the Github repository for this tool. There are a handful already available. You can also create your own package for Trumbowyg or select from one of the ready to use package options already available for frameworks including RubyGem, OctoberCMS plugin, 99ko plugin, Django FS Trumbowyg, REST in Place, Yii 2 Widget and trumbowyg-ng.

Multi Column Select can be used to create a single selection multi-column dropdown or multiple selection multi-column dropdown for a variety of website applications.

Flexselect is a jQuery plugin that turns selection boxes into flex-matching incremental-finding controls. Think of it as Quicksilver squished into a selection box.

The difference is a purely aesthetic one — and something that is becoming increasingly popular on more websites. The dropdown selection has a cleaner and more uniform look with this plugin. You can use the mouse to select from the dropdown menu (as you would expect) or click in the Flexselect box and start typing to see options that match those letters appear.

It’s a usability tool that website visitors will love.

To get started, you’ll need to load the default styles, jQuery, the LiquidMetal scoring algorithm and the plugin. Attach the correlating boxes and turn on elements. Then you can enable any custom options that you fancy and start using the plugin. It’s that simple!

With Flexselect installed, you’ll have the exact same functionality made popular by applications like Quicksilver, LaunchBar and Launchy. Nothing makes filling out this type of menu selection as easy as a flexible typing tool.