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 inspiredCustom 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 outSalvattore
Rolando Murillo and Giorgio Leveroni developed Salvattore, a brilliant jQuery Masonry alternative with CSS-driven configuration.
Check it outStop Designing for "Users"
"Design for Activities, Not Individuals" — that's the message of this interesting article by Mike Long.
Read itFree Font: South Rose
Sydney Goldstein designed South Rose, a font that is inspired by the South Rose Window at the Notre Dame Cathedral.
Get itStreamline Icon Set (SVG)
A gigantic icon set that consists of 100 clean and meaningful icons designed by Webalys.
Get itFun with Sass & font icons
Jayden Seric shows how to use icon fonts with Sass.
Check it outBallicons (PSD, PNG)
Get 15 of these pixel-perfect flat icons for free. Designed by Nick Frost.
Get itdevice.js
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.
Parallax.js
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 outintention.js
Intention.js offers a light-weight and clear way to dynamically restructure HTML in a responsive manner. By WSJ Design.
Check it outFree Font: Sabado Alternative
Sabado Alternative is an exquisite and unique type family designed by Frank Hemmekam.
Get itCreate 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 outConnected 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 itLong Flat Shadow Generator (PSD)
Another helful long shadow generator PSD, this time by Pixeden.
Get itVisualising 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 outThe HTML5 progress Element
Pankaj Parashar dives into the HTML5 progress element, how to us and style it.
Check it outdrumbit
This drum machine is a wonderful example of how to use the Web Audio API by João Carlos Santos.
Check it outPhysics"R"us
Physics"R"us by Ju Hyung Lee is a 2D physics engine written in JavaScript.
Check it outForce Margin/Space Between List and Floated Image
Jeff Starr shares this smart technique that will fix the "collapsed" margin problem.
Check it outChocolateChip UI
ChocolateChip-UI is a framework for making mobile Web apps based on three components: semantic HTML5 markup, CSS and JavaScript.
Get itBootstrap 3 Grid Builder using Angular JS
A helpful tool for creating Bootstrap 3 layouts using Angular JS. Made by Jay Kanakiya.
Check it outwri.pe
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 outFree Font: Sanotra
Sanotra by Emraan Mayow is a beautifully creative typeface with a free lite version.
Get it