50 Favorite Web Development Resources from 2012

10 Most Visited Video Websites On The Web
October 14, 2012
10 Really Helpful Traversing Functions in jQuery
January 26, 2013
Show all

50 Favorite Web Development Resources from 2012

Courtesy speckyboy

CSS Frameworks

Base Framework

Base Framework - Responsive Grid Framework

Base is a 12 column 960px grid (max) responsive CSS framework that contains everything you need to get up and running quickly. It contains a minimal HTML5 template (including jQuery), a stylesheet with basic styles (for typography, blockquotes, code, form elements, tables…), a default Javascript file with base enhancements & fallbacks and, finally, a LESS file to easily customize your stylesheet.

Base FrameworkGitHubDemo

Bourbon Neat

Bourbon Neat - Responsive Grid Framework

Neat is a simple grid framework built on top of Sass and Bourbon using em units and golden ratios. Using Sass 3.2 block mixins, this framework makes it extremely easy to build responsive layouts.

Bourbon NeatGitHub

Kube CSS Framework

Kube CSS Framework - Responsive Grid Framework

The Kube Framework is certainly not an overblown responsive CSS framework with multiple layouts and styles. All you have with Kube is just what you need to get started – a minimal CSS file.

Kube CSS Framework

RWD Grid

RWD Grid - Responsive Grid Framework

The RWD Grid is another responsive grid system based on the popular 960.gs. The naming conventions of this grid system are similar to the 960.gs – underscore has been replaced by a hyphen (improving readability). The stylesheet has no base styles and the framework has been made for 1200px+ displays, 960px+ displays, 720px+ displays and mobile screens.

RWD GridGitHubDemo

Gumby 960 Grid Responsive CSS Framework

Gumby offers a choice of either downloading the 12 column version, 16 column version, hybrid 12/16 column version or absolutely everything in a single bundle.
Within the framework they’ve packaged up tons of styles and common interface elements (forms, buttons, tabs, and pure CSS dropdowns) to help you quickly put together functional prototypes.

Gumby 960 Grid Framework ?

Foundation 3

The latest version (3) of Foundation has been built with Sass allowing you to quickly develop Foundation itself – and gives you new tools to quickly customize and build on top of Foundation. The developers have added new elements, new options, and tons of streamlining to make this the fastest way to prototype responsively.

Yes, as their taglines states, Foundation is quite possibly the most advanced responsive front-end framework in the world.

Foundation 3 ?

Gridiculous – A Fully Responsive Grid Boilerplate

Gridiculous is fully responsive boilerplate based on a twelve column grid (max site widths of 1200px, 960px, 640px, 320px and full width). With Gridiculous you can space out your columns, create nested columns all the while making sure your images and videos remain fully responsive no matter what screen size.

Gridiculous – A Fully Responsive Grid Boilerplate ?

Responsive Grid System

The Responsive Grid System is a fluid grid CSS framework for fast, intuitive development of responsive websites. Available in 12, 16 and 24 columns with media queries for all standard devices, clearfix, and optional reset.

Responsive Grid System ?

Less+ Framework

Less+ is an extension of the Less Framework with the difference that it has extended support for Internet Explorer. It empowers designers and developers to build websites that can adapt their content depending on screen resolution, making use of the jQuery Media Queries library.

Less+ Framework ?

Bootstrap v.2.0 from Twitter

The hugely popular Bootstrap, now in its second version, is a front-end toolkit for rapidly developing web applications. It is a collection of CSS and HTML conventions that uses some of the latest techniques that gives you stylish typography, forms, buttons, tables, grids, navigation and everything else you need in a lightweight (only 6k with gzip) framework.

Bootstrap v.2.0 ?

Wirefy – The Responsive Wireframe Boilerplate

Wirefy is a collection of CSS & JS files to help you experiment with responsive wireframes. Following the philosophy of mobile first, Wirefy will respond to the proper viewport. It is style agnostic so that clients don’t get hung up on colors, fonts, other design elements. Wirefy is meant to be another tool for your development kit that provides the most basic styles as a foundation.

Wirefy – The Responsive Wireframe Boilerplate ?


SouthStreet is a set of tools that combine to form the core of a progressive enhancement workflow developed at Filament Group. This workflow is designed to help them deliver rich web experiences that are accessible to the widest range of devices possible, and catered to the capabilities and constraints of each device.

Southstreet ?

One% CSS Grid

One% CSS Grid - Responsive Grid Framework

One% CSS Grid is a percentage based 12 column fluid CSS grid system. It has been designed as a base for building responsive web layouts easily, quickly and with minimum effort. It has two starting points, one which fits 1280px screens (in full screen view) and another one which fits 1024px screens (in full screen view).

