If you are building a responsive site you will be needing to have a strong toolkit can make a world of difference as mobile internet users will overtake desktop internet users. But what does it mean for web development?

Well, the usual development for just a couple of screen resolutions is currently dying out as mobile is the new trend and many companies have already recognizing it. Having a cool fluid and responsive website will increase and engage your visitors and if you work or making a responsive website your production time will go down. Today’s post is all about those awesome and useful tools for creating responsive web design

Less Framework

Less Framework is based on a single grid, composed of 68 px columns with 24 px gutters. The only measures that change from layout to layout are the amount of columns and the width of the outer margins.

Gridless

Make future-proof responsive websites with ease.  Gridless is a optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.

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.

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.

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.

MediaQuery Bookmarklet

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

PhotoSwipe

PhotoSwipe is a FREE HTML/CSS/JavaScript based image gallery specifically targeting mobile devices. PhotoSwipe provides your visitors with a familiar and intuitive interface allowing them to interact with images on your mobile website.

Adapt.js By 960.gs

Adapt.js is a lightweight (848 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.  A potential drawback of Adapt.js is the possibility of a brief flash of unstyled content as a new stylesheet is being fetched (think of it as “Ajax” for CSS).

Adpative Images

Adaptive Images detects your visitor’s screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page’s embeded HTML images. No mark-up changes needed. It is intended for use with Responsive Designs and to be combined with Fluid Image techniques.

Responsive Web Design Sketch Sheets

This set of responsive sketch sheets, by Jeremy P Alford, is a great starting point to begin mapping out how the page sections will shift in different resolutions.

SimpleGrid

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

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.  Beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense.

Scrap 1024! Design once at 1140 for 1280, and with very little extra work, it will adapt itself to work on just about any monitor, even mobile.

Fluid Grid

Fluid Grids is a fluid grid calculator by Harry Roberts

Respond.js

A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)

CSS3 Media Queries.js

css3-mediaqueries.js by Wouter van der Graaf is a JavaScript library to make IE 5+, Firefox 1+ and Safari 2 transparently parse, test and apply CSS3 Media Queries. Firefox 3.5+, Opera 7+, Safari 3+ and Chrome already offer native support.

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.

Resizer

Resizer allows you to quickly change the dimensions of a webpage to test responsive design.

SlabText

This script splits headlines into rows before resizing each row to fill the available horizontal space. The ideal number of characters to set on each row is calculated by dividing the available width by the CSS font-size – the script then uses this ideal character count to split the headline into word combinations that are displayed as separate rows of text.

ResponsiveSlides.js

ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slideshow using images inside a single container. It works with wide range of browsers including all IE versions from IE6 and up. It also adds css max-width support for IE6 and other browsers that don’t natively support it. Only dependency is jQuery and that all the images are same size.

jQuery Responsive Thumbnail Gallery Plugin

jQuery Plugin for creating image galleries that scale to fit their container.