Pace is a tool to help you create an awesome automatic page load progress bar.

Include pace.js and a CSS theme of your choice, and the result is a beautiful progress indicator for your page load and ajax navigation. There’s no need to hook in to any of your code because the progress bar is detected automatically.

Pace comes with several different themes so you have great aesthetic options. Themes include:

• Minimal
• Flash
• Barber Shop
• Mac OSX
• Fill Left
• Flat Top
• Big Counter
• Corner Indicator
• Bounce
• Loading Bar
• Center Circle
• Center Atom
• Center Radar
• Center Simple

With more theme options that you could ever use, easy installation with Eager and nifty animation, this tool is a great addition to almost any website design. Try it in a flash with a live preview that works on your website.

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

Bigfoot is a jQuery plugin to help you create better footnotes and make them a lot easier to use.

Footnotes on the web can be a pain; you click a tiny number, get transported somewhere near the bottom of the page, find the footnote, and click on a link to go back where you can from.

This script makes that process painless by automatically detecting the footnote link and content. Then it turns the link into an easy-to-click button, and adds a popover when the the footnote button is clicked.

The script and default styles are built to work great on any size viewport; the popover is positioned on the top or bottom automatically (based on the relative amount of space), will update its location as the viewport changes size and will ensure that the popover never scrolls off screen. These elements make for a better user experience.

The tool is easy to install and use and comes with some options so you can make adjustments on your own.

This jQuery plugin for a notification bar has a lot of customization options. It all starts with a line of HTML as bar text and then the options flow from there.

Here’s a quick look at everything you can do with jquery.peekABar:

• Auto hide and show
• Delay hide
• Change padding and color specifications
• Add different types of animation for how the bar shows on the screen
• Add custom CSS
• Change the opacity of the tool
• Change notification bar positioning on the screen
• Close and open with a click

You also have control over event and instance methods with this plugin.

Even once installed, the code is easy to follow for making your custom changes. It’s a tool that can be used for almost any website type with a fairly small degree of difficulty. You get a lot of bang with this little plugin.

Block Scroll is a jQuery plugin that breaks pages into chunks for better presentation. The plugin turns a set of elements into a blocks and displays them one screen at a time to improve user-flow and make your page work in a responsive way.

The plugin comes with a robust set of features including up and down movements using the keyboard, scroll, buttons or mouse wheel; responsive design that automatically adjusts to any reasonable resolution; sticky pages that adjust to the screen; customizable look and feel using CSS; up and down buttons that are automatically wired; and ability to change the location of the active block using Javascript after it’s initialized.

In a nutshell, Block Scroll can be used to create a trendy-style single-page website with that multiple-page look. Create each block in a different color or with changing backgrounds for the most impact.

Block Scroll allows you to customize almost very aspect of the plugin, including block design, scroll duration and animation or fading between blocks.

Download and install using the js file, set your customization preferences and you are ready to go with the Block Scroll plugin.

Paper Collapse is a simple CSS3 paper cards accordion, inspired by Google Material Design.

The simple animation features a trendy design that is fashionable in itself for combining a in-the-moment aesthetic or material design and a card-style interface with animation.

The plugin is pretty simple to use. Just include the CSS in your header tag and then a little more code wherever you want Paper Collapse to appear. (It is important to note that this plugin is opt-in, so you have to initialize it yourself before it is live on your website.)

Paper Collapse comes with multiple options such as animation duration, speed of the animation in the progression and a variety of specific function triggers.

The plugin comes with Font Awesome icons for the card design, but you can modify the elements with your own icons for an even more custom look and feel.

Use Paper Collapse with an Android style interface or anywhere you want to experiment with material design concepts.

You’ll never have to worry about a parent element lacking the right text fill again with TextTailor. This jQuery plugin is designed to make text fill the height of a parent element or create ellipses when it does not fit.

The plugin is a simple way to make sure text, especially for elements that change frequently such as blog post previews, is used in the best way possible. The plug supports text fill for different post types including post not justified, post with images and fixed font justified.

TextTailor also comes with a variety of other options that you can adjust and customize. You can set a minimum and maximum font size, determine the amount of wrapping between elements, set the line height, determine resizing on different windows, fit to the parent container element, use ellipsis when needed, center or justify text within the frame.

The only requirement for using this responsive text tool is that the parent element needs to have a set height specification; it can be fixed or percentage-based.

Confirm mailto is a simple little plugin that can save user frustration when it comes to clicking mailto: links because it adds a confirmation step to the process. It is designed to work with the default email client of the user.

The jQuery plugin has two options for usage — basic and advanced.

The basic option is a simple jQuery load with to plugin code at the top of the Javascript file with a call to load.

But if you want more control over the plugin, you can use the code using the advanced method. This code is a little more for those who are code-savvy and want to add some customized elements. With advanced settings, you can control default text in the body of the message as well. The code allows for settings for success, fail and callback as well.

