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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
One% CSS Grid
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).
CSS & HTML Tools
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.
Css2Less – CSS to LessCSS converter
Css2Less will quickly convert your old CSS files to fresh new LESS files. As simple as copy/paste.
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.
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.
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.
HTML5 Please offers recommendations for polyfills and implementation so you can decide if and how to put each of the HTML5 features to use.
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.
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.
CSSO is a CSS optimizer – more specifically, a CSS minimizer. Use it to improve and streamline your CSS.
Web Editors & Playgrounds
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.
CodePen is useful for showing off your work, troubleshooting, demonstrating bugs, or anything else you can think of.
Shiny Demos is a growing set of demos of the latest Open Web Standards, made by the Opera developer relations team.
Moqups is a HTML5 web app for creating wireframes, mockups or UI concepts.
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 is a simple calculator to help turn your PSD web template into the start of your responsive website.
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.
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.
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.
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).
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.
Kartograph is a lightweight framework for building beautiful, interactive vector map applications without Google Maps or any other mapping service.
Heyoffline.js is a useful tool that warns your users when their network goes down, making sure they don't lose anything.
uiji.js is jQuery in reverse, meaning instead of using CSS selectors to find elements, you use the same syntax to create elements.
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.
Keymaster is a simple micro-library for defining and dispatching keyboard shortcuts.
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.
Skrollr allows you to animate any CSS property of any element depending on the horizontal scrollbar position.
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!
Morris.js is a lightweight library that uses jQuery and Raphaël to make drawing time-series graphs easy.
dynamo.js offers a simple method to generate dynamic bits of HTML and add subtle effects to your content.
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.
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.