Responsive Web Design has emerged from just a trend into a must do on many web designer and developers mind as this technique is to help both of the designer/developer and the user, but figuring out the best way to go ahead developing a responsive site is sometime a time-consuming task when you first start even for a seasonal designer or developer and there are a lot of tools out there to help you achieve this greatness but sorting them out in itself is a hard task to handle , So for this post you will see that I’ve gathered some of the best, useful and new responsive plugins, frameworks & other great responsive tools to help you get on the path.

SlickNav

slicknav is a simple and easy-to-use jQuery menu plugin for creating a responsive with cross-browser multi-level navigation menu on your website. This plugin makes use of CSS media queries to hide the original menu and display the mobile menu when appropriate.

Responsive Nav

Responsive Nav is a tiny JavaScript plugin that only weighs at ~1KB minified and Gzip’ed, this plugin helps you to create a toggled navigation for small screens. It uses touch events and CSS3 transitions for the best possible performance. It also contains a “clever” workaround that makes it possible to transition from height: 0 to height: auto, which isn’t normally possible with CSS3 transitions.

FlexNav

FlexNav is a mobile-first example of using media queries and jQuery to make a robust drop-down menu.

jPanelMenu

jPanelMenu is a jQuery plugin that creates a paneled-style menu (like the type seen in the mobile versions of Facebook and Google, as well as in many native iPhone applications).

.Fitgrid

.Fitgrd is not a framework as it is  a solid foundation to build up your own responsive website. It is designed for rapid prototyping, but also runs well in production environments. This grid system is perfect for advanced web designers who don’t want to have their pages look like “bootstraped”.

Everything but the grid is up to you and gives you the ability to save a lot of dispensable code. Give it a try and you’ll love it.

Gumby Framework

Gumby Framework is a flexible, responsive CSS Framework and powered by SASS.  As you can create rapid and logical page layout and app prototypes with a flexible and responsive grid system and UI kit. As it is powered by SASS it is a powerful CSS preprocessor which allows us to develop Gumby itself with much more speed and gives you new tools to quickly customize and build on top of the Gumby Framework.

Gumby is developed following the latest standards and specs. In order to stay on the cutting edge, Gumby supports modern web browsers like: Chrome, Firefox, Opera, Internet Explorer 8 – 10.

Simple Grid

Simple Grid is a basic 12 column (1140px) lightweight responsive grid that is not a CSS framework as there are no styles for buttons, tables, typography … etc as that gives you a quick and robust starting point for your design. The twelve column structure of Simple Grid easily divides into columns of two, three, four or six, giving developers numerous layout possibilities.

Responsive Web CSS

Responsive Web CSS can help you get started quickly as it is a web-based tool that enables anyone to create a responsive layout skeleton with a simple drag-n-drops.

Bootstrap

How can i not put bootstrap in this list  as Bootstrap is up to version 3 and with lots of exciting changes and features.  First of all, it has a flat design on all the elements and components which is trending.  It follows the mobile-first approach and always responsive and JavaScript plugins are re-written to prevent any conflicts, new components are added and some of them are removed.

Cool Kitten

Cool Kitten is a Parrallax Scrolling responsive framework written by Jalxob and it is a collection of HTML/CSS and JavaScript files to be used for web designers and developers.  Cool Kitten is responsive, which is the best way to have a website with abilities to be viewed in every computer, tablet and mobile. It supports Parallax Scrolling, which makes a beautiful visual effect that brings a second life to every slide.

Responsive Elements

Responsive elements makes it possible for any element to adapt and respond to the area they occupy. It’s a tiny javascript library that you can drop into your projects today.

FerroSlider

FerroSlider is a free jQuery plugin that allows you to organize the contents of websites in a unusual and cool way and navigate through them with a sliding effect.

Wrangler

Wrangle is a responsive, touch-friendly selection plugin for jQuery or Zepto. This plugin offers a unique method of multiple selection: by drawing a line through items to select them and it gives your app a new way to perform multiple selections whether it’s a mouse, a finger or a stylus.  Wrangler is lightweight and designed to be extendable and adaptable.

Salvattore

Salvattore is a jQuery Masonry alternative with CSS-driven configuration. Salvattore organizes your HTML elements according to the number of columns you specify. Each of the items in your container is placed within these columns, one by one.

Glide

Glide.js is responsive and touch-friendly jQuery slider and it is based on CSS3 transitions with fallback to older broswers. It is a simple, lightweight and fast plugin that is designed to slide, no less, no more.  It works on smartphones, tablets and desktops. It supports swipe event, arrows and bullets navigation, keyboard navigation and a Public API with callbacks, Autoplay and Pause on hover.

FlowType

Ideally, the most legible typography contains between 45 and 75 characters per line. This is difficult to accomplish for all screen widths with only CSS media-queries. FlowType.JS eases this difficulty by changing the font-size—and subsequently the line-height—based on a specific element’s width. This allows for a perfect character count per line at any screen width.

Froont

FROONT is a web-based design tool that runs in the browser and makes responsive web design accessible to all kinds of visual designers, even those without any coding skills. The design can be done right in-browser with intuitive drag-and-drop tools.

Screen Sizes

Screensiz.es is a website that lists the important data about the screens of widely-used mobile + tablet screens and monitors.

Responsive Wireframes

Responsive Wireframes is a free and web-based tool for quickly creating wirefames for any project.  It enables us to insert elements, style them (colour, opacity), add text and resize if wanted, these elements can be re-positioned with drag ‘n drops and the work can be saved for future reuse.

Antwort

Antwort offers responsive layouts for Email that both fits and adapts to client widths. Don’t underwhelm desktop users with single column layouts that work for mobile. Antwort offers columns on desktop that automatically become rows on mobile.