Reactive Listener: Affect change over an element from a distance
Another great gem from Zurb. What if you wanted to make a user aware of a piece of content long before their mouse directly hovers over its element? Perhaps it was a piece of content that a user would have never otherwise hovered over (thus rendering all that CSS you styled on the :hover of your class forever invisible to your user). What is a designer/developer to do?
Reactive Listener allows us to affect change over an element from a distance that otherwise would not be possible. In this example, we detect the proximity of the mouse pointer to an element which reacts more vibrantly the closer to user’s mouse comes to it. Here we use this effect to draw attention to some additional information contained in a hidden div, but many more practical uses abound, like drawing attention to a share button, or CTA.
The reactive listener is currently a prototype where the only real thing it knows how to watch for is mouse position, but the core concept is extensible, and we can imagine reacting to things like scroll, rotation, GPS, and a variety of other data sources.
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
Looking for a way to asynchronously load images when users browse to the page without jQuery?
MenuSpy: Highlight navigation item based on section in view
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.
Notyf: Simple notification plugin
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.
Reframe.js: Makes unresponsive elements responsive.
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. ?
Gridder: A thumbnail grid with expanding preview
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.
MediumLightbox: Zooming functionality for images
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
justContext.js: A simple context (right-click) menu plugin
justContext is a simple context menu plugin that doesn’t require jQuery, but kicks ass anyway. Just about 30 lines of JS and a bit CSS produce a slick plugin that enables fast, easy and styleable context menus. Every HTML element can host it’s own menu. Two themes are included.
Why did you build it?
Other context menu plugins are either unusably cryptic or depend on jQuery, a library that is way too big for a problem this small. justContext is “just a context menu”. It won’t get in your way and is easily hacked.
Why did you build this plugin? Why was it needed?
As part of the unification and rebuild of Notable that we’ve been working on over the past year, we were working with 6 different unique application environments. If we were to require rewriting them all to be consistent before we could introduce new features, we’d never make progress. So for cross-application features, increasingly we’re “going native” to make it easier to use the same libraries for new features across applications.
One of the new features we are working on in Notable is @mentions. @mentions, popularized by Twitter, allow you to call out other people in a conversation. We scoured the net for a open source, native, @mention library and came up with nothing. To solve this problem, we built our own and are excited to open source it as Tribute.
Illustration by akselkreis
nanobar: Very lightweight progress bars. No jQuery.
Nanobar is a very lightweight progress bar (~699 bytes gzipped). It does not require jQuery. For iE7+ and the rest of the world.
Illustration by akselkreis