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 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.
FlexNav is a mobile-first example of using media queries and jQuery to make a robust drop-down menu.
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).
.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 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 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 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.
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.
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 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.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.
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 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.
Screensiz.es is a website that lists the important data about the screens of widely-used mobile + tablet screens and monitors.
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 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.