15 Interesting JavaScript and CSS Libraries for November 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 handpicked collection of some of the best resources that we’ve stumbled upon and deemed worthy of your attention.

November's list is here and it is packed with some amazing GitHub projects. It includes new CSS frameworks, a node.js package manager from Facebook, and a couple of awesome CSS-only solutions for icons, loading spinners, and tooltips.


wing.jpg

Wing

Wing is a minimalistic CSS framework that can be used for setting a solid base to your websites. Like all CSS frameworks these days, Wing has a 12-column responsive grid and a collection of styled components. The cool thing about this particular project is that most HTML elements are automatically styled and don't need any extra classes.


shave.png

Shave

JavaScript library that truncates multi-line text, so that it can fit within the boundaries of a HTML element. The original string is stored in a hidden <span>, so that your text remains in the page in its entirety. Following a trend seen in many modern libraries, Shave has no dependencies and instead offers a separate version for plugging it in with jQuery.


cerebral.jpg

Cerebral

A JavaScript MVC app state manager that comes with its own debugger. In Cerebral, the state of your application is stored in a single tree model that manages all server- and client-side states. The debugger has authority over the model, controller, and view, and can be used to manage them in real time.


wenk.png

Wenk

Wenk is a tiny library that provides CSS-only text tooltips. The whole thing is only 700 bytes, but still manages to provide a handful of customization options such as different tooltip sizes, placements, and text alignment. Probably the quickest way possible to get tooltips up and running.


cssloader.png

CSS Loader

CSS Loader is a very helpful library that allows developers to quickly create loading indicators out of pure CSS. There are many different spinner designs included and they can all be created using only a single <div> element.


yarn.png

Yarn

Yarn is a fancy new node.js package manager by Facebook. Its main selling points are a powerful caching system, fast install times, and a reliable file organization that keeps every instance of your project installed the same way. Although they are quite different under the hood, using Yarn is almost identical to using npm, and developers can get familiar with it quickly.


canvas-gauges.jpg

Canvas Gauges

JavaScript library for creating speedometers, compasses, thermometers, and all other kinds of measuring devices. The gauges are displayed in a HTML canvas and are fully customizable, as can be seen in the examples section of their website.


cssicon.png

CSS Icon

A growing collection of over 500 icons made entirely out of CSS. Using icons from this font is extremely simple, and there is even an option to animate from one icon to another. We also have to give +10 points to this project for its awesome website, that lets you see exactly what part of the CSS represents what element of the icon.


currencyformatter.png

CurrencyFormatter.js

As you can tell by the title, this is a library for formatting numbers and strings to various currency standards. It supports 155 currency formats and over 700 locale definitions for country specific formatting. Also, if for some reason the format you are looking for isn't included, you are free to define your own.


kute.png

KUTE.js

Native JavaScript animation engine featuring a fully modular architecture. The core library provides all the basic animation methods, and numerous plugins can be added to enrich KUTE's functionality. There are separate extension for working with jQuery, SVGs, CSS properties, and others.


vuematerial.jpg

Vue Material

A lightweight Vue.js framework following closely the Material Design Guidelines. It offers a collection of high-quality components, many of which are designed toward mobile devices and provide native-like interactions and animations. The library is easy to implement, and doesn't have any dependencies apart from Vue.js.


testcafe.png

Test Cafe

Test Cafe is a platform for running tests on your web apps. It is node.js based and doesn't require you to install anything other than the npm package - no browser plugins, no compilators. Once you've written your tests, running Test Cafe will do everything else for you, including starting browsers for testing, gathering results, and creating a report.


core-css.png

Core.css

A super lightweight CSS reset and grid system in only 1.3 kb. Core.css can be used as the base for any small web projects where you don't need all the features of a full blown framework such as Bootstrap or Foundation.


flv.png

Flv.js

With this awesome library you can enable the standard HTML5 video player to support FLV files. The library works with a simple JavaScript API and there is absolutely no Flash involved. Just grab an existing video element on the page and call the flvjs.createPlayer() function to turn on FLV playback.


next.png

Next.js

Next.js is an interesting experimental project. It is a Node.js framework that can server-render JavaScript web apps built with React. This allows developers to work on their websites in Node, and do all the back-end routing and front-end logic in one place.

Bootstrap Studio

The revolutionary web design tool for creating responsive websites and apps.

Learn more

Related Articles

Tnx for sharing:)

Hey man, I've been catching up to this series and I love it. Through it I found offline and logerr, which are now integral to many of my projects. If I am allowed to, can I suggest you a library to consider for your next article ? shameless plugin