Our 50 Favorite Web Developer Resources and Tools from 2011

As a developer, anything that can save you just a little bit of time is well worth its weight in gold. If you agree with that statement, you will love this. What we have for you is our selection of the best, the most useful and the most innovative web designer and web developer resources and tools from 2011. That includes frameworks, boilerplates, apps, Javascript resources, CSS3 animations tools…and on…and on. So, no matter what, you are guaranteed to discover something completely new and really, really useful.

The first thing to note about this post is that it doesn’t include any jQuery resources or tools. If you are looking for jQuery resources, you should check out last weeks Top 50 Useful jQuery Plugins from 2011.

CSS Frameworks & Boilerplates

The 1140px CSS Grid System

The 1140px Grid Framework has been designed to fit perfectly with a 1280px screen and becomes fluid for smaller screens and beyond a certain point it uses media queries to serve up a mobile version.

Columnal

Columnal is a grid system has borrowed from cssgrid.net, while some code inspiration (and the idea for subcolumns) have been taken from 960.gs. Columnal makes web design easier by making your grids fluid, dynamically changing based on the browser size (and even switching to a mobile-style layout if the width is small enough).

Less Framework 4

Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid. The goal of Less Framework is to make building websites with multiple layouts efficient, and to make the layouts feel consistent.

The Semantic Grid System

The Semantic Grid System is a responsive grid system that lets you set column and gutter widths, choose the number of columns, and switch between pixels and percentages without any ugly .grid_x classes in your markup.

Foundation

Foundation is a rock-solid, responsive framework for rapidly prototyping and iterating into production code. It includes a 12-column, future-friendly grid and tons of great tools and elements that’ll get you up and running in no time.

Fluid Baseline Grid

The Fluid Baseline Grid system was built with typographic standards in mind and combines principals of fluid-column layouts, baseline grids and mobile-first responsive design into a resolution independent and device agnostic framework.
It is packed with CSS normalization, beautiful typographic standards, corrected bugs, common browser inconsistencies and improved usability.

Skeleton

Skeleton is a small collection of CSS and JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.

MQFramework

Based on a 12 column grid, the responsive MQFramework has been structured to suit different needs, be it from a new project to fitting into an existing project with very little changes to the code. One CSS file imports the framework files and a custom stylesheet for the design of your site. It utilises the @media property to allow you to design your sites for browsers of all sizes.

Golden Grid System

Golden Grid System is a folding grid system for responsive design. It comes with folding columns, elastic gutters, a zoomable baseline grid, and the Golden Gridlet, a little script that adds a button into the upper right corner of the page. When clicked or tapped, it overlays the GGS grid and a baseline grid of 1.5em onto the page, making it easy to visually check that design elements align up.

Button CSS3 UI

Button CSS3 UI is a CSS3 framework that lets you easily integrate custom buttons. It’s easy to install and use: download and upload Button CSS3 UI on your server, then paste the code between the head tag in your header with the good path and save.
Button CSS3 UI

Mobile Boilerplate

Mobile Boilerplate is a custom template for creating rich and performant mobile web apps. It offers cross-browser consistency for A-grade smartphones, and fallback support for Blackberry, Symbian, and IE Mobile. You get an offline caching setup for free, a media query polyfill, and many common mobile WebKit optimizations.
Use Mobile Boilerplate to start your mobile webapp quickly and immediately benefit from community best practices.

HTML Email Boilerplate

HTML Email Boilerplate creates a template of sorts, absent of design or layout, that will help you avoid some of the major rendering problems with the most common email clients out there – Gmail, Outlook, Yahoo Mail, etc. It provides some helpful examples and snippets that will keep your email design rendering as true-to-form as possible.

CSS Tools & Apps

Sencha CSS3 Animator & HTML5 Animations

Sencha Animator is a desktop app that lets you create CSS3 animations for WebKit browsers and touchscreen mobile devices. Create rich experiences for today’s most popular devices. You can animate text and images with smooth transitions, design buttons with gradients, and embed analytics tracking code – all the while using web standards.

prefixMyCSS

prefixMyCSS instantly prefixes your CSS3 code. First, you write your CSS code. Then you paste your code in the prefixMyCSS website’s first block and click the prefix button. All vendor prefixes are added to your code. You can then safely replace your old code.

CSS Terminal

CSS Terminal is a bookmarklet that allows you to inject CSS rules directly into a live web page. It’s handy for rapid CSS development, prototyping and debugging.

holmes.css

holmes.css is a stand-alone diagnostic CSS stylesheet that can highlight potentially invalid, inaccessible, or erroneous HTML and HTML5 markup by adding one class. The holmes.css file will display either an error (red outline), a warning (yellow outline), or a deprecated style (dark grey outline) for flags such as missing required attributes on tags, potentially improvable markup, deprecated and non-W3C elements and attributes, and others.

