15 Interesting Frontend Libraries And Plugins For March 2016

In this article we've gathered for you a collection of 15 awesome JavaScript and CSS libraries. Each one of them presents different solutions to common frontend tasks and can be of great help to both beginner and advanced developers. Check them out, you might find the perfect tool for your next project!

Hamburgers

Hamburgers is a collection of over 20 hamburger menu buttons. All of them have unique well-made animations that are done with pure CSS and are guaranteed to run as smooth as possible. A Sass version is also available for those of you who use pre-processors in your projects.

Loaders

This is a great resource containing a selection of well-designed, CSS-only loaders. Adding them to your website or app is very straightforward and probably the hardest part of doing so is choosing the loader you like most (our favorite is the pacman one).

Grd

Grd, as it's name suggests, is all about building grid layouts. The library is made with pure CSS, utilizes the flexbox model properties, and offers only the most necessary and useful features. All these factors result in a very small framework - just 512 bytes when Gzipped.

Superplaceholder

With Superplaceholder you can add one or more messages of your choice as placeholders to input fields. The library will then display these messages with a cool animation as if someone is typing them in. Thanks to the rich customization options, you have a great deal of control over how and when the animations will be shown.

Slick

Slick is probably the most complex and feature-rich carousel plugin out there. It enables manipulating every imaginable setting but does it in a user friendly way, thanks to it's well built API.

A-frame

This futuristic library allows you to create virtual reality experiences using only good ol' web technologies. After you've created your 3D world in HTML, A-frame will take it and split it into two screens with slightly different viewing angles. Now, you can run your demo on your mobile phone using Google Cardboard or another headset and have some serious VR fun.

Lavalamp

Infinite scrolling is getting a bad rep from both developers and users - it's often difficult to implement and frustrating when not done properly. Lavalamp is a JS plugin that offers a great alternative to infinite scrolling. Instead of automatically loading new content, you can add buttons at the top and bottom of the page for loading previous or next items.

Drift

Drift is an open-source JavaScript library for adding zoom-on-hover and magnifying glass effects to your website's images. It has great browser support, no external dependencies, and is relatively easy to implement.

Progress.js

With this library you can add progress bars to any HTML element of your choice, including tricky ones such as input fields, images and video. Every aspect of the bars can be modified either by the library's options or custom CSS styles.

Min

In just 995 bytes, Min is one of the world's most compact CSS frameworks. In its tiny package Min contains a classic 12-column grid, a good number of components and has great browser support.

OkayNav

This JavaScript and CSS library offers a fresh new take on responsive navigation menus. Instead of creating a bar that is displayed in its entirety on desktop and is collapsed on mobile, OkayNav tries to fit as many nav items as possible in the current browser size.

Pintsize

A CSS library for building advanced grid layouts. With Pintsize you have the option to create both Bootstrap-like grids and flexbox grids that adapt to the size of the content. The project's website has a good examples section including browser support and code snippets.

Velocity

Velocity is a JavaScript animation engine that combines the well-known API for jQuery's animate(), with pure CSS animations to provide fast, reliable, and easy to use transitions. If you find yourself using jQuery only for animating elements, you can seamlessly switch to Velocity for better performance.

Balloon.css

This CSS only library allows developers to add on-hover tooltips to elements on the page without including a single line of JavaScript. By adding data attributes to the HTML you can specify the content to be shown, the direction of the pop-up and other customization options.

Vivus

Small JavaScript library for animating SVGs as if they are being hand drawn. It has many options for animation style and even gives developers the ability to make their own. Vivus is inspired by this awesome Codrops article, it has some breathtaking demos, go check them out!