Fresh Resources for Web Designers and Developers (February 2016)

2015 was a great year for the web: web technologies have been adopted in many form factors beyond for building a website or a web application. Many mobile and desktop applications are now built using HTML, CSS, and JavaScript. This is made possible by the portability nature of web technologies and libraries such as React.js, Angular and Node.js.

So, in today’s installment of this series we have put together a handful of JavaScript and CSS libraries.

Flat Slider

jQuery UI comes with a collection of common web interface including a Slider — a UI which allows user to select a range of numeric values. The Flat Slider is a web tool that makes customizing the jQUery UI style, which was once a very daunting task, a lot easier now.

Utility Open-type

Utility Open-type is a collection of drop-in classes to apply advanced CSS typographic features such font ligatures, small capital letter, and a lot more. They basically give the best possible reading experience for your users in fine detail. It degrades nicely in older, unsupported browsers.

ResponsifyJS

One of the notorious constraints responsive images face is it usually does scale the image properly, but this diverts the main focal point of the image when it is scaled down to a very small viewport size.

ResponsifyJS is lightweight JavaScript library that you can use to set coordinates to maintain the image focus while it is being resized.

Linear

Linear is a ruler app for Mac. You can use the ruler to measure web pages, find out the size of an element without having to open the DevTools or figure out if an element is perfectly centered. You can have multiple rulers, and switch the unit from PX to EM.

StickyStack

StickyStack is a jQuery plugin to create a stack scrolling experience, when a panel reaches the top of the viewport, it sticks there, while further scrolling pulls up the next panel. It is a lightweight plugin with a few options to configure the page container, stack section, as well as the box-shadow of the stacks. Check out the demo.

Viewer

Viewer is jQuery plugin for image lightbox — a fancy popular way to zoom-in images on the web. The plugin comes with an overwhelming options that allows you to customize every bit of the lightbox interface.

The plugin also provides a set of APIs and custom Events for total control over the lightbox response and behavior. What’s more, it works down to Internet Explorer 8.

Read more: 15 Lightbox Libraries For Mobile Responsiveness

DeviceMock

DeviceMock is a JavaScript library that allows you to create device frames or mockups such as a phone, a tablet and a desktop. Likewise, the library providse options to set the theme color of the frame, the size, as well as the frame orientation.

It may be a good alternative to showcase your web and app in place of using Photoshop.

Clrs

Clrs is an initiative to redefine default web colors into a more eye-friendly, modern color tone. Additionally, it advocates a set of color combinations for better accessibility. You can deploy these colors through NPM, Gem (Ruby), and Photoshop and Illustrator color swatches.

BookBlock

BookBlock is jQuery plugin to create a booklet with the page-flip effect. It is a beautiful alternative to display multiple images on your website, particularly if there is a sequence or flow that you want to showcase.

You can check out the demo here to get an idea of how BookBlock works.