Design your way

I have postponed this article for far too long and I noticed only when my shortlist for this article kept getting bigger and bigger. In the end I had to cut a few jQuery plugins and other webdev resources that were slightly less important than these below in order to have a decent number of items in the article, and not a humongous list.

As you may be accustomed with these articles that are posted once in a few weeks, there are various resources to choose from which cover various issues that a web designer/web developer might encounter.

Bliss

Want to use Vanilla JS but find native APIs a bit unwieldy? Bliss is for you. Bliss is just a collection of helpers and light syntactic sugar over Vanilla JS. It does not account for browser bugs or lack of support of certain APIs, although it only uses features that are both supported across most modern browsers and can be polyfilled.

clipboard.js

Copying text to the clipboard shouldn’t be hard. It shouldn’t require dozens of steps to configure or hundreds of KBs to load. But most of all, it shouldn’t depend on Flash or any bloated framework. That’s why clipboard.js exists.

GridLayout

Why use GridLayout? If you need to create complex app layouts, similar to native ones, with support for older browsers. GridLayout is a ~1 KB (minified and gzipped) CSS file and a ~0.5 KB JavaScript file used only for Internet Explorer support.

PriorityNav

PriorityNav is a lightweight pure javascript plugin that will move your menu items if they don’t fit its parent.

wallop

wallop is a minimal 4kb library for showing & hiding things. In a nutshell, wallop takes a collection of HTML elements and Previous & Next buttons, and adds helper HTML classes in the correct elements based on whether you want to navigate forwards or backwards.

ESLint

ESLint is an open source project originally created by Nicholas C. Zakas in June 2013. Its goal is to provide a pluggable linting utility for JavaScript.

Corpus

Corpus is yet another CSS toolkit. It uses Flexbox for the grid system, viewport-based heights and percentage-based widths, is heavily influenced by Basscss’s White Space module, and has a few useful greyscale color utilities.

JointsWP

JointsWP is a blank WordPress theme built with Foundation 6, giving you all the power and flexibility you need to build complex, mobile friendly websites without having to start from scratch. This includes a mobile-first grid system, basic styling for common elements, Javascript features such as an off-canvas navigation and much, much more.

Popmotion

Make it pop with animation, physics, and input tracking. In the browser, on Node, anywhere.

Amalia.js

Amalia.js is a new extensible and versatile HTML5 multimedia player that allows you to view any type of metadata along with your video or audio streams. It follows the responsive design guidelines.

tauCharts

Taucharts is a data-focused javascript charting library based on D3 and designed with passion.

notie.js

notie.js is a clean and simple notification plugin (alert/growl style) for javascript, with no dependencies.

plotly.js

Built on top of d3.js and stack.gl, plotly.js is a high-level, declarative charting library. plotly.js ships with 20 chart types, including 3D charts, statistical graphs, and SVG maps.

Avalanche

Avalanche gives you a choice of three naming conventions for your width class names: fraction (1/4), percentage (25) or fragment (1-of-4). No need to spend time working out how many columns are in your nested layout – if a cell needs to take up half the width of it’s container, tell it to!

AntiModerate

Reduce loading time of page to less than a second on slow connections by loading and rendering nicely blurred micro images on the page while loading full sized images in background which replace as they finish.

Sierra Library

This is a micro SCSS library to help you build websites, without all the arbitrary selectors.

Jump.js

Jump was developed with a modern JavaScript workflow in mind. To use it, it’s recommended you have a build system in place that can transpile ES6, and bundle modules.

CSSgram

Simply put, CSSgram is a library for editing your images with Instagram-like filters directly in CSS. What we’re doing here is adding filters to the images as well as applying color and/or gradient overlays via various blending techniques to mimic these effects. This means less manual image processing and more fun filter effects on the web!

Matreshka

Matreshka is a framework for massive and endlessly extending single page applications (within the Universe, of course), written in JavaScript. It allows you to build program architecture so that neither your team nor you can get confused in plentiful entities, logic described in HTML files, numerous restrictions of other frameworks and incomprehensible abstractions.

Stretchy

Shift.css

Shift.css provides a simple framework to build timed, contained CSS animations. Within your defined “Shift Container” you can animate a wealth of HTML elements, you can also animate nested elements and adaptive elements like the example above.

FieldKit

FieldKit provides real-time, text field formatting as users type. It simplifies input formatting and creates a more polished experience for users, while outputting standardized data.

Dropify: Override your input files with style

Jets.js

Imagine a situation – your HTML markup renders at backend side, it contains some list of data. At one point you need to implement search by this list. It can be easily achieved by using Jets.js with a browser’s native search speed.

UpUp – Kickstarting the Offline First Revolution

UpUp is a tiny javascript library that makes sure your users can always access your site’s content, even when they’re on a plane, in an elevator, or 20,000 leagues under the sea.

Mobile-First has become the de-facto standard for building modern sites. But in a world where everyone is mobile, an always-on connection isn’t something we can rely on. It’s time to start thinking Offline First.

With UpUp you control the content your users see, even when they are offline. And you can do it with just a single JavaScript command.

Source: http://ift.tt/PsENNn