Collective #69
Inspirational Website of the Week

Great typography, interesting layouts and subtle effects can be found on the website of "Tool of North America". Our pick this week.
Get inspiredProgression.js

A very useful jQuery plugin that gives users real time hints and progress updates as they complete forms. Made by Aaron Lumsden.
Check it outAdapting To A Responsive Design (Case Study)

Matt Gibson from Cyber-Duck gives some interesting insights on why they abandoned a separate mobile website and reviews their process of creating a new responsive design in this case study on Smashing Magazine.
Read itWorking around a lack of element queries

An insightful article on some tentatives for solving the problem with media queries being relative to the browser window size and not to the element itself. A great discussion with some additional ideas follows.
Read itFlippant.js

Flippant.js by Christian Metts is a small library for flipping elements in 3D. It has no dependencies and it's easy to customize.
Check it outFontastic

If you are working with icon fonts then Fontastic will help you with a better workflow: an intuitive and beautifully designed interface will make all the steps for generating your custom icon font super easy.
Check it outSass & Compass Buttons

Buttons by Alex Wolfe is a CSS button library built with Sass and Compass that you can easily customize.
Check it outAdd Narration to Your Slide Deck With HTML5 Audio

Kevin Lamping explains how to add your voice to your slide deck with HTML5 audio.
Check it outCode Problems

A great collection of common code problems solved in JavaScript. It was created by Blake Embrey and you can contribute.
Check it outInstant Server

If you need a virtual private server instantly for some quick testing then this is definitely the most uncomplicated option.
Check it outMini Mail Application (PSD)

A pixel-perfect mini mail application mockup by Ionut Zamfir on PremiumPixels.
Get itPhoria 3D

Phoria.js by Kevin Roast is a JavaScript library for simple 3D graphics on a canvas 2D renderer that does not use WebGL.
Check it out200 Foodie Pack: A Free Set Of Food Icons

Some really nice food icons by Freepik featured by Smashing Magazine. The icons come in the formats PNG, AI and EPS.
Get itVectory mini free (PNG)

Vectory mini by Icojam is a free version of Vectory icons and includes 40×40 sized PNGs.
Get itFlat Browsers Set (PSD)

A set of flat browsers including Chrome, Safari and Firefox by Pixeden.
Get itSVG Workflow for Designers

Dan Mall explains how to create an efficient workflow for SVG as a designer.
Read itFree Font: Track type

Tracks type is an all caps font inspired by railway tracks. It was designed by Gumpita Rahayu.
Get itFrontend Development Bookmarks

A great and useful list of frontend development resources that were collected over time by Dimi Navrotskyy. You can contribute as well and a website is planned.
Check it outCSS Typography Cheat Sheet

Some tips and insights around CSS typography by Sven Read.
Read itFree website PSD: GoodInc.

A beautiful, flat travel website blog design by Blaz Robar.
Get it