One% CSS Grid

CSS & HTML Tools

Adobe Edge Free Web Fonts

Adobe Edge Free Web Fonts

Adobe Edge Web Fonts, powered by Typekit, features hundreds of free web fonts, including some fonts from the Adobe library as well as a large collection of open source fonts.

Adobe Edge Free Web Fonts ?

Css2Less – CSS to LessCSS converter

Css2Less - CSS to LessCSS converter

Css2Less will quickly convert your old CSS files to fresh new LESS files. As simple as copy/paste.


CSSComb – Sort CSS Properties in a Specific Order

CSSComb - Sort CSS Properties in a Specific Order

CSSComb is an intelligent tool that will sort the CSS properties from your stylesheet and, from the settings, allows you to sort them in a specific order.

CSSComb ?



Cedvel is an application for quickly designing and exporting your own grid system . It aims to ease the grid design process and help you explore alternatives.

Cedvel ?

Fontello – Easy Iconic Fonts Composer

Fontello - Easy Iconic Fonts Composer

Fontello lets you combine iconic webfonts for your own project. With fontello you can shrink glyph collections (minimizing font size) and merge symbols from several fonts into a single file. You can choose from four icon fonts, they are: Entypo, Font Awesome, Iconic and Brandico.

Fontello ?

HTML5 Please

HTML5 Please

HTML5 Please offers recommendations for polyfills and implementation so you can decide if and how to put each of the HTML5 features to use.

HTML5 Please ?

Stitches – An HTML5 Sprite Sheet Generator

Stitches - An HTML5 Sprite Sheet Generator

Stitches is a really easy-to-use HTML5 sprite sheet generator. Simply drag and drop image files onto the app, click “Generate” and your sprite and stylesheet will be good to go.

Stitches – An HTML5 Sprite Sheet Generator ?

Bootstrap Generator – Twitter Bootstrap Generator

Bootstrap Generator - Twitter Bootstrap Generator

The Twitter Bootstrap Generator will allow you to quickly kick-start your Twitter Bootstrap project the way you want. Simply alter the options and click “Generate” to get your compiled Bootstrap CSS file.

Bootstrap Generator ?

CSSO (CSS Optimizer)

CSSO (CSS Optimizer)

CSSO is a CSS optimizer – more specifically, a CSS minimizer. Use it to improve and streamline your CSS.

CSSO (CSS Optimizer) ?

Web Editors & Playgrounds

EpicEditor – An Embeddable JavaScript Markdown Editor

EpicEditor - An Embeddable JavaScript Markdown Editor

EpicEditor is an embeddable JavaScript Markdown editor with split fullscreen editing, live previewing, automatic draft saving, offline support, and more.

EpicEditor ?

dabblet – A Playground for Testing CSS and HTML

dabblet - A Playground for Testing CSS and HTML

dabblet is an interactive playground for quickly testing snippets of CSS and HTML code. It uses -prefix-free, so that you won’t have to add any prefixes in your CSS code.

dabblet ?



CodePen is useful for showing off your work, troubleshooting, demonstrating bugs, or anything else you can think of.

CodePen ?

Shiny Demos

Shiny Demos

Shiny Demos is a growing set of demos of the latest Open Web Standards, made by the Opera developer relations team.

Shiny Demos ?

Wireframe Apps

Moqups – HTML5 App For Creating Wireframes

Moqups -  HTML5 App For Creating Wireframes

Moqups is a HTML5 web app for creating wireframes, mockups or UI concepts.

Moqups – HTML5 App For Creating Wireframes ?

MockNow – An Online Wireframing Sharing Tool

MockNow - An Online Wireframing Sharing Tool

MockNow ?



As a swift and minimal app, Wireframe.cc is extremely easy to use, and whether you have prior experience with wireframing apps or not, you will not take long getting accustomed to it.


Responsive Design Tools

RWD Calculator – Turning Pixels into Percentages

RWD Calculator - Turning Pixels into Percentages

RWD Calculator is a simple calculator to help turn your PSD web template into the start of your responsive website.

RWD Calculator ?

Screenqueri.es – Responsive Design Testing Tool

Screenqueri.es - Responsive Design Testing Tool

Screenqueri.es is a responsive design testing tool. It allow you to test your responsive design on 30 different device resolutions presets or check with custom resolution by resizing window.

Screenqueri.es ?

responsivepx – Find that Tricky Breakpoint

responsivepx - Find that Tricky Breakpoint

responsivepx is a responsive web design testing tool where you enter the URL to your site (local or online) and use the controls to adjust the height and width of your viewport to find the exact breakpoint widths in pixels.

