Collective #69
Inspirational Website of the Week
![Collective69_toolofna](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2013/06/Collective69_toolofna.png?x86293)
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
![Collective69_progression](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2013/06/Collective69_progression.png?x86293)
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)
![Collective69_adaptrwd](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2013/06/Collective69_adaptrwd.png?x86293)
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
![Collective69_lackelementqueries](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2013/06/Collective69_lackelementqueries.png?x86293)
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
![Collective69_flippant](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2013/06/Collective69_flippant.png?x86293)
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
![Collective69_fontastic](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2013/06/Collective69_fontastic.png?x86293)
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
![Collective69_buttons](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2013/06/Collective69_buttons.png?x86293)
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
![Collective69_narration](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2013/06/Collective69_narration.png?x86293)
Kevin Lamping explains how to add your voice to your slide deck with HTML5 audio.
Check it outCode Problems
![Collective69_problems](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2013/06/Collective69_problems.png?x86293)
A great collection of common code problems solved in JavaScript. It was created by Blake Embrey and you can contribute.
Check it outInstant Server
![Collective69_instantserver](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2013/06/Collective69_instantserver.png?x86293)
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)
![Collective69_minimailapp](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2013/06/Collective69_minimailapp.png?x86293)
A pixel-perfect mini mail application mockup by Ionut Zamfir on PremiumPixels.
Get itPhoria 3D
![Collective69_phoria](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2013/06/Collective69_phoria.png?x86293)
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
![Collective69_foodicons](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2013/06/Collective69_foodicons.png?x86293)
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)
![Collective69_Icons](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2013/06/Collective69_Icons.png?x86293)
Vectory mini by Icojam is a free version of Vectory icons and includes 40×40 sized PNGs.
Get itFlat Browsers Set (PSD)
![Collective69_flatbrowsersset](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2013/06/Collective69_flatbrowsersset.png?x86293)
A set of flat browsers including Chrome, Safari and Firefox by Pixeden.
Get itSVG Workflow for Designers
![Collective69_svgworkflow](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2013/06/Collective69_svgworkflow.png?x86293)
Dan Mall explains how to create an efficient workflow for SVG as a designer.
Read itFree Font: Track type
![Collective69_trackstype](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2013/06/Collective69_trackstype.png?x86293)
Tracks type is an all caps font inspired by railway tracks. It was designed by Gumpita Rahayu.
Get itFrontend Development Bookmarks
![Collective69_febookmarks](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2013/06/Collective69_febookmarks.png?x86293)
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
![Collective69_typography](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2013/06/Collective69_typography.png?x86293)
Some tips and insights around CSS typography by Sven Read.
Read itFree website PSD: GoodInc.
![Collective69_goodinc](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2013/06/Collective69_goodinc.png?x86293)
A beautiful, flat travel website blog design by Blaz Robar.
Get it