Collective #103

View All

Grid * Placeholdem * Dug.js * Design Lab * New CSS Shapes Syntax * pageres * GitHub goes to school

Cover design by Emanuel Serbanoiu
collective 103

Inspirational Website of the Week: Weecom Digital Agency


Weecom's website has a refreshing color scheme and some creative animations. Our pick this week.

Get inspired



A beautiful and well-made guide to responsive web design and the usage of grids by Adam Kaplan.

Check it out



Jack Rugile created this little JavaScript plugin that animates placeholder carets on inputs and textareas.

Check it out

Dug.js: A JSONP to HTML Script


A very useful, light-weight script for pulling JSONP from various APIs and display it using customized markup. Made by Rogie King.

Check it out

Outdated UX patterns and alternatives


A great summery and analysis of the "Outdated UX Patterns" section of North. By Brian Krall.

Read it

Design Lab


Bilal Mechairia's animation explorations will give you some wonderful inspiration.

Check it out

Random User Generator Photoshop extension


The Random User Generator can now be used in Photoshop with this useful extension.

Get it

New CSS Shapes Syntax


Read all about the new syntax for CSS Shapes in this article on the Web Platform Team Blog.

Read it

Creating A Client-Side Shopping Cart


Gabriele Romanato explains how to use session storage on the example of a simple shopping cart in this in-depth tutorial.

Check it out

Free Font: Streetwear


A bold and stylish retro inspired script typeface designed by Artimasa.

Get it

UI Animation and UX: A Not-So-Secret Friendship


A nice article about animations with tips on how to use them properly by Val Head on A List Apart.

Read it



Get screenshots of websites in different resolutions with this little app. It generates 100 screenshots from 10 different websites in just over a minute. Made by Sindre Sorhus.

Check it out

Make a Flippin’ 3D Countdown with CSS & JavaScript


Doug Avery shows how the countdown component from the Gear in Action interactive lookbook works.

Check it out

GitHub goes to school


GitHub launches, a site dedicated to using GitHub at school with free micro accounts for students and teachers and great educational discounts.

Check it out

Free Font: Mink Type


A creative, hand-drawn display typeface by Filiz Sahin.

Get it

HTML5, CSS3, and the Bookmarklet that Shook the Web


Read how the fun Harlem Shake bookmarklet was done in this article on Mozilla Hacks.

Check it out

CMS Administration – Profile Details (PSD)


A lovely and clean Photoshop design from

Get it



For Mac users who would like to create screencasts super quickly.

Check it out

Year of the Horse


Send your happy horse year wishes by creating your own rider and horse on this classy website by Knock.

Check it out

Would you like to become a Collective sponsor?

You can sponsor a Collective issue with your own news item. Find out more.

Would you like to send us some news?

The Collective features the latest news and resources from the web design & web development community. If you have spotted or created something that you'd like see published in the next issue, just submit the resource or article here.