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
Looking for a way to asynchronously load images when users browse to the page without jQuery?
- ARIA Design pattern for Dialogs
- The tab key loops through all of the keyboard focusable items within the offcanvas.
- You can close it using Esc.
- Buttons Open/Close with Space & Enter
- BEM Syntax
- Package managers Bower & NPM
It could not be easier to use, just include the script in your page and initialize it. The items in your menu will get active class when the section referenced in your anchor is visible. It’s got a really small footprint and uses requestAnimationFrame to monitor scroll position.
Muuri creates responsive, sortable, filterable and draggable grid layouts. They manage to pack a lot of features into a small package. Muuri is basically Packery + Masonry + Isotope and jQuery UI sortable.
Muuri’s layout system allows positioning the grid items within the container in pretty much any way imaginable. The default “First Fit” bin packing layout algorithm generates similar layouts as Packery and Masonry. The implementation is heavily based on the “maxrects” approach as described by Jukka Jylänki in his research A Thousand Ways to Pack the Bin. However, you can also provide your own layout algorithm to position the items in any way you want.
Muuri uses Velocity for animating the grid items (positioining/showing/hiding) and Hammer.js for handling the dragging. Hammer.js is an optional dependency that is only required if dragging is enabled, but Velocity is a hard dependency.
And if you’re wondering about the name of the library “muuri” is Finnish meaning a wall.
A word of warning. Muuri is currently under active development and might be still a bit rough on the edges so production use is not recommended just yet. But when did that ever stop you ;)
Notyf is probably the quickest way to add notifications to your website or app. This plugin allows to show non-blocking, stacked notifications in a pretty good looking way.
Looking for a quick way to make that Youtube video responsive? Reframe.js is your answer.
Brought to you by the engineering team at Dollar Shave Club, Reframe.js removes a specified element’s height & width attributes & then wraps that element in responsive div that is an intrinsic ratio of the original element. This plugin is meant for embedded content like iframes or videos.
Reframe.js is inspired by FitVids & does what FitVids does but without the need for jQuery. This makes the plugin highly valuable when including it in a module that has to be very small & with minimal dependencies.
This plugin is small – ~1.3kb unminified & is meant to do 1 thing – wrap elements that aren’t responsive & make them responsive. ?
A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images.
Why was this plugin built?
We have all searched images on Google, so you probably noticed the interesting expanding preview when you click on a thumbnail. It’s a very nice effect and practical, allowing you quickly see more details without having to reload a new page. This plugin allows you to recreate a similar effect on a thumbnail grid. The idea is to open a preview when clicking on a thumbnail and to show a larger image and some other content like a title, a description and a link.
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 ;)
Nice and elegant way to add zooming functionality for images, inspired by medium.com
This plugin reproduce exactly the same code that use Medium to add the smooth transition effect clicking over the images, with some improvement.
Illustration by akselkreis
This jQuery plugin allows you to display a list as a set of boxes that can be ordered and filtered as desired.
– filtering and sorting options available
– supports unlimited number of elements
– animation and CSS customizable
– boxes are href-able
Illustration by akselkreis
Lightweight jQuery extension for creating cursor tooltips that follow mouse movement and position.
Illustration by akselkreis
scrollReveal.js is plain vanilla JS library that allows you to reveal elements as they enter the viewport. It’s remarkable in that it’s only 3kb minified, that’s small. The range of effects you can choose are vast, and it uses natural language to define the animation you want to run. No need for CSS3 transition and a script to detect the current page position in the browser window. Use ScrollReveal and be done with it!