Collective #71
Inspirational Website of the Week
This week's inspirational website "Flandria" is a beautiful example for presenting a typeface in a creative way.
Get inspiredElementTransition.js
A fantastic wrapper by Daniel Silver for our Page Transitions that allows you to use more than one animatable element per page and add transitions straight from HTML tags.
Check it outCSS Balls
A fantastic tutorial on how to style circles to look like realistic spheres by Donovan Hutchinson.
Check it outDesigners’ Friend Ltd.
A very original approach to designing a website by showing it's source and making it interactive. A fantastic website by Andy Mathieson.
Check it outSizing (Web) components
Changing the size of a framework component isn't always easy but we surely need to do it quite often. Simurai suggests a technique that will make things easier: using EM units for every CSS property that has a direct impact on a component's size and then simply resizing the font size.
Read itVoyeur.js
Voyeur is a very useful JavaScript library that lets you transverse and manipulate the DOM in a straightforward way.
Check it outLong Shadow Generator
If you are enjoying the new long shadow trend and would like to try to design something with it, then this Photoshop style by GraphicBurger will come in very handy. It works with smart objects and is available for two directions at 45 degrees.
Get itMaking a 60fps Mobile App
Paul Lewis shares his experience and thoughts on building a mobile app that runs at 60fps.
Check it outUltimate Free Icon Set: 1000 Free Icons
A gigantic freebie created by Freepik.com for Six Revisions. It contains 1000 vector icons and it comes in PNG, EPS and AI.
Get itFree Font: Morden
A very creative typeface following the current trends by Andrea Buttieri.
Get itSketchplanations
Sketchplantations will explain you one thing each day in a sketch. Learn some really interesting things by visual explanation.
Check it outSide Projects
An awesome collection of side projects of designers and developers around the world. Maintained by Surjith SM.
Check it outHeight equals width with pure CSS
Marc Hinse shares his CSS-based solution for keeping the aspect ratio of elements on resize.
Check it outA Few More Words on Accessible Dialogs/Modals
Hans Christian Reinl shares a function that allows tabbing through a modal dialog and keep the focus within the modal while it is active.
Read itThe Modular Canvas: A Pragmatic Workflow for Designing Applications
Gabriel O'Flaherty-Chan form Jet Cooper suggests a modular approach for a more efficient application design process.
Read itFree Font: Puzzle font
Teresa Arroyo shares this interesting puzzle font for free. You can download an editable PDF and use it freely.
Get itProgressive enhancement is still important
If you have seen the slides of Nicholas C. Zakas "Enough with the JavaScript already!" then you might be interested in Jake Archibald's thought on progressive enhancement.
Read itWriting DRYer vanilla CSS
Harry Roberts gives some tips on how to write DRYer CSS by following the principle of avoiding repeating the parts of your CSS that are most likely to change.
Read itFree Font: Mir Medium
Mir is a very interesting and unique typeface designed by Julia Sysmäläinen and you can get the medium weight for free.
Get it