By Danny Markov
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.
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 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 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 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.
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.
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 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.
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.
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.
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.