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.

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.

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.

This nifty little plugin helps manage your popup windows, including tool tips, notices and more. jBox is packed with powerful options and a few surprises for anyone that might want to use an online notification.

There are eight tool tip options — from basic tool tips to no-close options to color and style choices to click and scroll features.

There are four modal window tools — basic, draggable, ajax and submit. Plus, four notice tools with positioning at the top or bottom of the screen and visual options such as color.

The final style for jBox includes to image gallery formats.

This plugin is ready to go and easy to use right from the install. It’s optimized for retina screens, will work in any environment including IE 8+ and is lightweight, at only 19kb.

The only thing left to do is get started with jBox and all the customizations you can make for notification and popup windows for your website design.

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.