flatpickr: lightweight datetimepicker with no dependencies
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.
iCheck: Super customized checkboxes and radio buttons.
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
- While CSS3 method is quite limited solution, iCheck is made to be an everyday replacement covering most of the tasks.
- 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)
- 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: jQuery autocomplete with support for datalists
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 ;)
Timedropper: A better UI timepicker
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: A beautiful & small content editor
The ContentTools WYSIWYG editor can be added to any HTML page in a few simple steps.
Illustration by akselkreis
HTML5 Upload Image: Drag and Drop Plugin
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 Sortable Lists
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.
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: 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.
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.
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?)
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!
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
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.