15 Interesting JavaScript and CSS Libraries for June 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.

For June 2016 we've selected for you 15 free libraries which will help you build better responsive layouts, do advanced JavaScript magic, add beauty to your projects, and much more!

Bideo.js

Use Bideo to make your landing pages cooler by adding a fullscreen video to the background. This library can be used on any HTML page, and will make sure that your video is responsive and always displayed correctly. It also offers auto play as well as showing a static cover image in case the media file takes a couple of seconds to load.

Push

Push notifications have had good browser support for a while now but have always suffered from a lack of a working cross-browser API. Push.js is a library that comes to solve this issue and offer a clean, universal way to control desktop notifications that work equally well in Chrome, Firefox, Safari and IE.

Cutestrap

Cutestrap is a CSS framework that serves as a smaller, more compact alternative to Bootstrap. In it's 8kb the library packs a number of well-styled UI components, an advanced responsive grid, as well as a bunch of useful modifier classes. Due to it's simplicity Cutestrap is very easy to customize via overwriting the default styles or by using Sass.

Timedropper

Timedropper is a time picker with a superb design and buttery-smooth animations. It's built on top of jQuery and can be initialized on any input field with a simple $('#some-input').timeDropper(); call. We also highly recommend Timedropper's brother - Datedropper, a wonderful date picker which we've already included in one of our previous monthly lists.

CSSgram

CSSgram is a library that offers more than 20 Instagram filters recreated using the CSS filter and blend properties. It doesn't rely on JavaScript to achieve the desired effect, so it's extremely simple to use - either through vanilla CSS or Sass. CSSgram works in all desktop and mobile browsers except for IE which doesn't support CSS filters.

Flexbox Grid

Pure CSS library for creating responsive gird layouts. As the name suggests Flexbox Grid is based entirely on the flexible boxes model, which is the most modern and robust way to build layouts in HTML. Grids created using flexbox properties are very adaptive and can be aligned and positioned with little to no effort.

Intense Images

A beautiful image viewer that allows users to zoom into any media object and examine it closely in full screen. The library manages to look great without having any fancy animations or styles, which also makes it really easy to customize and tailor to your needs. Intense images has no external dependencies and should work in all modern browsers.

Picnic

Picnic is a CSS framework that differentiates itself from the huge array of front-end libraries with one unique quality - invasiveness. What this means is that Picnic CSS doesn't rely on the user to add classes to each element for styling. Instead it invades the default styles of the page and automatically adds it's customization to all HTML elements, leaving the markup short and clean.

Embed.js

JavaScript plugin for embedding emojis, media, maps, and all kinds of cool stuff in HTML text. When initialized on an element, Embed.js will take it's inner text and replace specific markup in the string with special content: YouTube links turn into video, Twitter links into tweets, Spotify links into audio players, etc. A long list of services are available including Github, SoundCloud, Codepen, Instagram, and many others.

Trianglify

Trianglify is a JavaScript library for creating geometric gradient images. After setting up the dimensions of your gradient and how it should look (colors, size of cells, etc.), the end result can be drawn directly into a canvas, as an SVG DOM node, or exported as a base64 data URI. An online generator is also available.

SweetAlert2

Replace the default alert and prompt JavaScript popups with colorful, animated dialog boxes. There are five different types of messages, lots of customization options, and all the methods you'll ever need. SweetAlert2 has great browser compatibility and as a result you'll get popups that look the same way across all operating systems and web browsers, including IE 10+ and Edge.

Adaptive Backgrounds

This jQuery plugin analyzes images and finds out what is their most prevalent color. The primary color is then extracted and can be applied as the background of any selected HTML element. With a sprinkle of creativity this library can be used to create amazing web designs and demos.

Typed.js

With Typed.js you can replace the boring placeholders in input fields with animated ones. Just write down one or more example strings and this jQuery plugin will display them in your form as if they are being typed in. There are also some customization options such as different cursors, type speed, looping, and more.

Tabslet

A jQuery plugin for creating tabbed content, which can also be used for making carousels and paginations. Tabslet is very lightweight, but still manages to offers a ton of useful options such as animations, different event listeners, and exceptional browser compatibility with support going all the way back to for IE7.

ContentTools

ContentTools is a powerful JavaScript library that can transform any HTML page into a WYSIWYG editor. There are detailed step-by-step tutorials on the project's website which will help you get it up and running, and once properly installed ContentTools reveals countless possibilities for building wondrous interactive apps and services.