• Vanilla
X

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.

  • Vanilla
X

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.

  • Vanilla
  • Spotlight
X

Tribute.js: ES6 Javascript @Mention Plugin

A New, Lightweight, and Easy to Use ES6 Javascript @Mention Plugin from the Zurb crew. It allows you to quickly choose items from an arbitrary list with special characters.

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

  • Vanilla
X

Blast: Typographic Manipulation

Blast separates text in order to facilitate typographic manipulation. It has four delimiters, including character, word, sentence and element. Alternatively, Blast can match custom regular expressions and phrases.

Blast’s uses include typographic animation, juxtaposition, styling, search and analysis.

The plugin is highly accurate; it neither splits words at spaces nor splits sentences at periods. All Latin alphabet languages and UTF-8 characters are supported. Features include:

  • By only traversing text nodes, all HTML, event handlers, and spacing are preserved. Thus, you can safely apply Blast to any part of your page.
  • Automatic class and ID generation make text selection simple.
  • Blast can be fully undone with a single call.

The elements Blast generates can be accessed through both CSS and JavaScript by referencing auto-generated class names or iterating via jQuery/Zepto’s eq() function.

Blast is a cool little plugin that will make designers rejoice with additional text controls and manipulations for a variety of uses and website design options. It is a robust plugin that functions well while preserving some text specific styling such as bold and italics.

 

  • Vanilla
X

randomColor: Generate Colors

For generating attractive random colors, randomColor is a tiny and effective script. The focus of this tool is to generate plenty of random colors; the featured hues are bright and have high saturation.

There are some fun extras here too that allow you to create a colors based on a monotone concept, as light or dark colors, with grays or as a truly random color set.

The options you can control include hue, luminosity, count (number of colors to generate), seed and format.

The script is available minified on cdnjs; it is also distributed on NPM and Bower.

  • Vanilla
X

Apollo

A standalone class manipulation API for HTML5 and legacy DOM.