Our 50 Favorite Web Development Resources from 2012

Let’s keep it simple: last year, we did a roundup of 50 of the most useful web development resources. Today, we bring to you the 2012 edition, but only better.

And what can you expect to find in this years roundup? Pretty much everything a developer could ever need: CSS frameworks & tools, HTML5 resources, JavaScript frameworks & tools, web editors, mock-up tools, application frameworks, responsive layout tools and resources… and on and on.

This post does not include any jQuery resources as we published its own round-up last week, you can check it out here Top 50 Useful jQuery Plugins from 2011.

CSS Frameworks

Base Framework

Base Framework is a Responsive Grid Framework Web Development Resources Web Development Resources

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 is a 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 is a 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 is a 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 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 Foundation framework has been built with Sass gives you new tools to quickly customize and build responsive web sites

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

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

the Less+ framework empowers designers and developers to build websites that can adapt their content

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

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

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 is a 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 is a CSS to LessCSS converter

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

Css2Less→

CSSComb – Sort CSS Properties in a Specific Order

CSSComb is a Sort CSS Properties in a Specific Order Web Development Resources

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

Cedvel is an application for quickly designing and exporting your own grid system

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 is a Easy Iconic Fonts Composer Web Development Resources

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 offers recommendations for polyfills and implementation

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 is a 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 is a 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 is a 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 is a 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

CodePen

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

CodePen →

Shiny Demos

Shiny Demos is a growing set of demos of the latest Open Web Standards

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 is a HTML5 App For Creating Wireframes Web Development Resources

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 is a An Online Wireframing Sharing Tool

MockNow →

Wireframe.cc

Wireframe.cc

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.

Wireframe.cc

Responsive Design Tools

RWD Calculator – Turning Pixels into Percentages

RWD Calculator is a 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 is a 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 is a tool for Finding that Tricky responsive 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 is a 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 is a browser-based tool to test any website’s responsiveness

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

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

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

Crossfilter →

Graphene

Graphene is a realtime dashboard graphing toolkit

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

Foresight.js gives webpages the ability to tell if the user's device is capable of viewing high-resolution images

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

heatmap.js a JavaScript library that can be used to generate web heatmaps

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

Kartograph is a lightweight framework for building beautiful, interactive vector map applications

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

Kartograph →

Heyoffline.js

Heyoffline.js is a useful tool that warns your users when their network goes down

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

batman.js is a framework for building rich single-page browser applications

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

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

sigma.js is an open-source and lightweight JavaScript library for drawing graphs

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

jPages is a client-side pagination plugin

0

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

smoke.js is a very easy to use and flexible framework-agnostic styled alert system for Javascript

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

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

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

Keymaster →

Leaflet

Leaflet is a lightweight JavaScript library for mobile-friendly interactive maps

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

stroll.js is a collection of CSS list scroll effects

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

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

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

skrollr →

KineticJS

KineticJS is an HTML5 Canvas JavaScript library that extends the 2d context

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

KineticJS →

Socialite.js

Socialite provides a very easy way to implement and activate a plethora of social sharing buttons

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

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

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

Morris.js →

dynamo.js

dynamo.js offers a simple method to generate dynamic bits of HTML

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

dynamo.js →

URI.js

URI.js is a Javascript library for working with URLs

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 is a Debugging JavaScript Tool

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

JavaScript Console →

Holder.js

Holder.js is a 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

Yeoman is a 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.

Yeoman→

Retina.js

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

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

Retina.js →

Author: (945 Posts)

This post has been written by the team here at Speckyboy Design Magazine.

Comments