Appalled at the fact that you have to load 300kb of jquery and jquery UI or hook up bootstrap just to use a calendar? This is a vanillaJS [date][time]picker that’s powerful, easy to use, and looks good out of the box.
Almost every large SPA or project involves date and time input. There are limited options, however, if you also prefer to keep your projects lean and consequently stay away from heavy frameworks such as jQuery, or even Bootstrap.

Written in vanilla javascript, works with anything, anywhere.

iCheck works with checkboxes and radio buttons like a constructor. It wraps each input with a div, which may be customized by you or using one of the available skins. You may also place inside that div some HTML code or text using insert option.

iCheck is created to avoid routine of reinventing the wheel when working with checkboxes and radio buttons. It provides an expected identical result for the huge number of browsers, devices and their versions. Callbacks and methods can be used to easily handle and make changes at customized inputs.

There are some CSS3 ways available to style checkboxes and radio buttons, like this one. You have to know about some of the disadvantages of similar methods:

• inputs are keyboard inaccessible, since display: none or visibility: hidden used to hide them
• poor browser support
• multiple bugs on mobile devices
• tricky, harder to maintain CSS code
• JavaScript is still needed to fix specific issues
• While CSS3 method is quite limited solution, iCheck is made to be an everyday replacement covering most of the tasks.

Features

• Identical inputs across different browsers and devices — both desktop and mobile
• Touch devices support — iOS, Android, BlackBerry, Windows Phone, Amazon Kindle
• Keyboard accessible inputs — Tab, Spacebar, Arrow up/down and other shortcuts
• Customization freedom — use any HTML and CSS to style inputs (try 6 Retina-ready skins)
• jQuery and Zepto JavaScript libraries support from single file
• Screenreader accessible inputs — ARIA attributes for VoiceOver and others
• Lightweight size — 1 kb gzipped
• 32 options to customize checkboxes and radio buttons
• 11 callbacks to handle changes
• 9 methods to make changes programmatically
• Saves changes to original inputs, works carefully with any selectors

Flexdatalist is (another) jQuery autocomplete plugin with support for datalists.

After searching and not finding a standalone, lite (not dependent on jQueryUI), autocomplete that did everything I needed for a project, I created Flexdatalist.

Along with many other cool features, Flexdatalist allows you to style the list of suggested data/values, which is not possible at the moment with browser’s native

Hope it’s useful to you as it is to me. Enjoy ;)

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.

Timedropper is a jQuery UI timepicker. Its very unique in style, and adds a touch of polish to any page it’s on. Manage time input fields in a standard form. Focus on the input to open an small interactive timepicker.

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

HTML5 Upload Image, Ratio with Drag and Drop is a tool to help you upload images, making full use of HTML5 with canvas. The drag and drop feature makes this an ideal, and easy, solution for use in a content management system.

Key features include:

• Use canvas to crop images (no server scripts needed)
• Full HTML5 support
• Touch support so everything works great on tablet and mobile devices
• Responsive design
• Save images with AJAX or use the traditional FORM input file element
• Uses ratios to fit screens or elements
• Easy to use
• Additional options to configure
• Works with Bootstrap 3.1
• Works with jQuery 1.9

HTML5 Upload Image is a premium tool and is available from the Envato Market for $11, which includes quality checks, future updates and 6 months of support.

Drag and Drop is a full website and content management system back end with an included database. This plugin works with that system to create three options for using and displaying sortable lists with jQuery, CSS, mySQL, AJAX and PHP.

The first example populates the list from the database, allows you to sort the order, then allows you to save he list using ajax functionality so the page does not reload. In addition, there is a message box that shows the status of whether the boxes have been moved and not saved and whether changes have been implemented to the database.

The second example is a simple sort list that allows you to produce a list of varying length and apply a drag and drop feature.

The third example shows how the functionality can work across a multiple column format.

This tool works across a variety of platforms and includes support for touch devices and lets you save lists via a cookie session. Drag and Drop Sortable Lists is available from the Envato Market for $5. The license includes future updates and has been quality checked by Envato. Additional support is also available.

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.

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.

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.

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 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!

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.