Bi-Weekly Frontend News

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 inspired

Creating 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 out

Real-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 out

Killer 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 it

High Performance Animations


Paul Lewis and Paul Irish explain what animations are less costy and what animated properties will affect paint and layout.

Check it out

Simptip: 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 out

Glyphs (PSD)


A really great set of useful Glyphs for your next app by Alexey Anatolievich.

Get it

Ink: A Responsive Email Framework


With Ink by Zurb you can easily create responsive HTML emails that work on any device & email client.

Check it out

Creating 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 out



Generate and edit SVG patterns for your website with this fantastic online tool.

Check it out

Free 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 it

Nice Things Icon Set (128 Icons, PNG + AI Source)


A stunning set of 128 original, beautiful icons by Chris Behr on Smashing Magazine.

Get it

Apple devices icons full/outline (PSD)


Mirko Monti shares this great set of Apple device icons for free.

Get it

Tetris & 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 it

CSS 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 out

The 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 out

Free Font: Adria Grotesk (Regular)


Adria Grotesk is a sunny humanist typeface by Marcus Sterz. The regular variant is for free.

Get it

MailChimp Pattern Library


MailChimp shares their excellent pattern library of well-defined atomic elements.

Read it

CSS 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 it



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 out



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