Weekly Web Design & Development News: Collective #209

Here's the 209th 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 #209

draggable

Get complete control over drag and drop behaviour with Draggable! Draggable abstracts native browser events into a comprehensive API to create a custom drag and drop experience. Draggable comes with additional modules: Sortable, Droppable, Swappable. Draggable itself does not perform any sorting behaviour while dragging, but does the heavy lifting, e.g. creates mirror, emits events, manages sensor events, makes elements draggable.

[Demo] [Download]

one-loader

A webpack loader to enable single-file React components.

Features

• CSS and JavaScript code co-located in a single .one file (extension is configurable)
• Configurable loaders for JavaScript and CSS
• Support for scoped styles through CSS Modules (using css-loader)

[Demo] [Download]

bubbly-bg

Beautiful bubbly backgrounds in less than 1kB (696 bytes gzipped).

[Demo] [Download]

st.js

JSON Selector + Transformer.

[Demo] [Download]

WebTorrent Element

An HTML element you can use to display content on WebTorrent.

[Download]

url-to-pdf-api

Web page PDF rendering done right. Microservice for rendering receipts, invoices, or any content. Packaged to an easy API.

[Demo] [Download]

micromodal

Lightweight, configurable accessible modal library written in pure JavaScript.

[Demo] [Download]

smile-to-unlock

Want to give away free content on your site? How about asking for a smile in return.

[Demo] [Download]

weex-ui

A rich interaction, lightweight, high performance UI library based on Weex.

[Demo] [Download]

overwatch

Overwatch is a general RPC monitoring system.

[Demo] [Download]

mimic.css

A CSS Animations Class Library Because Everyone Else Is Doing It.

[Demo] [Download]

stencil

Stencil: A Compiler for Web Components.

[Demo] [Download]

styled-system

Design system utilities for styled-components and other css-in-js libraries.

[Demo] [Download]

razzle

Create server-rendered universal JavaScript applications with no configuration.

[Download]

jadelet

Jadelet is the cleanest and simplest way to describe your templates. It is a breeze to learn. Jadelet attributes correspond directly with HTML attributes. If you know HTML then you already know Jadelet.

[Demo] [Download]

jam icons

Jam icons is a set of icons designed for web projects, illustrations, print projects, etc. Shipped in both font & svg versions.

[Demo] [Download]

HTML5 Canvas overlay erase effect

[Download]

CSS Grid Responsive Perspective layout

A CSS Grid layout using CSS perspective to give a 3D effect. JavaScript is used to make sure the item styling alternates correctly as the number of items on each row changes.

[Download]

Sliced Dual Image Layout

Some layouts with sliced background images, slideshow functionality and glitch effect.

[Demo] [Download]

iOS Design Kit

Screens and components of iOS 11 for iPhone X and iPhone 8.

[Download]

ESCAPE Typeface

[Download]