15 Interesting JavaScript and CSS Libraries for May 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.
Buefy
Ligthweight UI framework for Vue.js built using the popular flexbox-based CSS library Bulma. It has all the components a typical web app needs inluding dynamic elements like modals, toasts, and notifications, enableing devs to quickly add any user interface to their existing Vue.js projects.
HR.js
Zero-dependency library for programatically highlighting and replacing strings within the DOM. The HR.js API couldn’t be simpler – just use a CSS selector to target the parent HTML element holding the desired text, choose which words to highlight, set the background color, and you’re done!
React VR
React VR is a framework for the creation of VR applications that run in your web browser. It pairs modern APIs like WebGL and WebVR with the declarative power of React, producing experiences that can be consumed through a variety of devices.
Tippy.js
Pure JavaScript library for animated tooltips. It provides a wide range of different on-hover effects and a ton of customization with over 20 options. Tippy.js is super ligthweight and has rather good browser compatibility, automatically falling back to regular title attributes when not supported.
Barba.js
Dependancy-free JavaScript library for creating smooth transtitions between the views of your single page apps. The logic is built around PJAX (push state AJAX) which checks all valid URLs, prevents their normal behavior and instead loads the new page via a XMLHttpRequest. Barba also makes sure the change in state is properly reflected in your app’s URL via the Push State API.
UIkit
Excellent CSS and JavaScript front-end framework, including its own SVG icon font and dozens of components. UIkit is designed very well, both in looks and as a framework, with unified styles, easy to remember API, many customization options, and useful modifyer classes. The docmentation is also top-notch.
Haul
Haul is a command line tool for developing React Native apps. It can be used as a direct replacement of the React Native packager, providing better webpack support, improved error messages, and greatly reduced compilation times. Haul is well documented, customizable, and completely open-source.
AcrossTabs
JavaScript library for communicationg between cross-origin browser tabs, making it possible for one web page to open and close additional browser tabs. The parent tab has access to useful information about its children tabs, including unique ids and whether the child tab is still open or has been closed.
Stylelint
Stylelint is a modern CSS linter that will help teams eforce unopinionated CSS standards in their stylesheets. The library is pretty powerful and can forbid or whitelist specific properties, catch errors, and recognize SCSS syntax. Stylelint is totaly cusotmizable, giving you the option to add new rules or opt-out of those that you don’t agree with.
Iconate
Awesome vanilla JavaScript library that allows you to transform one icon to another on click, with a variety of smooth animations. Iconate works with all CSS icon fonts – just add an icon to your HTML and use the simple JavaScript API to choose what to transform it into and which of the 15+ animations to use.
React-Datasheet
React component that can be used for adding fully functional Excel-like datasheets to your apps. Table cells can be freely edited, group-selected, copied, pasted, deleted, and everything else you’d expect, with keyboard navigation also available. There are 3 useful examples on their GitHub – a basic table, spreasheet with formulas, and table with nested components.
Pure CSS
Modular CSS framework with a minimal footprint. The entire library is just 3.8 kb minified and gzipped but this size can be further reduced by excluding the parts you don’t need. Modules include a base set of styles, a responsive grid, form components, buttons, tables, and menus.
Simple Icons
Huge collection of free icons for popular social networks, apps, services, and other brands. Since all the icons are made with SVG they can be scaled to any size without fear of pixelation or smudges. Being SVG-based also makes them super lightweight – most are under 500 bytes, more detailed ones around 1 or 2 KB.
Chroma.js
Tiny JavaScript library for working with colors. It offers a rich API with over 50 functions for manipulating colors, letting you swtich between color modes, change brightness and saturation, create gradient scales, and many other useful methods.
Weex
Weex is a framework for building cross-platform mobile apps, similar to Reat Native but for Vue.js. It allows you to write your app in HTML, CSS, and JavaScript, which then will be rendered in Java for Android and Swift for iOS. The framework has a number of built-in components, APIs, and other helpful utilites.