Bi-Weekly Frontend News

Collective #61

Inspirational Website of the Week

Collective61_siteoftheweek

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

Collective61_webcolourdata

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!

Collective61_transitions

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

Collective61_infographic

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
Advertisement

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

Collective61_bklyn

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

Get it

Editr

Collective61_editr

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

Collective61_VerbFont

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

Collective61_animatephysics

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

Collective61_backbone

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

Collective61_clowncar

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

Collective61_flexgrid

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

Collective61_bg

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

Collective61_radial

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

Check it out

Hyperspace

Collective61_hyperspace

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

Check it out

Responsive Inspector

Collective61_responsiveinspector

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

Get it

Snap.js

Collective61_snapjs

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)

Collective61_springtime

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

Get it

Freebie: Flat iOS Icons (PSD)

Collective61_flatiosicons

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

Get it

jQuery Annotated Source

Collective61_jqueryannotated

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

Collective61_pocketicons

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

Check it out

Cake

Collective61_cake

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

Check it out

Free Font: Weather Icon Font

Collective61_weatherfont

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

Collective61_FreeFontEstragon

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