CSS Pivot

CSS Pivot lets you add CSS styles to any website and share the result with a short link. It’s been designed to let you invite others to submit improvements for your website. Just type in the website’s URL in the text field, click the button, and you’re ready to rock.

CSS Lint

CSS Lint helps point out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don?t want.

Normalize.css

Normalize.css is a customizable CSS file that makes browsers render all elements more consistently and in line with modern standards. It targets only the styles that need normalizing (ie. ones that have differences between default browser styles). How Normalize.css works is it preserves useful defaults, normalizes styles, corrects bugs, improves usability, and explains what the code does.

Spritemapper

Spritemapper is an application that merges multiple images into one and generates CSS positioning for the corresponding slices. This CSS spritemap generator helps reduce your website’s loading time by reducing the amount of images and better utilizing the connection.

Sprite Cow

Sprite Cow is a web-based tool that helps you get the background-position, width and height of sprites within a sprite sheet as a nice bit of copyable CSS. While automated sprite sheet generators are convenient, Sprite Cow gives you control over optimization and compression while saving you time by not having to copy all the positions and sizes from graphics apps.

Prefixr

Prefixr is a web-based tool that gives you cross-browser CSS in seconds. Put in your code, check off a few optional formatting and exclude options, and click the button to get your cross-browser CSS code.

Patternizer

Patternizer is a tool that allows you to create background patterns in just a few minutes. Patterns can then be saved and shared with anyone, allowing for collaboration and remixing.

Patternify

Patternify is a simple CSS pattern generator. Its graphical web-based interface lets you draw the pattern you want, and then it generates the CSS code for you. Instead of having to launch your graphics editor and creating a 2px by 2px image, you can just build your pattern online using this. And with the base64 code, you don’t even need an image file anymore: just include the code in your CSS and you’re ready to rock.

CSS3 Patterns Gallery

CSS3 Patterns Gallery is exactly what it sounds like: a gallery of CSS3 patterns. You get a preview of each pattern in the gallery, and if you like it, just click on it and the code for it will pop up, as well as a full-screen preview of what the pattern will look like. Handy for easy browsing of patterns and quick grabbing of the code to use or modify in your own design.

CSS3 Shapes

CSS3 Shapes is a small resource to help designers and developers with a list of of common and not-so-common geometric shapes you can perform using CSS3.

HTML5 Resources

Modernizr

Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites. It lets you target specific browser functionality in your stylesheet by adding classes to your element. What?s easy is you don?t need to actually write any Javascript code to use this.

Response Javascript

Response JS is a lightweight, jQuery plugin, that gives designers/devs tools for producing performance-optimized, mobile-first responsive websites. It provides easy-to-use action hooks for dynamically swapping code blocks based on screen sizes and semantic methods for progressively serving images/media via HTML5 data attributes.

Initializr

Initializr, based on the HTML5 Boilerplate template, is an HTML5 templates generator that helps you get started with your HTML5 project. It does that by generating a clean customizable template with just what your project needs.

oCanvas – Object-Based Canvas Drawing

oCanvas is a JavaScript library intended to make development with HTML5 Canvas easier. Instead of working with pixels, you work with objects. It?s very straightforward and easy to get started with.

Gury – HTML5 Canvas Utility Library

Gury is a JavaScript library designed to help in the creation of HTML5 and Canvas applications. You can create a canvas tag, resize and style it, add renderable objects, animate those objects, and place it anywhere on the page in a single chained expression.

Mercury Editor

Mercury Editor is a fully featured editor much like TinyMCE or CKEditor, but with a different usage paradigm. It expects that an entire page is something that can be editable, and allows different types of editable regions to be specified. It displays a single toolbar for every region on the page, and uses the HTML5 contentEditable features on block elements, instead of iframes, which allows for CSS to be applied in ways that most other editors can’t handle.

Javascript Resources

Sugar

Sugar is a Javascript library for working with native objects. It is designed to be intuitive, unobtrusive, and let you do more with less code. It’s simple to understand and easy to use. Sugar is a not a framework for AJAX, animation, or DOM manipulation. In fact, Sugar is not tied to the browser in any way.

Buzz

Buzz is a small but powerful Javascript library that allows you to easily take advantage of the new HTML5 audio element. It provides tons of methods for taking advantage of the audio element and provides a way to group sounds and offers many methods to control them. It degrades gracefully on non-modern browsers.

FitVids.JS

FitVids.JS is a lightweight, easy-to-use jQuery plugin for responsive width video embeds. It automates the Intrinsic Ratio Method by Thierry Koblentz to achieve fluid width videos in your responsive web design.

deck.js

deck.js is a tool for making modern HTML presentations. Slides are basic HTML. The deck.core module keeps track of slide states and deck states, leaving CSS to define what each state looks like and how to transition between them. Extensions use core events and methods to add goodies, giving presenters the freedom to add what they want and leave out what they don't.

