Collective #27
Responsive Design Case Study
A fantastic and detailed case study of a large-scale responsive website. Learn from this great outline of the whole project process, the challenges and solutions for constructing a truly responsive website.
Read itInspirational Website of the Week
Vito Salvatore's portfolio is our pick this week for its great shapes, elegant typography, stunning effects and smart responsiveness.
Read itFree Font: Stiff Staff
A fresh, decorative free font from Font Fabric designed by Borislav Petrov.
Get itFreetile.js: A Masonry Alternative
Freetile is a plugin for jQuery that enables the organization of webpage content in an efficient, dynamic and responsive layout. It can be applied to a container element and it will attempt to arrange it's children in a layout that makes optimal use of screen space, by "packing" them in a tight arrangement.
Try itMapBox - Fast & Beautiful Maps
MapBox helps you design beautiful maps and publish them across the web and mobile devices at scale.
Try itDraft.im: Get Drafted for Dribbble
Whether you have a Dribbble invitation to give, are looking for talented folks, or are looking for an invite, then draft.im is the place to be.
Get draftedFolyo Quiz: How Good is Your Portfolio?
Sacha Greif created this great quiz which will help you figure out what you're doing right or wrong with your portfolio.
Take the quizAvgrund Modal
If you liked Hakim El Hattab's modal UI concept then you might find the jQuery plugin by Dmitri Voronianski useful.
Get itPower Buttons (PSD)
Some pixel-perfect power buttons for your next design by by Michael Donovan.
Get itjsDraw2DX: SVG Graphics Library for JavaScript
jsDraw2DX is a JavaScript graphics library that uses SVG to render the graphics on all modern desktop browsers that have SVG support while falling back to VML in older browsers.
Check it outHTML5 Boilerplate v4.0.0
The 4th version of HTML5 Boilerplate is out - and what a fine version it is! The popular front-end template has undergone some significant changes and if you haven't used it yet, now is the time.
Check it outCool ASCII Animation
In this walkthrough and tutorial over at The Code Player, you can learn how to code a super cool ASCII drawing animation using HTML5 Canvas.
Read itMagicNav.js
With this jQuery plugin by John Polacek you can easily generate links from elements on your webpage. You can, for example, create a navigation with links from a set of headings.
Check it out"position: sticky" Lands in WebKit
WebKit will be supporting a new CSS position property value: position: sticky. It will finally allow positioning elements like those sticky menus that are positioned relative at first but then behave as if they are fixed from a certain point on.
BigScreen: Library for using the JavaScript Fullscreen API
BigScreen makes it easy to use full screen on your site or in your app. It smoothes out browser inconsistencies and bugs, especially if the element you're working with is inside of an <iframe>. It will also intelligently fall back to the older video full screen API if the element contains a <video> and the older API is available.
Try itFree Vintage Vector Signs
A set of unique vintage vector signs from WeGraphics for your next design.
Get itMedia Query Splitting
A smart approach to media queries that will not overwrite styles but split them for a cleaner and more modular way of handling stylesheets for RWD.
Read itJavascript Scope Quiz
An enlightening quiz about how Javascript scopes its variables and functions. Learn from the questions and explanations by Made by Knight.
Take the quizEssential JavaScript: The Top Five Script Loaders
Jack Franklin gives us a great introduction and overview of some popular script loaders for JavaScript.
Read itResponsive Design Mock-up Pack (PSD)
A great collection of screen and device mockups as Photoshop .psd files for responsive designs.
Get it