15 Interesting JavaScript and CSS Libraries for March 2017

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.


propeller.jpg

Propeller

Propeller is a CSS components framework based on Bootstrap and Google's Material Design language. It includes 25 components made with responsiveness in mind and featuring the typical Material Design animations. The project can be downloaded as a theme for Bootstrap, a full framework, or as stand alone components.


baguettebox.jpg

BaguetteBox

BaguetteBox is a pure JavaScript library for creating responsive lightbox galleries. It is very lightweight, mobile-ready, easy to use and customize, and utilizes CSS3 transitions for buttery-smooth image transitions.

We recently used this library in the making of our freebie pack of 4 Bootstrap Gallery Templates, and we can say we enjoyed working with BaguetteBox a lot.


whitestorm.jpg

Whitestorm

Framework for developing 3D web apps and games using the Three.js engine. It provides straightforward wrappers for many common Three.js tasks, making it easier to set up an environment, create objects, add physics, and more. There is an official boilerplate project to get you started, as well as a tool for integration with React.


animatelo.png

Animatelo

Animatelo is a port of the extremely popular Animate.css library that replaces the CSS transitions with Web Animations API clones. All of the original Animate.css effects are recreated, but the API is now based on JavaScript methods instead of CSS classes. The library is lightweight and jQuery independent, but may require a polyfill on older browsers.


fusebox.png

FuseBox

FuseBox is a bundle loader for JavaScript and CSS with optional add-ons for TypeScript, Sass, and more. It is created with simplicity and performance in mind, providing a viable alternative to webpack. To get you started there are quick boilerplate projects for Angular 2 + TypeScript, React + Babel, Vue.js, Electron, and others.


yargs.jpg

Yargs

Yargs is a framework for building full-featured command line applications with Node.js. It allows you to easily configure commands, parse multiple --arguments, and setup shortcuts. It even generates help menus automatically.


webgradients.jpg

WebGradients

A large collection of beautiful color gradients that can be easily applied to any HTML page. The project's website allows you to quickly glance over the available gradients, see them in full screen, and one-click copy them as a CSS property.


stickykit.png

Sticky-Kit

Sticky-kit is a jQuery plugin that allows you to attach elements to a certain area on the page, making them stick to it's boundaries. This way you can have a sidebar that is always visible and scrolls with the rest of the page, but can be contained within its parent container.


scrolldir.jpg

ScrollDir

Super-lightweight, no-dependencies JavaScript library for monitoring scroll direction and movements. ScrollDir watches the movement of the scrollbar and toggles an up/down data-attribute on an element of your choice. It ignores small scroll movements, creating a smooth, non-jittery experience.


svgo.jpg

Svgo

Node.js tool for optimizing SVG files, stripping them from various unnecessary information such as editor metadata, comments, hidden elements, and other attributes that don't affect the rendered vector. SVGO has a plugin-based architecture, so you can freely choose what to remove and what to leave in.


storejs-1.png

Store.js

Store.js is a cross-browser solution for advanced local storage. Recently, a version 2 was released, refreshing many of the features and adding extra functionality, such as array/object operations and improved expiration options.

In the previous issue of our monthly web dev resources list, we featured a similar library called localForage. It provides many of the same features as Store.js, but has a more localStorage-like syntax. Make sure to check it out as well.


snarkdown.png

Snarkdown

Snarkdown is a super simple Markdown parser written in JavaScript. Admittedly, it's not the most complicated or full-featured parser, but it's probably the easiest to implement. Snarkdown is only 1kb in size and has only a single method, making it perfect for quick projects where a full parser would be overkill.


unfetch.jpg

Unfetch

The Fetch API is a modern rework of the XMLHttpRequest interface, giving developers a much better way to handle asynchronous requests. Although it's support now covers most modern browsers, the fetch() method is still unavailable in IE.

This brings us to Unfetch - a reliable polyfill in under 500 bytes.


scrollanim.png

Scrollanim

Vanilla JavaScript library for on-scroll animations. Scrollanim offers lots of customization options, separate HTML and JavaScript APIs, and over 50 smooth animation effects thanks to the built-in Animate.css dependency.


neurojs.png

Neurojs

JavaScript framework for experimenting with deep learning in the browser, featuring a full-stack neural network that can be trained via reinforcement-learning. The project showcases a cool Demo app where self-driving cars learn to navigate in a 2D environment.

Presenting Bootstrap Studio

a revolutionary tool that developers and designers use to create
beautiful interfaces using the Bootstrap Framework.

Learn more
Web Browser Frame DevKit Box Mouse Cursor

Related Articles

This discussion is closed.
Terminal-JS

Great article! I'm glad to see you guys posting more resources to help keep us up to date with new releases. Besides, sometimes I find some very interesting libraries or frameworks. And you showed me Vue.js which is great, also the tutorials for Vue.js is great! Keep up the good work. ;)

I would like to add to this beautiful collection my flipbook plugin http://3dflipbook.iberezansky.net/ It is really cool.

I know that its pretty late for commenting. But, I need some help, I want some CSS library. Most probably to make iframe responsive in existing HTML pages without editing. That would be a lot of help. And too, next time, please do include some interesting/awesome CSS libraries( bootstrap independent )