15 Interesting Frontend Libraries And Plugins For March 2016

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!


8_hamburgers

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.


5_superplacehodler

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.


10_slick

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.


4_a_frame

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.


3_lavalamp

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.


6_drift

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.


9_min

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.


11_okaynav

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.


12_pintsize

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.


13_velocity

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.


2_balloon

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.


15_vivus

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!

Presenting Bootstrap Studio

a revolutionary tool that developers and designers use to create
beautiful interfaces using the Bootstrap Framework.

Learn more
Web Browser Frame DevKit Box Mouse Cursor
by Danny Markov

Danny is Tutorialzine's Bootstrap and HTML5 expert. When he is not in the office, you can usually find him riding his bike and coding on his laptop in the park.

1Share this post
2Read one more article
3Get your free book
Book Cover
jQuery Trickshots

Tutorialzine's advanced jQuery techniques book.

Download

2 Comments

  1. Mamdouh says:

    Wonderful stuff

  2. Omar says:

    AWEOMSE !! Thank you very much, very helpful, specially A-Frame, think it's going to be very popular in the future...

Add Comment

Add a Reply

HTML is escaped automatically. Surround code blocks with <pre></pre> for readability.
Perks:   **bold**   __italics__   [some text](http://example.com) for links