Weekly Web Design & Development News: Collective #89

Here's the 89th Weekly Web Design & Development Collective that aims to introduce fresh new, trendy and easy-to-use web design & development resources (freebies, codes, graphics, tools, inspiration, etc) from the past week. Have fun with it and remember to share with your friends.

Web Design & Development News: Collective #89

dynamics.js

Dynamics.js is a JavaScript library to create physics-based animations

[Demo] [Download]

gradify

A module to produce CSS gradients as placeholders for images.

[Demo] [Download]

ToProgress

A lightweight (2.2 KB), no-dependency top progress bar library.

[Demo] [Download]

InfiniteList

A 60fps infinite scrollable list for mobile devices. There are some implementation of infinite scrolling out there. The best of them renders to the DOM only what the user sees on screen at a give time and use GPU acceleration for translating items. These techniques are used in this implementation too, but in order to achieve smooth scrolling in a list with complex items with complex DOM, or when the user scrolls fast even on old devices they are not enough.

In addition this list implements the following: 1. Recycling of Dom elements in a similar way that iOS and Android does at UITableView and RecyclerView. 2. Detect when the system is busy or the frame rate frequency is about to get lower and skip unnecessary work to enable smooth scrolling 3. Enable the user to use whatever rendering technique he likes. This gives the ability to use React, for example, to render recycled items and benefit high performance rendering of list items.

[Demo] [Download]

simple-sliderbar

SliderBar is a simple and lightweight vanilla JS slider.

[Demo] [Download]

CSS Slide In Menu

[Demo] [Download]

WinJS Grid Framework

A CSS grid framework built on SASS to provide an automatic responsive grid for web developers with flexibility for manual control when needed. This grid is a float and padding-based grid, meaning that it works by using floats to create rows and padding to create the gutters between columns instead of margin.

[Demo] [Download]

ExpertCamJS

javascript Camera handler with some options.

[Demo] [Download]

Only CSS

Yet another CSS3 animation library.

[Demo] [Download]

zoomwall.js

A content-focused photo gallery using a horizontal masonry layout that scales up in lightbox mode.

[Demo] [Download]

ihover

iHover is a collection of hover effects using pure CSS, inspired by codrops article, powered by Sass.

[Demo] [Download]

shower

Shower HTML presentation engine

[Demo] [Download]

accounting.js

accounting.js is a tiny JavaScript library for number, money and currency parsing/formatting. It's lightweight, fully localisable, has no dependencies, and works great client-side or server-side. Use standalone or as a nodeJS/npm and AMD/requireJS module.

[Demo] [Download]

voyeur.js

Voyeur is a tiny (1.2kb) Javascript library that lets you traverse and manipulate the DOM the way it should have been.

[Demo] [Download]

vn-carousel

A simple jQuery-free carousel. Uses Hammer.js for handling touch events.

[Demo] [Download]

woofmark

Barking up the DOM tree. A modular, progressive, and beautiful Markdown and HTML editor.

[Demo] [Download]

Card Expansion Effect with SVG clipPath

A morphing card expansion effect enhanced by a low poly background animation, using SVG clipPath and Trianglify.

[Demo] [Download]

Filterable Product Grid

A responsive product grid layout with touch-friendly Flickity galleries and Isotope-powered filter functionality.

[Demo] [Download]

ETNA - Free font

The ETNA comes with 415 glyphs, cyrillic and latin extended. The typeface is custom made with maximum precision and sourcing high aesthetics. The flow of the letters is seamless and easy to read with great bold accents.

[Download]

QUIP (Free font)

[Download]