55+ Great and Useful Tools for Responsive Web Design

February 20th, 2013 by Jameel Khan | Resources | 9 Comments

Responsive Design (and Mobile) Boilerplates, Framework

Mobile Boilerplate
This tool will help you to generate modern, rich and performant mobile web applications.

320 and Up
320 and Up is an active and smart way to get a site up and running quickly. It comes with so many modern web design tools.

Gridless
Gridless focuses on typography and baked-in cross-browser compatibility and it is packed with HTML5 and CSS3 boilerplates.

Skeleton
With this tool, you can easily and quickly change your website and make it look good because it contains a small collection of CSS files.

Bootstrap
Bootstrap will help you to get a site online very quickly as it contains a framework and series of components.

Less Framework 4
This tool currently holds 4 layouts and 3 sets of typography, and they all are based on a single grid and it has a CSS grid system.

Inuit.css
This tool is a CSS framework and based on a custom grid system and it is packed with a plugin called igloos It covers the core framework to contribute more particular functionality.

Foundation 3
Throughout the world Foundation 3 is the most progressive responsive front-end framework.

Flurid – The Fluid CSS Grid Framework
This tool does not obscure pixels in margins because it has a fluid width CSS grid framework.

Responsive Plugins, Shims and Polyfills

Overthrow
This tool offers most possibly the best user experience for mobile users because it contributes coherent elegant degradation across devices.

Isotope
This tool will help you when your browser window is resized or the screen size is smaller; it reorganizes all the components of a page and also filters those components. Isotope is the best source when you are designing a responsive design because it is a brilliant jQuery plugin.

Masonry
If you want to generate dynamic and adaptive layouts then you should use Masonry. This tool is a superb jQuery plugin that allows you to reorganize the elements in your responsive design. After that they can be easily fixed in the open-spots on the grid.

TinyNav.Js
For the smaller screen, TinyNav.js converts big navigation lists into small dropdown menus for smaller screens. This jQuery plugin tool is light in weight and small.

FitVids.Js
When your browser window is resized or you have a small resolution device and you want to modify your embedded videos this tool will help you. FitVid.js is an easy to use jQuery plugin and lightweight.

The Wookmark jQuery plugin
This jQuery plugin tool will help you to find out the size of the window and automatically arranges the images into columns. You can resize your browser to see the layout adjustment.

Testers, Debuggers

ResizeMyBrowser
This tool contains several preset dimensions for your browser window and will help you to test responsively designed pages or you can also create a new preset.

Responsivepx
With this tool, you can check the width and height of a web page to determine how well your media queries are working.

Responsive Design Testing
This tool allows you to check how your responsive website design renders at different browser sizes.

The Responsinator
You can use this tool to check out how your responsive website design will be displayed in different common device sizes with robotic efficiency.

Responsive.is
Simply type in the URL of your website and see how quickly it resizes your web page between a range of predefined presets.

Screenqueri.es
This tool makes fine measurement so much easier because it contains a broad range of mobile as well as tablet presets. It also contains a huge range of grids and rulers.

Aptus
With this tool you can easily preview, modify and screenshot your responsive website.

Screenfly
Check your responsive website on different resolutions on desktop, tablet, mobile and television.

Resizer
Resizer will help you to speedily alter the dimensions of a webpage in order to test responsive design.

Responsive Sliders

Blueberry
This tool is a jQuery image slider which works for fluid and responsive layouts.

Elastislide
With this jQuery plugin your responsive website automatically resizes when the browser window is resized.

ResponsiveSlides.Js
This tool allows you to create responsive sliders that can work on a wide range of browsers, also on IE6 and up.

Zimit Framework
Zimit is an open source project created by Jorge Garrido also known as FireZenk, with the intention of providing a robust and comprehensive basis for rapid prototyping of responsive web pages.

Conclusion

Hopefully you have enjoyed browsing this round-up, and have found some useful tools that you can use in your future projects.

Please let us know your thoughts in the section below.

Pages: 1 2

http://www.orangemasala.com rahul

very nice tools by these tools we can easily make website thanks for sharing..
http://firezenk.com FireZenk

And where is Zimit Framework?
- http://www.onextrapixel.com Aidan Huang
  
  Hi FireZenk,
  
  It has been included.
  
  Regards.
http://www.froont.com Anna

This is a very long list of tools, a nice summary! Here is another tool for visual responsive prototyping: http://www.froont.com. We want to make it a really great tool, so feedback is very welcome. You can sign up for early access invite codes on the site.
http://www.andreafranzoso.com Andrea

Very interesting, we are starting the development of some projects and we were testing some detailed tools you listed. We would like to take advantage of such a large list to try as well. Thank you very much.
http://aaron.im Aaron

Nice find!

To be honest, this http://gridiculo.us is the best solution of all. It's a combination of cssgrid.net (hadn't updated in a while and doesn't look good on IE when resizing; hadn't updated for iPad, either).

http://retinajs.com/ is nice too.

Again, good job!
http://www.chromatix.com.au Josh Chan

I gotta say http://gridiculo.us/ is awesome as well, especially IE being a super pain as it always has been. Possibly even worse now with responsive web design.
Would love some specific cross-browser tools for responsive dev as well.
http://www.RiaEnjolie.com Tony Smith

Thank you so much for great article. This article opened my mind for the possibilities.
http://www.webthesmartway.com Siegfried

another great post, I am adding you to my reader ;)
Best Regards