Dropify: Override Input Files with Style

Dropify is a tool that helps you create stylish input field. This is a great little tool if you are sick of plain inputs and want to showcase some of your design finesse.

The plugin comes with a drag and drop default file style or you can add your own text or images for a truly custom look. You can also set the height of the input box, combine options, disable the input altogether, add a maximum file size or use events.

And it all works with a little jQuery magic. Just clone in the project in your workspace, download the package, compile the assets and you are ready to roll with Dropify. (It is important to note that you have to include the js, CSS and fonts files for everything to work smoothly.)

With the available options, Dropify has plenty of documentation to help you set everything up and get moving quickly. The options are intuitive and easy to set.

  • Vanilla

Quick[select]: Selection of Common Options in Select Boxes

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.

  • Spotlight

jCalculator: jQuery Plugin for Calculator Inputs

jCalculator is an awesome jQuery plugin for calculator inputs.

What’s nifty about this tool is that you can add a calculator to almost any frame within a layout. Need a calculation in a search box? No problem.

The simple calculator design fits into a variety of aesthetics and performs all the basic functions you would expect, such as addition, subtraction, multiplication and division. The tool just pops up when the use navigates to the proper location on the screen. You figure and then keep figuring numbers using the keyboard or mouse with answers populating right on screen.

Plus jCalculator is easy to install and run. Just include the proper lines of code before the body tag close. (You can fin everything you need in the documentation.) Then call the plugin. That’s it!


Stretchy: Form Element Autosizing

Stretchy makes form element autosizing the way it should be, meaning that every text element box in your design expands to fit text inputs beautifully. (Everybody likes when things just happen automatically, right?)

This plugin can handle multiple form controls from text areas to inputs to selection menus. It has a tiny footprint at only 1.5 kb minified and is a standalone tool with no jQuery or other dependencies. It works with existing HTML and CSS — a real bonus if you want to add it to a site you already have. Stretchy also automatically accounts for newly added controls, requires to javascript knowledge to use and works in all modern web browsers, including Internet Explorer 9+.

Stretchy has a spartan API, since in most cases you don’t need to call it at all. Stretchy works via event delegation and detects new elements via mutation observers, so you do not need to call any API methods for adding new elements via scripting (e.g. AJAX), but if you do need API methods, they are available in the documentation.

To use, just include the script anywhere in the website and you are ready to go!

  • Vanilla

Dragula: Drag and Drop Plugin

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.

  • Vanilla

List.js: Library for Search, Sort and Filters

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.


Evol.ColorPicker: Web Color Picker

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: jQuery Dates Plugin

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.

  • Vanilla

Rate Yo!: jQuery Star Rating Plugin

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.

  • Vanilla

rangeslider: jQuery Polyfill for the HTML5 Slider

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: Mobile Friendly Credit Card Input Tool

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.


Formplate: Style Forms Uniformly Across all Devices

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: Creating Random Colors and Schemes

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