Bi-Weekly Frontend News

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 it

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

Free Font: Stiff Staff


A fresh, decorative free font from Font Fabric designed by Borislav Petrov.

Get it

Freetile.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 it

MapBox - Fast & Beautiful Maps


MapBox helps you design beautiful maps and publish them across the web and mobile devices at scale.

Try it
Advertisement Get Drafted for Dribbble


Whether you have a Dribbble invitation to give, are looking for talented folks, or are looking for an invite, then is the place to be.

Get drafted

Folyo 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 quiz

Avgrund Modal


If you liked Hakim El Hattab's modal UI concept then you might find the jQuery plugin by Dmitri Voronianski useful.

Get it

Power Buttons (PSD)


Some pixel-perfect power buttons for your next design by by Michael Donovan.

Get it

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

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

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



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.

Read it

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 it

Free Vintage Vector Signs


A set of unique vintage vector signs from WeGraphics for your next design.

Get it

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

Javascript 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 quiz

Essential JavaScript: The Top Five Script Loaders

Jack Franklin gives us a great introduction and overview of some popular script loaders for JavaScript.

Read it

Responsive Design Mock-up Pack (PSD)


A great collection of screen and device mockups as Photoshop .psd files for responsive designs.

Get it