This lightweight jQuery extension is designed to create dynamically changing font sizes according to container and/or browser width. It is intended for use with responsive or adaptive CSS layouts. This is a great tool for helping the text your site look great at any size.

Installation of fontFlex just takes just one step: include the latest version of jQuery and the fontFlex code in the head of the HTML. Then you are ready to configure.

This plugin takes a little code understanding. You’ll need to define a default base setting in the CSS for the font size and line height for the body or intended element to start. (Declaring a font size is recommended.) Then you have to call the plugin on the element.

You can control a few custom parameters such as the minimum and maximum allowable font sizes and a mid-range buffer. The developers of this plugin recommend a buffer value of 60 to 70 for the best results, with lower numbers resulting in larger text and higher values resulting in smaller text.

fontFlex is tested and compatible with Chrome, Safari, IE 8+ and Firefox.

Users love to use the mouse wheel for scrolling functionality and Horwheel takes control of that feature with the ability to scroll horizontally. (This can be a great features for websites using some parallax scrolling techniques or other non-traditional navigation.)

The plugin is rather simple and easy to install and use. You need to require Horwheel and define a wrapper, then exclude the plugin function with the wrapper parameter in your code. You can use it with or without components, based on your preferred workflow.

The Horwheel plugin works with plenty of different browsers including Chrome for Windows and Mac, Firefox for Windows and Mac, Opera for Windows and Mac, Safari for Windows and Mac and Internet Explorer 7, 8 and 9.

Vide makes video backgrounds as easy as saying “jQuery.”

The plugin works with all modern desktop browsers, including Internet Explorer 9+. There is limited functionality for iOS and Android devices. Video works with iOS only in the native player; Android features are a little more unpredictable. Fullscreen poster mode is the default for each of these environments.

To use Vide just install using Bower and include the plugin. Include a video file using a common format such as “.webm” or “mp4” and create a still (poster) image file as a .jpg, .png or .gif.

Configure the correct path and options and you’re ready to go. The Vide plugin will resize automatically based on window size, although you have to option to disable this function.

Vide has a few other code specifications as well that are important to pay attention to during setup. You can find all the details and instructions in the plugin documentation.

Create colorful triangle meshes with SVG images and CSS backgrounds for any website design. The Trianglify plugin uses an algorithm to create beautiful triangle backgrounds so that you don’t have to pull your hair out trying to imagine a randomized design.

And you have complete control over the final rendering using a few simple tools. (You can download and install using NPM, Bower or CDNJS or try the Triangle Generator if you are concerned about the code.)

Start with the variance tool to determine the amount of randomness in the pattern. Then set a cell parameter to show how large or small each triangle can appear. Finally pick a color combination that works with your website hues. The plugin comes with a large number of preset options from the colorbrewer palette set that are ready to use. The colors range from monotone palettes to contrasting sets of color.

The final pattern can be output in canvas, SVG or PNG formats for ease of use no matter what your project type. And if you are still not quite satisfied, there are a few extra options as well in the code that you can adjust — such as background size, strokes, variance in triangle sizes in relation to one another and x and y color patterns.

The Scrolling Progress plugin indicates scroll progress of a content section, as you would expect from the name.

The plugin is designed using a two-part structure with a content area and progress bars. The animation changes based on your progression through a webpage.

It works because each section of the content has a unique identifier, which helps calculate the percentage. Each bar then has a link to smooth scroll to that section.

Progress bars are set with a fixed positioned as you scroll down the page. The progress bars in this plugin have a background color and a span element with its width animated to simulate the progress bar.

There are not a lot of preset options here, but you can alter the CSS as you see fit.

There’s a bit of code to process when using this plugin but once you get it installed, the result is quite nifty and has potential for use for a number of different types of websites. (All of the code is included in the demo so you can take a look to see if this is something you feel comfortable with before installation.)

Brick Work is a responsive jQuery plugin that can be used to create dynamic layouts. The goal of the tool is to create the best and most customizable layout options available and is designed to be easy for developers to use.

The plugin works with most all modern browsers including Chrome, Opera, Safari, IE 8+ and Firefox. The code is fairly lightweight at only 15kb.

The flexible grid options are robust and provide plenty of tools for creating a variety of layout styles. The plugin includes the following options and more:

• Animation
• Append
• Centering
• Direction
• Draggable
• Filter
• Fit Height
• Fit Zone
• Fit Position
• Fix Size
• Flex Grid
• Grid Layout
• Gutter Auto
• Hide Block
• Image Layout
• Multiple Instances
• Nested Grid
• Pinterest
• Prepand
• Render

Mix and match the tools to create a site that is truly yours and can be customized in more ways that you can imagine with just one little tool. All you have to do to use Brick Work is download the JavaScript file, source and go.