Responsive Web Design Toolbox: 50 Handy Tools and Services

by AndrewG

Earlier we’ve posted some materials on Responsive web design – How to Make a Website for All Devices (Responsive Web Design) and Responsive Web Design: Helpful Articles, Techniques & Tutorials, and some examples of really cool designs in 70 Examples Of Modern Responsive Web Design. And now, we would like to present to your attention some fresh data on this topic that is about grids, frameworks, JavaScript Libraries and jQuery Plugins, online services and testing tools. Hope you’ll find it useful!

Responsive Design Templates and Frameworks

BluCSS Framework

BluCSS is a CSS framework designed with ease of use and simplicity in mind. It is specifically made so that when you’re working on your next project, you don’t have to worry about the essentials. With BluCSS, you can be up and running in less than a minute.

Demo | Download

Tiny Fluid Grid

Seamless Responsive Photo Grid

Demo | Download

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

Adapt.js

Adapt.js is a lightweight (826 bytes minified) 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.
Download

Gridless

Gridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.

Demo | Download

Hardboiled CSS3 Media Queries

Download

Mobile Boilerplate

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

Skeleton

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

Download

Fluid Grid

A web grid system designed by Joseph Silvashy and New Gold Leaf that allows designers to use the screen real estate on large monitors and retain great design on smaller ones. The Fluid Grid System combines the principals of the typographic grid and a baseline grid into one resolution-independent framework.

Download

Golden Grid System

Golden Grid System (GGS) splits the screen into 18 even columns. The leftmost and rightmost columns are used as the outer margins of the grid, which leaves 16 columns for use in design.
Download

Semantic

The Semantic Grid System. Set column and gutter widths, choose the number of columns, and switch between pixels and percentages.
Download

Foldy960

A responsive version of the 960 grid.
Download

SimpleGrid

Simple Grid is prepared for 4 distinct ranges of screen size: screens 720px, screens 720px, screens than 985px, and screens than 1235px. This means that people visiting your site will receive a layout that’s tuned to the size of their browser window. Say goodbye to horizontal scrollbars.

Columnal

The Columnal CSS grid system is a “remix” of a couple others with some custom code thrown in. The elastic grid system is borrowed from cssgrid.net, while some code inspiration (and the idea for subcolumns) are taken from 960.gs.
Download

Flurid

Flurid is a cross-browser fluid width grid system optimized for flexibility (fluidity) and one of the only fluid width grid systems to work in Internet Explorer versions 5.0 and newer* without hiding pixels in margins. Like any grid system, the basic purpose is to break the page into a series of rows and columns, giving the designer an easy, rational way to organize and present content to the user.
Download

FluidGrids

inuit.css

inuit.css now has a custom grid system builder for creating fixed or fluid grid system igloos.
Download

1140 CSS Grid

The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.
Download

320 and up

’320 and Up’ prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point. Try this page at different window sizes and on different devices to see it in action.

Download

Fluid 960 Grid System

Download

JavaScript libraries & jQuery plugins

Respond.js

The goal of this script is to provide a fast and lightweight (3kb minified / 1kb gzipped) script to enable responsive web designs in browsers that don’t support CSS3 Media Queries – in particular, Internet Explorer 8 and under. It’s written in such a way that it will probably patch support for other non-supporting browsers as well (more information on that soon).

Lettering.js

Download

FitText

FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.
Download

Doubletake

A jQuery plugin for responsive images. Intended to be a proof of concept.
Download

imgSizer.js

Modernizr

Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.

Download

Mobilize.js

A HTML5 and Javascript framework to transform websites to mobile sites.

wmuSlider

wmuSlider – jQuery responsive slider.
Download

Responsive jQuery Slideshow

Demo

Photo Swipe

Image Gallery for mobile and touch devices.
Demo | Download

Blueberry

Blueberry is an experimental opensource jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts.
Download

CSS3-mediaqueries-js

This library make CSS3 Media Queries work in all browsers.
Download

Responsive jQuery Slider Plugin Flexslider

Fully responsive jQuery slider plugin.

Dynamic-Carousel

Responsive Slider with @media queries and JS.
Download

Responsive Web Design Tools and Services

WebPutty

WebPutty gives you a syntax-highlighting CSS editor you can use from anywhere, the power of SCSS and Compass, a side-by-side preview pane, and instant publishing with minification, compression, and automatic cache control.

Debugging CSS Media Queries

Demo

Responsive Design Testing

Responsive Containers

Media queries are clearly a huge step forward for responsive layouts. Letting you apply different CSS based on the width of the device or the viewport opens up all sorts of possibilities for adapting content to best fit a given space. Media queries work really well when you want to adjust the core layouts of the site, but they’re less suited to changing styles at a smaller more granular level.

resizeMyBrowser

PXtoEM.com

PX to EM conversion made simple.

Media Query Bookmarklet

The mediaQuery bookmarklet gives a visual representation of the current viewport dimensions and most recently fired media query.
Download

ProtoFluid

Rapid Prototyping of Adaptive CSS and Responsive Design.

A Fluid Grid Calculator

Responsive Web Design Sketch Sheets

Download

Responsivepx

Enter the url to your site – local or online: both work – and use the controls to adjust the width and height of your viewport to find exact breakpoint widths in pixels. Then use that information in your media queries to create a responsive design.

Screenfly

Screenfly allows you to view your website on a variety of device screens and resolutions. Enter a URL and click on GO to get started.

Responsive Data Tables

Demo | Download

Sencha

Application services that let you deliver images and data to mobile devices more rapidly and more cost effectively.

Responsive Twenty Ten

Responsive Twenty Ten is a child theme of the default WordPress theme. Dan Gavin and Sara Cannon of Birmingham, AL decided to go on a quest to make a responsive WordPress theme.
Download

Adaptive Images

Automatically adapts your existing HTML images for mobile devices. No mark-up changes needed. Just drop it in and forget about it.
Download

You might also be interested in..

Responsive Web Design: Helpful Articles, Techniques & Tutorials
70 Examples Of Modern Responsive Web Design
How to Make a Website for All Devices

Tags | coding, responsive, Web Design