Collective #89
Inspirational Website of the Week
Mike Tucker's creative online portfolio shows how using a physics engine can bring life to a site and make interaction exciting. Our pick this week.
Get inspiredCreating Non-Rectangular Layouts with CSS Shapes
In this excellent tutorial Sara Soueidan shows how to use the new and exciting CSS Shapes to create revolutionary creative layouts with ease.
Check it outReal-time performance monitoring for mobile apps
If you are a native app developer you should definitely give New Relic's mobile app monitoring a try. It will help you optimize your apps' performance and identify problems before your app users do.
Check it outKiller Responsive Layouts With CSS Regions
CJ Gammon explains how to use CSS Regions and explores the new opportunities for responsive layouts in this Smashing Magazine article.
Read itHigh Performance Animations
Paul Lewis and Paul Irish explain what animations are less costy and what animated properties will affect paint and layout.
Check it outSimptip: a simple CSS tooltip made with Sass
Simtip by Arash Manteghi is a great CSS tooltip made with Sass. It comes with many features and you can easily customize it.
Check it outGlyphs (PSD)
A really great set of useful Glyphs for your next app by Alexey Anatolievich.
Get itInk: A Responsive Email Framework
With Ink by Zurb you can easily create responsive HTML emails that work on any device & email client.
Check it outCreating the iOS Icon Jiggle / Wobble Effect in CSS
A tutorial by Kirupa Chinnathambi on how to create the iOS wobble effect with CSS.
Check it outSVGeneration
Generate and edit SVG patterns for your website with this fantastic online tool.
Check it outFree Font: Clear Sans (Semi Bold & Semi Bold Italic)
Clear Sans is a beautifully designed geometric sans serif typeface by Neil Summerour. Get the semi bold and semi bold italic variants for free.
Get itNice Things Icon Set (128 Icons, PNG + AI Source)
A stunning set of 128 original, beautiful icons by Chris Behr on Smashing Magazine.
Get itApple devices icons full/outline (PSD)
Mirko Monti shares this great set of Apple device icons for free.
Get itTetris & The Power Of CSS
Heydon Pickering does not recreate Tetris in CSS in this article but he will show you how to leverage the power of the nth-child selector to deal with incomplete grids.
Read itCSS Stats
Check out some very interesting CSS stats of many large websites like Amazon, Twitter, Dribbble and so on. You can explore how many selectors, floats, transitions and much more are being used.
Check it outThe Landscape Of Front-end Development Automation (Slides)
Addi Osmani shows how to ease the development process of applications by automating many things in the front-end workflow.
Check it outFree Font: Adria Grotesk (Regular)
Adria Grotesk is a sunny humanist typeface by Marcus Sterz. The regular variant is for free.
Get itMailChimp Pattern Library
MailChimp shares their excellent pattern library of well-defined atomic elements.
Read itCSS Wizardry Ltd. boilerplate contract
The contract of CSS Wizardry Ltd. by Harry Roberts that is easy to understand, to the point and without any legal gibberish.
Get itLESS Hat
You've probably heard of LESS Hat, a very useful LESS mixin library made by the same team that brought you CSS Hat. The new version comes with 86 smart mixins that will ease your development flow.
Check it outOpenNote
OpenNote is a web based alternative to Microsoft OneNote (T) and EverNote. It comes with a full WYSIWYG editor, touch friendly UI and upload manager.
Check it out