TypeIt is a high quality jQuery plugin that types text a given string or strings of text on a page. Its responsive, lightweight and easy to customize.

To get started you can either pass in settings object, use data-typeit-* attributes, or You can define your string by dropping it directly in the HTML element. You can have it play back multiple strings and even set it to delete the previous string before starting a new one for that realistic effect. You can also alter details like speed, and even pacing to make it feel like a person is doing the typing.

Categorize, sort, and filter a responsive grid of items.

Fully-interactive file tree with as little as a single line of code.

A fast and fully-featured autocomplete library

Ever worry that your text is not optimized for readability? Then Readable is the plugin for you. It conveniently marks the 45th and 75th characters of every paragraph tag when turned on so your line breaks fall somewhere in between those two numbers, the standard for optimum readability.

The magic character count range of 45 to 75 refers to the number of characters occupying one line of text within a paragraph, before a line break and text wrap. If that number is too low or too high, the paragraph becomes much less readable.

Here’s how it works:

The content of each paragraph tag is converted into a text string right after we duplicate it as a data attribute. The text string is then counted using the .substring() function to find the 45 to 75 characters. We then pop in a span tag with a “readable” class, which is what we need to create the styles. Once the toggle is switched off, we reinsert the original HTML content back into the paragraph using the preserved HTML from the data attribute.

Sound complicated? It’s actually very simple. Just download the three files, add them to the proper location in your code and you are ready to go! (The documentation explains it all quite easily.)

SVGMagic is a simple jQuery plugin that searches for SVG images (including background and inline data images) on your website and creates PNG versions if the browser doesn’t support SVG.

Wondering why you should use SVG images? SVG images are vector based! Meaning that they will be as sharp no matter how big they are. In other words: one file for every size. (This is where image handling is going in website design thanks to HD and retina displays.)

What makes this tool even better is that it is super simple. Just download the script, include it and initialize it.

Here’s how it works: First, the script will check which images on your website are SVG and collect the URLs. These URLs are sent to our server which will temporarily download, convert and save them. When that’s done the server sends back a package with new URLs. The SVG images on your website than get replaced by the new PNG images and your old-school visitor can see the “SVG” images.

It might sound complicated, but it actually happens so fast that the user never knows that it is happening. Try it yourself and you will be amazed at how quick and efficient this tool really is.

Add an icon picker to your website forms with fontIconPicker.

This is a small (3.22KB gzipped) jQuery plugin which allows you to include an elegant icon picker with categories, search and pagination inside administration forms. The list of icons can be loaded manually using a select field, an array or object of icons or directly from a Fontello config.json or IcoMoon selection.json file.

The plugin comes with plenty of configuration options:

• Theme
• Source
• Empty Icon
• Icons Per Page
• Search
• Attributes
• Category Text

The added bonus with this plugin is that you can add your own theme with a few steps:

Using the theme parameter of the plugin settings, you can give custom classes to the icon picker and thereby change the appearance of individual pickers on the same page. For example if you pass theme: 'mytheme' then a class mytheme will be added to .icons-selector container. Then you can add custom styling using CSS selectors like .mytheme.icons-selector. For the sake of convention and to avoid CSS conflict, prefix your theme name with fip-. So the settings becomes theme: 'fip-mytheme' and CSS selector becomes .fip-mytheme.icons-selector.

This plugin is ready to go and compatible with the Firefox, Chrome, Internet Explorer and Opera browsers.

Mmenu makes it easy for you to create a native-style mobile sliding menu for your website (including WordPress). The menu has a stylish look and feel behind a hamburger icon and works with almost any type of design.

Mmenu is an easy to use but customizable jQuery plugin. It includes a wide range of options, extensions and add-ons to fit your needs. No matter how large your nested menu structure is, everyone already is familiar with the sliding submenus used in native apps. The fixed header, search field and sub-item counters make navigating your menu even easier.

Customize everything about this plugin to make it your own. Choose from options such as:

• Background color
• Menu position
• Navigation style and flow
• Search fields
• Header or footer buttons
• Include photos, logo or other images

And what’s great about this little jQuery tool is that it looks great. With so many options — and in a style users are familiar with — this might be the only tool you need to finish up your mobile website design.

Do users need to create PDFs on your website? jsPDF is a client-side solution for generating PDFs with ease. (Having PDFs available on your website makes downloads and printing that much easier for users.) The PDF tool is perfect for websites that allow users to download event tickets or information, reports, certificates, maps and more.

Plus, this plugin is easy to use. Simply include the jsPDF library in the head tag, generate a PDF using the built-in functions, then connect a button to trigger the download.

jsPDF works with pretty much everything, including IE 6+, Firefox 3+, Chrome, Safari 3+ and Opera. This plug does, though, need to be running though a web server.

The plugin comes ready to go with examples of how to turn all of the following into great looking PDFs — images, font faces, HTML rendering, circles, font sizes, landscape view, lines, rectangles, string splitting, text colors, triangles and more. Each example renders perfectly so you won’t have to worry about how your documents will look when users make the conversions.

And if you run into any issues with jsPDF, the developers over at Parallax are more than willing to walk you through it. Just send them a tweet to start a conversation.

Lets you to bind, fire and assert key combination strings against elements and events.

JQuery-compatible datepicker/ timepicker (calendar/ clock widget) and a powerful Date/String parse/format utility.

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 ;)

If you need a perfectly straight row and are horrible at building tables, try rowGrid. And it’s even better than a table-style concept because pieces can sit without columns for perfectly randomized row formats. (Great if you are trying for that masonry look.)

The aesthetic of rowGrid is similar to that of a Google image search. It is fully responsive, built with infinite scroll and is supported by all major browsers, including Internet Explorer 8.

Here’s how it works: All items must have the same height but the width can be variable. RowGrid.js justifies the items in straight rows so that the width of the rows equals the width of the container/parent element. At first rowGrid.js adjusts the margin between the items. If this is not enough rowGrid.js scales down items.

When it comes to how this tool works, you have a few options. You have to set which items work with rowGrid, determine minimum and maximum margins, set resizing parameters and set classes for the first item and last row items. You also get to choose if items continue to auto-load or if there is a set number of images that will be shown in the grid.

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.