responsivepx ?

Gridpak – The Responsive Grid Generator

Gridpak - The Responsive Grid Generator

Gridpak is a generator for creating a responsive grid system. Use the simple interface to design your grid and then let Gridpak do the heavy lifting by generating PNGs, CSS and JavaScript. Check out this video for a detailed overview:

Gridpak ?

Viewport Resizer

Viewport Resizer

Viewport Resizer is a browser-based tool to test any website’s responsiveness by building your own bookmarklet. All you have to do is go to the page you want to test, click on your created bookmarklet and check all kinds of screen resolutions of the page.

Viewport Resizer ?

Opera Mobile Emulator

Opera Mobile Emulator

Opera Mobile Emulator ?

Javascript Libraries & Tools



Crossfilter is a JavaScript library for exploring large multivariate datasets in the browser.

Crossfilter ?



Graphene is a realtime dashboard & graphing toolkit based on D3 and Backbone. It offers a very aesthetic realtime dashboard that lives on top of Graphite (but could be tailored to any back end).

Graphene ?



Foresight.js gives webpages the ability to tell if the user’s device is capable of viewing high-resolution images (such as the 3rd generation iPad) before the image has been requested from the server.

Foresight.js ?

Javascript Library Boilerplate

Javascript Library Boilerplate

The JavaScript Library Boilerplate helps you roll your own Javascript library with a tiny and robust core base. You can create your own library such as jQuery, Zepto, Prototype, etc, very easy and adding your own methods.

Javascript Library Boilerplate ?



heatmap.js is a JavaScript library that can be used to generate web heatmaps with the html5 canvas element based on your data.

heatmap.js ?



Kartograph is a lightweight framework for building beautiful, interactive vector map applications without Google Maps or any other mapping service.

Kartograph ?



Heyoffline.js is a useful tool that warns your users when their network goes down, making sure they don’t lose anything.

Heyoffline.js ?



batman.js is a framework for building rich single-page browser applications. It has been written in CoffeeScript and its API is developed with CoffeeScript in mind, but you can also use plain old JavaScript.

batman.js ?



uiji.js is jQuery in reverse, meaning instead of using CSS selectors to find elements, you use the same syntax to create elements.

uiji.js ?



sigma.js is an open-source and lightweight JavaScript library for drawing graphs, using the HTML canvas element. It has been designed to display interactive static graphs exported from a graph visualization software – like Gephi.

sigma.js ?




jPages is a client-side pagination plugin that gives you a lot more features comparing to most of the other similiar plugins, such as auto page turn, key and scroll browse and showing items with delay.

jPages ?



smoke.js is a very easy to use and flexible framework-agnostic styled alert system for Javascript. It uses CSS animations and background, so there are no images or js animation code making it very lightweight.

smoke.js ?



Keymaster is a simple micro-library for defining and dispatching keyboard shortcuts.

Keymaster ?



Leaflet is a lightweight JavaScript library for mobile-friendly interactive maps. Weighing just 22kb of gzipped JS code, it still has all the features most developers ever need for online maps.

Leaflet ?



stroll.js is a collection of CSS list scroll effects. The style of scroll effect is determined via the class that is set on the list.

stroll.js ?



Skrollr allows you to animate any CSS property of any element depending on the horizontal scrollbar position.

skrollr ?



KineticJS is an HTML5 Canvas JavaScript library that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.

KineticJS ?



Socialite provides a very easy way to implement and activate a plethora of social sharing buttons — any time you wish. On document load, on article hover, on any event!

Socialite.js ?



Morris.js is a lightweight library that uses jQuery and Raphaël to make drawing time-series graphs easy.

Morris.js ?



dynamo.js gives offers a simple method to generate dynamic bits of HTML and add subtle effects to your content.

dynamo.js ?



URI.js is a Javascript library for working with URLs. It offers a “jQuery-style” API (Fluent Interface, Method Chaining) to read and write all regular components and a number of convenience methods like .directory() and .authority().

URI.js ?

JavaScript Console – Debugging JavaScript Tool

JavaScript Console - Debugging JavaScript Tool

JSconsole is a simple tool for debugging Javascript and remote debugging mobile web apps.

JavaScript Console ?


Holder.js - client side image placeholders

Holder.js renders image placeholders entirely on the client side. It works both online and offline, and offers a chainable API to style and create placeholders with ease.

Holder.js ?


Yeoman - Modern workflows for modern webapps

Yeoman is a robust and opinionated client-side stack, comprised of tools and frameworks that can help developers quickly build web applications.




Retina.js is an open-source script that makes it easy to serve high-resolution images to devices with retina displays.

Retina.js ?