• Vanilla
X

rangeslider: jQuery Polyfill for the HTML5 Slider

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.

  • 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

Rome: Custom Date and Time Picker

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.

  • Vanilla
X

TitleNotifier: Create Notifications in the Webpage Title

TitleNotifier is a lightweight (less than 3kb), dependency-free Javascript library to dynamically show the number of unread notifications in your webpage title.

It’s a super-cool little tool that adds that special something to your website framework. You can actually see the page title change as notifications are added or read.

This plugin is fairly simple so it does not come with a lot of options, but you can set a maximum number of notifications to display. (While you can have more than 100, the maximum number that will show in the title bar is 99+, much like many app icon notifications.)

It only takes one line of code to add the plugin to your website and a couple of modifications to set the number of notifications, add notifications, subtract notifications, reset notifications or call the current number of active notifications.

You have to see this plugin in action to get a good feel for how useful it might be for your website design. It has a large number of practical applications for many different site types.

  • 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.