15 Interesting JavaScript and CSS Libraries for May 2016
Our mission at Tutorialzine is to keep you up to date with the latest and coolest trends in web development. That’s why every month we release a collection of some of the best resources that we’ve stumbled upon and deemed worthy of your attention. This May our list includes JS libraries for better scrolling, jQuery plugins for creating modals, a web boilerplate from Google, and much more!
Hint.css
Pure CSS library for adding tooltips to HTML elements. Hint is very compact in size, while still managing to offer lots of options for customization such as different sizes, colors and animations. It doesn’t require any coding, tooltips are created and styled by just adding the right data attributes.
Turntable.js
With Turntable.js you can effortlessly create cool rotating demos for 3D objects by placing a large array of images into a on-hover slider. This enables users to quickly go through the whole set of pictures, creating a flipbook effect and showcasing a product from all sides.
Magic
Magic is an animation library made entirely out of vanilla CSS. This makes it extremely lightweight and easy to use, as well as buttery smooth. All animations are triggered through adding or removing classes, and can be customized by simply overwriting the default CSS rules.
Sausage
Sausage is a jQuery tool that follows the scrollbar and keeps track of which section in a page we are reading. This plugin can be of great help when designing a big documentation hub or an infinite scrolling website, since a vertical pagination will keep things way more organized.
Odometer
The new word I learned today is odometer – that’s what the mileage gauge in a car is called. This JavaScript library with the same name recreates that gadget and can be used to add vertical transitions between numbers. It’s lightweight, easy to implement, and sports a number of great looking themes such as slot machine and train station.
FullPage.js
These days we see more and more websites use the full screen slide effect, where one touch of the scroll wheel changes the entire page. Unless you are extremely DIY oriented, this library is the perfect tool for implementing such functionality – it’s elementary to use, has detailed docs, and offers great browser support.
Chart.js
Awesome library for creating eye-catching animated charts. For better performance, Chart.js relies on canvas elements to draw all the graphs, but doesn’t require of you to know anything about canvas to work with it. All the customization options (and there are a ton of them) are controlled through a simple JavaScript API.
Bricklayer
JavaScript library for building Pinterest-like cascading grids. Working with Bricklayer isn’t complicated at all and in no time you will have a robust, repsonsive layout. It also has no external dependencies, which makes it really easy to integrate with Angular, React, or any other big framework.
Flatmarket
Flatmarket is an open-source project that provides one of the cheapest and easiest to operate platforms for e-commerce. It consist of a static website for the customers and a Node.js server that handles all the payments. A CLI tool is available that makes setting up a store from scratch much simpler.
Modaal
Modaal is a jQuery plugin for creating modal popup windows that has accessibility as it’s top priority. It provides many features that make sure the end product is available to everybody, easily readable and optimized for screen readers. Some of the good practices used in Modaal are adding keyboard controls, including ARIA attributes and maintaining proper focus.
Web Starter Kit
Web Starter Kit is a collection of tools that will help developers quickly set up their projects. It’s designed by Google and focuses on providing a boilerplate that works equally well across different devices and browsers. Some of the libraries included in this kit are MDL, Sass, Babel, and gulp for task automation.
Flipside
This is a button that transforms into a dialog. The cool thing about it is the transition, which varies depending on which part of the button the user clicked. Flipside isn’t a proper library but we enjoyed it a lot so we decided to share it anyway. If you want to use it, the source code is available on GitHub.
Responsify.js
Responsify is a jQuery plugin that guarantees an image remains responsive and showing the right content. This is done by adding an attribute to
<img> tags, where a focus area is defined. If the image has to be resized, Responsify will try and keep the focus area visible, and hide parts of the image that are less important.
Select2
Select boxes are still astronomically annoying to style across all browsers. Thankfully, there are plugins like Select2 which deal with that issue and offer painless embellishment of the select element and it’s options. This library also has useful extra features such as searching, infinite scrolling and IE8 support.
Vex
A tiny jQuery plugin for creating dialog pop-ups with a neat fake-3D animation effect. This library is only 2kb minified and gzipped so it practicly costs nothing to include in a project. It has a couple of available themes, and you can add your own customizations fairly easily as well.