Bi-Weekly Frontend News

Collective #61

Inspirational Website of the Week


Adam Hartwig's website is just an explosion of creativity; it's incredible fun to explore it. Our favorite this week.

Get inspired

Web Colour Data


An excellent tool to discover the colors of a website and get a better insight on what colors are used in which types of design. Made by Ri Liu and Bo Jeanes.

Check it out

Thank God We Have A Specification!


Rodney Rehm puts together a collection of useful things to know about CSS transitions, the quirks and issues and some tips on how to avoid the pitfalls.

Read it

Infographic Design Process


Veerle Pieters gives us some inspiring insight on her work process using one of her latest infographic projects. A great read for any graphic designer.

Read it

The Nature of Problems

Read about the very nature of problems, the (wrong) ideas that we have about them and how important it is to recognize them for what they are, in this article by Frank Chimero.

Read it

Bklyn Icon Set


Bklyn is a free little icon set that symbolizes contemporary Brooklyn culture. It was designed by Gulay Inceoglu.

Get it



Editr by Kasper Mikiewicz is an open-source, ACE based HTML, CSS and JavaScript playground that you can easily setup and host on your server.

Check it out

Free Font: Verb Condensed Extralight


Verb Condensed from Yellow Design Studio is a modestly condensed version of the original Verb family, taking on more classic sans-serif proportions. You can get the Extralight style for free.

Get it

Animating with Physics


Ben Taylor talks about the difference between classic UI animations and the use of a physics engine to simulate more real animations in applications.

Read it

Your First Backbone.js App – Service Chooser


In this tutorial by Martin Angelov you can learn how to create a service chooser form with Backbone.js which lets you choose a set of items from a list.

Check it out

Clown Car Technique for Responsive Images


A brilliant and interesting technique by Estelle Weyl for serving responsive images using SVG and media queries.

Check it out

Flexgrid: a flexbox-based CSS grid


Flexgrid is a promising looking, next-generation web page layout framework based on flexbox. It uses the same responsive 12 column grid and CSS class names as Bootstrap.

Check it out

Understand CSS Background Size


A very useful demo by Heri Setiawan that will enlighten you on how background-size and background-position work.

Check it out

Creating a Radial Menu in CSS


Ana Tudor's created this radial menu with some wicked CSS techniques.

Check it out



Noah Blon catapults you through space with Warp speed in this awesome pen.

Check it out

Responsive Inspector


A Chrome extension for visually inspecting media queries and toggling breakpoints by Piotr Walczyszyn and Filip Łysyszyn.

Get it



Snap.js is an excellent library by Jacob Kelley for creating beautiful mobile shelfs in JavaScript. Check out the demo and drag to the sides to reveal the menus.

Check it out

Spring Time Icon Pack (AI)


A beautifully designed set of spring time icons made by Zachary VanDeHey.

Get it

Freebie: Flat iOS Icons (PSD)


Thomas Giavarini created this set of pixel-perfect flat iOS icons.

Get it

jQuery Annotated Source


Dig deep into the source of jQuery with this fantastic book-like way of showing the source code. Made by Rob Flaherty.

Read it

Pocket Pictograms


A beautiful collection of illustrations by Ed Harrison based on pocket-sized objects presented in an interesting way.

Check it out



Marco Barría created this super-cute cake with a fantastic, animated candle flame in Codepen.

Check it out

Free Font: Weather Icon Font


Some really nice and clean weather icons that can be used freely in non-commercial projects. Made by Lukas Bischoff.

Get it

Free Font: Estragon Free


Estragon, designed by Johannes Steil, is a vivid sans-serif text face with venetian influences, suitable especially for books. There is a free version available.

Get it