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

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.

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

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.

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.

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.

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.