Bi-Weekly Frontend News

Collective #53

Inspirational Website of the Week


Ponto has a minimal and beautiful design with an interesting, random presentation of their projects on the landing page.

Get inspired

CSS Creatures


A collection of super-cute CSS and HTML creatures with a tweet-to-generate option that will add your own creation. The site was developed by Bennett Feely.

Check it out

Hint.css - A tooltip library in CSS


Hint.css is a tooltip library written in SASS. It does not rely on any JavaScript, just HTML/CSS, and it uses data-* attribute, pseudo elements, content property and CSS3 transitions to create the tooltips.

Check it out

svg.js - A lightweight JavaScript library for manipulating and animating SVG


If you'd like to use SVG in your web project you'll definitely find this library useful. It's light-weight and comes with many useful features that will take out the pain of using SVG.

Check it out

WebKit for Developers


Paul Irish explains some very important things about WebKit, mainly what it is and how it's used by WebKit-based browsers.

Read it

Free Font: Global


Dino dos Santos and Pedro Leal designed this clean and beautiful typeface and you can get the three medium styles for free.

Get it

Try jQuery


Try jQuery is a combination of videos, interactive console challenges, and writing code in the browser for learning the basic building blocks of jQuery.

Check it out

Spoiler Alert!


With the Spoiler Alert script you can simple hide specific parts of text or images with a blur. A hover will reveal a bit more and a click will show the "sharp" content. Developed by Joshua Hull.

Check it out



Hook.js brings you the mobile "pull to refresh" functionality to the web. Scrolling up again after scrolling down will activate the refresh.

Check it out



We all know that we shouldn't use them but sometimes browser hacks can come in handy. Browserhacks by Hugo Giraudel and Tim Pietrusky is a useful collection of browser-specific CSS and JavaScript hacks.

Check it out

Discreet Twitter UI


A minimal and interesting UI concept for Twitter buttons by Tim Holman. It only shows the Twitter icon and on hover it will reveal the follow button in a very stylish way.

Check it out

How to Create Windows-8-like Animations with CSS3 and jQuery


Learn how to create some stunning Windows 8 style animations in this tutorial by talented Sara Soueidan.

Check it out

Responsive web design: the war has not yet been won

Some very interesting thoughts on RWD by Elliot Jay Stocks with some important points on how some aspects are still misunderstood. An engaging discussion follows.

Read it

Carousel Book Layout Using CSS Regions


Tyler Fry created this awesome pen that shows some of the powers of CSS regions with transforms.

Check it out

Loading Animation


A very cool CSS loading animation by Diego Pardo. The plastic-like letters fade in and out smoothly.

Check it out

Free Font: Prism


Sascha Timplan designed Prims, a typeface that was inspired by the sketches of Rudolf Koch for Prisma and the proportions of Avant Garde by Herb Lubalin. You can get the regular style for free.

Get it



A context-shift transition inspired by iOS. Created using JavaScript, CSS 3D transforms and CSS Animations by Hakim El Hattab.

Check it out

Free Font: BillMoney


BillMoney is an unique typeface created by Jeff Schreiber and you can download it for a tweet.

Get it

HTML's New Template Tag: Standardizing client-side templating

Eric Bidelman talks about the new <template> element which describes a standard DOM-based approach for client-side templating.

Read it

HTML5 forms introduction and new attributes


Learn about HTML5 forms from this excerpt from Chapter 6 of Beginning HTML5 and CSS3: The Web Evolved by Christopher Murphy, Oli Studholme, Richard Clark and Divya Manian. Also, don't miss the next article in the series HTML5 forms input types.

Read it

The Problem Of CSS Form Elements


Gabriele Romanato explains the problem of form elements and how the style can be tamed for a consistent look.

Read it

Animated CSS3 Photo Stack


Learn how to create an animated photo stack, which uses all kinds of fancy effects to transition between a set of images in this tutorial by Martin Angelov.

Check it out

Typeplate - A typographic starter kit encouraging great type on the Web


Typeplate is a "typographic starter kit" by Dennis Gaebel that does not make aesthetic design choices, but defines proper markup with extensible styling for common typographic patterns instead.

Get it

Make a calculator using JavaScript and CSS3


In this walk-through you'll learn how to create a nice looking calculator with HTML/CSS and some JavaScript.

Check it out

A Plain English Guide to JavaScript Prototypes


Sebastian Porto shares his knowledge and experience with JavaScript's unique take on prototypes.

Read it

Free Font: Savu


Savu is a hand-lettering font best used as a display typeface. It was published by Hiekka Graphics and the delicate Savu Condensed is available for free.

Get it



Deeptissue.js is a helper library to abstract away the differences between the MSPointer and WebKit Touch APIs. It is developed by Chris Love.

Check it out