Adaptive Images in HTML

Adaptive Images, intended to be used with responsive and fluid layout techniques, is a solution that will automatically create, cache, and deliver device-appropriate (it detects the resolution of the visitors screen) of your website’s content images. No need to change your mark-up, it manages its own image re-sizing, and will work on any CMS or even on flat HTML pages.

Adapt.js

Adapt.js is a lightweight JavaScript file that determines which CSS file to load before the browser renders a page. If the browser tilts or resizes, Adapt.js simply checks its width, and serves only the CSS that is needed, when it is needed.

Bootstrap

Bootstrap is a toolkit from Twitter built to rapidly kickstart the development of your web apps or sites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and comes with the complete style guide documentation.

Recurly.js

Recurly.js is an open-source Javascript library for creating great looking credit card forms to securely create subscriptions, one-time transactions, and update billing information. The library is designed to create fully customizable order forms while minimizing your PCI compliance scope.

validate.js

validate.js is a lightweight (just over 1kb gzipped) JavaScript form validation library inspired by CodeIgniter that allows you to validate form fields from over a dozen rules. It has no dependencies, its customizable and also works in all major browsers (even IE6!).

money.js

money.js is a super-simple and tiny (just over 1kb!) JavaScript library for realtime currency conversion and exchange rate calculation, from any currency, to any currency.
It can be used with the free, hourly-updating exchange rates from the Open Source Exchange Rates API project, or with static/cached/approximate/justplainwrong exchange rates.

apejs

ApeJS is a tiny framework for developing Google App Engine websites using the JavaScript language. There are other JS frameworks out there that you could use with App Engine – are extremely well made – but I needed something more simple, something that

CoderDeck

CoderDeck combines Deck.js with the CodeMirror2 highlighting code editor to make it easy to demo and teach live HTML, CSS and Javascript directly in the browser.

jwerty

Jwerty is a small (1.5kb) JS lib which allows you to bind, fire and assert key combination strings against elements and events. It normalises the poor std api into something easy to use and clear. It has no dependencies, but is compatible with jQuery, Zepto or Ender if you include those packages alongside it.

Ideal Forms

Ideal Forms is a very easy to use and small framework that helps you build powerful and beautiful online forms. Everything is stylable with CSS and comes packaged with three styles (sapphire, comix and forest) to get you started. It degrades gracefully with javascript disabled.

d3.js

D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document.
It is not a traditional visualization framework. Rather than provide a monolithic system with all the features anyone may ever need, D3 solves only the crux of the problem: efficient manipulation of documents based on data. This gives D3 extraordinary flexibility, exposing the full capabilities of underlying technologies such as CSS3, HTML5 and SVG.

Cube

Cube is an open-source system for visualizing time series data, built on MongoDB, Node and D3. If you send Cube timestamped events (with optional structured data), you can easily build realtime visualizations of aggregate metrics for internal dashboards (for example, you might use Cube to monitor traffic to your website).

Microjs

Microjs is a large collection of micro-frameworks and micro-libraries, with most under 2kb in size. Get exactly what you need and nothing more, keeping the load light.
Micro-frameworks are definitely the pocketknives of the JavaScript library world: short, sweet, to the point. And at 5k and under, micro-frameworks are very very portable.

ACE

Ace is a standalone code editor written in JavaScript with the goal to create a browser based editor that matches and extends the features, usability and performance of existing native editors such as TextMate, Vim or Eclipse. It can be easily embedded into any web page or JavaScript application.

Kendo UI

Kendo UI, making the most out of the web’s latest HTML5, CSS3, and JavaScript standards combines everything needed for modern JavaScript development, including a powerful DataSource, universal Drag-and-Drop, Templates, Themes, and UI Widgets.

Kendo UI Mobile helps developers build apps and sites for mobile devices that always look native. On iOS, its widgets look native to iOS. On Android, the widgets look native to Android. Automatically, Kendo will detectsthe device and apply the proper styling.

Tools

Google Swiffy

Google Swiffy converts Flash SWF files to HTML5, allowing you to reuse Flash content on devices without a Flash player (such as iPhones and iPads). The output works in all Webkit browsers such as Chrome and Mobile Safari.

Instant WordPress

Instant WordPress is a complete standalone, portable WordPress development environment for Windows. It has a built-in Apache web server, PHP, and MySQL installations that start and stop automatically and comes with dummy posts and pages for fast theme and plugin testing.

Mobilizer

Mobilizer is a Webkit-based Adobe AIR app that lets you preview your mobile websites, design mockups, and local HTML on a variety of phone shells. With Mobilizer all you have to do is visit any URL or drag and drop local HTML, Flash, or even image files. It can export PNGs of device views – perfect for portfolios.