Bi-Weekly Frontend News

Collective #79

Inspirational Website of the Week


The website of Bienville Capital is beautifully designed and has some smooth transitions with a light typography. Our pick this week.

Get inspired

Custom Elements: defining new elements in HTML


Eric Bidelman explains how Custom Elements will allow web developers to define new types of HTML elements and create much more meaningful and maintainable web apps.

Check it out



Rolando Murillo and Giorgio Leveroni developed Salvattore, a brilliant jQuery Masonry alternative with CSS-driven configuration.

Check it out

Stop Designing for "Users"


"Design for Activities, Not Individuals" — that's the message of this interesting article by Mike Long.

Read it

Free Font: South Rose


Sydney Goldstein designed South Rose, a font that is inspired by the South Rose Window at the Notre Dame Cathedral.

Get it

Streamline Icon Set (SVG)


A gigantic icon set that consists of 100 clean and meaningful icons designed by Webalys.

Get it

Fun with Sass & font icons


Jayden Seric shows how to use icon fonts with Sass.

Check it out

Ballicons (PSD, PNG)


Get 15 of these pixel-perfect flat icons for free. Designed by Nick Frost.

Get it



Device.js by Matthew Hudson makes writing conditional CSS and JavaScript based on device operating system, orientation and type easy. It inserts CSS classes into the <html> element allowing for custom targeting.

Check it out



This parallax script by Matthew Wagerfield reacts to the orientation of a smart device and where no gyroscope or motion detection hardware is available, the position of the cursor is used instead.

Check it out



Intention.js offers a light-weight and clear way to dynamically restructure HTML in a responsive manner. By WSJ Design.

Check it out

Free Font: Sabado Alternative


Sabado Alternative is an exquisite and unique type family designed by Frank Hemmekam.

Get it

Create CSS3: Easy CSS3 Generator


With Create CSS3 you can quickly style an element with all the fancy and hard to remember properties and copy the generated code.

Check it out

Connected UX


Aarron Walter shares his experience on how a connected approach to data research has helped understand problems and ultimately made usability improvements possible.

Read it

Long Flat Shadow Generator (PSD)


Another helful long shadow generator PSD, this time by Pixeden.

Get it

Visualising JavaScript Processing Over Time With DevTools Flame Charts


If you'd like to have an insight on your app's JavaScript processing over time, then you'll definitely find this video and article by Addy Osmani on DevTools Flame Charts very useful.

Check it out

The HTML5 progress Element


Pankaj Parashar dives into the HTML5 progress element, how to us and style it.

Check it out



This drum machine is a wonderful example of how to use the Web Audio API by João Carlos Santos.

Check it out



Physics"R"us by Ju Hyung Lee is a 2D physics engine written in JavaScript.

Check it out

Force Margin/Space Between List and Floated Image


Jeff Starr shares this smart technique that will fix the "collapsed" margin problem.

Check it out

ChocolateChip UI


ChocolateChip-UI is a framework for making mobile Web apps based on three components: semantic HTML5 markup, CSS and JavaScript.

Get it

Bootstrap 3 Grid Builder using Angular JS


A helpful tool for creating Bootstrap 3 layouts using Angular JS. Made by Jay Kanakiya.

Check it out

A simple, yet powerful note taking service that can be used anywhere. It supports Markdown, automatic calendar entries from dates and offers useful shortcuts.

Check it out

Free Font: Sanotra


Sanotra by Emraan Mayow is a beautifully creative typeface with a free lite version.

Get it