Bi-Weekly Frontend News

Collective #50

Inspirational Website of the Week


The blog and playground of interactive developer Stephen Burgess is our pick this week. It's super-stylish and has some subtle and interesting animations.

Get inspired

Textillate.js: Plugin for CSS3 Text Animations


Textillate.js by Jordan Schroter is an ease-to-use jQuery plugin for applying CSS3 animations to any text. It uses lettering.js and animate.css.

Check it out

Lazy Line Painter


Lazy Line Painter is an awesome jQuery plugin by Cam O'Connell for SVG path animations. It uses the Raphaël library.

Check it out

Carousel Interaction Stats


A very interesting study by Erik Runyon on real interaction statistics of carousels. A great discussion follows.

Read it

Squishy Toggle Buttons


Justin WIndle created some really awesome buttons that simulate squishy rubber (elastomer) buttons, inspired by designs on Dribbble.

Read it

Dig deep into CSS gradients


A color wheel with CSS gradients? Ana Tudor gives us some great insight into CSS gradients and what we can do with them.

Read it

Make a Web App with Instagram-like Filters


An awesome tutorial by Martin Angelov on how to create a web app that allows you to drag a photo from your computer into the browser window, and apply Instagram-like filters to it.

Read it

Roole: A language that compiles to CSS


Roole is inspired by other CSS preprocessing languages like Sass, LESS and Stylus and it is implemented in JavaScript, so it can be run both on the server side (via node.js) or in a browser (run unit tests to check if Roole works in your browser).

Check it out

REMux: An Experimental Approach to Responsive Web Design


An interesting take on responsive web design by Dirk Lüth for CSS-Tricks, involving fluid column widths being set in rem units.

Read it



iLightBox is a fresh and revolutionary jQuery lightbox plugin that is packed with features: it comes with fullscreen, retina-ready skins, supports for swipe events, Youtube and Vimeo integration for HTML5 video, and a powerful Javascript API.

Check it out

How To Create a Simple Collapsing Header Effect


A tutorial by Chris Spooner on how to create a collapsing header effect, where the page header or banner gradually shortens and disappear upon page scroll.

Read it



Csswizardry-grids by Harry Roberts is a simple, fluid, nestable, flexible, Sass-based and responsive grid system.

Check it out

Where to Start


Trent Walton gives some great advice on one of the hardest parts of making the transition to building responsive websites: getting started.

Read it

Photoshop Etiquette


A great article by Veerle Pieters on one of the lesser talked about, but very important parts of using and creating with Photoshop: organization.

Read it

Free Font: NIEWE


Niewe is a unique display font that comes with four styles by Zyan Graphics.

Get it

Polaris UI Kit + Linecons Icon Set (AI, PDF, PNG, PSD, SVG)


A beautiful UI Kit and a stunning vector icon set created by the Designmodo team.

Get it

Social Fish Freebie (PSD)


Meghan Robichaud offers these absolutely adorable social fish icons from her website for free.

Get them

Don’t Put Labels Inside Text Boxes (Unless You're Luke W)


Should you put labels into text boxes? Caroline Jarrett gives a great overview on why that might not be a good idea.

Read it

Cool Kitten


Cool Kitten is a parallax scrolling responsive framework (beta) developed by Jalxob.

Check it out

Packery preview


Packery is a promising new layout library which will resolve two of the biggest and oldest issues with Masonry or Isotope, the previous libraries by David DeSandro.

Read it

BLOKK: Free Mockup Font


If your clients don't dig Lorem Ipsum or any other strange filler text, you can try BLOKK which is a free font for quick mock-ups and wireframing.

Try it

Kitchen Cooking Vector Set


If you need to design something cooking-related you'll definitely find this free vector set by Jim Viola very useful.

Read it