Focal Point: Intelligent Cropping of Responsive Images

The practice of implementing responsive images is still in its infancy. We’ve seen a lot of ideas and suggestions for how it should be done and we’re bound to see a lot more. Today Design Shack going to look at a fascinating little framework that allows you to not only automatically resize your images when the viewport changes, but also crop the images with a specific important focal point in mind. Amazingly enough, it does all this with pure CSS.

Focal Point: Intelligent Cropping of Responsive Images

Source Website & Download

Adaptive Thumbnail Pile Effect using jQuery & CSS3

This experimental jQuery plugin allows the automatic grouping of thumbnails using a pile effect. The thumbnails will group according to their shared data-pile attribute and once clicked, the pile will disperse and its thumbnails fly to their positions. The thumbnails can be slightly rotated or positioned with a delay. The grid itself is adaptive, meaning that if there is not enough horizontal space considering the width and the gutter of the items, the column count will decrease and the grid will re-order.

Adaptive Thumbnail Pile Effect using jQuery & CSS3

View Demo  Source Website & Download

Adobe Edge Inspect: Preview & Inspect Web Designs on Devices

Edge Inspect is an application for web developers and designers who are working on mobile web projects. Edge Inspect enables you to work more efficiently by providing synchronous browsing, remote inspection and the ability to take screenshots of your mobile web content from connected devices.

Adobe Edge Inspect: Preview & Inspect Web Designs on Devices

Source Website & Download

Date Range Picker for Twitter Bootstrap

The date range picker relies on jQuery, Datejs for parsing strings into dates and defining custom ranges, and the Twitter Bootstrap CSS. For basic use cases like collecting event or reservation dates, you can attach it to a text input to pop up two clickable calendars to choose dates from. For more advanced use cases, you can attach a date range picker to any element, pre-define your own date ranges for the user to choose from, and set a custom callback function to receive the chosen dates.

Date Range Picker for Twitter Bootstrap

Source Website & Download

PFold: Paper-Like Unfolding Effect

PFold is a very experimental jQuery plugin that makes it possible to open elements in a paper-like unfolding effect. An element can be unfolded in 3D in order to reveal some other content. The idea is to have several levels of folding, where each step of opening will double the element size, hence imitating a folded paper being opened. A couple of options are available, such as the unfolding direction for each step and the number of folding steps. For browsers that don’t support CSS 3D transforms or transitions, there will be a simple fallback, i.e. the larger content appears.

PFold: Paper-Like Unfolding Effect

View Demo  Source Website & Download

Build APIs for Web and Mobile Apps in Minutes

Deployd is a platform that makes building complex backends simple. Build APIs for web and mobile apps in minutes instead of days. Unlike working with a traditional backend, there’s no boilerplate, or configuration. Deployd works right out of the box. The best part is that you can run it however and wherever you want – it’s free and open source.

Build APIs for web and mobile apps in minutes

Deployd is designed to replace traditional backends for web and mobile apps. Perform advanced queries over HTTP. Push data to clients over WebSockets in real time. Transform and validate your data as it changes.

Source Website & Download