Look Inside
Responsive web design is the art of creating web pages that are specific and optimized for different ranges of devices (mobile, tablet, desktop, etc). Usually creating a responsive layout might be a time consuming process in order to have them look well in all the devices. Luckily, some talented people have built a great responsive layout helper tools to aid the process of making responsive layout design. Hereby, I have round up 7 amazing responsive layout helper by jQuery plugins. Hope these can make a difference world for you. =)
Response JS
Response JS is a lightweight jQuery plugin for responsive layout with mobile-first approach. Also, it enables us to dynamically swap code blocks based on breakpoints and serve images progressively via HTML5 data- attributes.
jQuery Responsive Web
This is a simple jQuery plugin that will automatically add dynamic classes to the body tag based on user’s operating system, browser and window size. With these CSS classes, you could create specific and optimized design for targeted devices.
Breakpoints.js
You could use Breakpoints.js to define different breakpoints for your responsive layout. When browser enters and/or exits the breakpoint, it will fire custom events so that you can apply some changed to the web elements.
Heads-Up Grid
Heads-Up Grid is a responsive grid layout for website development. You can define different grid options like padding, columns, margins, etc and these options can be changed based on different window size.
Automatic Image Montage jQuery Plugin
This jQuery plugin have the abilities to arrange your images in a montage without any white space. You could set it either for a liquid container or a fixed size container (including fullscreen).
jQuery Masonry
jQuery Masonry is a responsive and dynamic grid layout plugin by jQuery. It will arranges your web elements vertically and positioning them in the next open spot in the grid.
Isotope
Isotope is another responsive and dynamic grid layout with the abilities of filtering and sorting as well as enhancement on animation.
Responsive Web Design Frameworks
There are plenty of frameworks that can be used to build a responsive layout, but here I have listed 2 famous and easy-to-use responsive web design frameworks. Even though these frameworks are NOT built in jQuery but they provide you a startup and fundamental of making a responsive layout.
Bootstrap
Bootstrap from Twitter is a HTML, CSS, and JavaScript framework that provides you series of user interface components and interactions while work in responsively.
Skeleton
Skeleton is a small collection of CSS files that can help you making responsive web design.
Test Your Responsive Layout
Last but not least, you need a tool to test your responsive layout right? In following I have listed 2 of my favorite online responsive layout testing tools. Hope you will love them too!
Screenfly
Screenfly by QuirkTools, allows you to test any website at a multitude of common screen resolutions, including desktop monitors, tablets, and smaller mobile devices.
Responsive.is
Responsive.is is another online responsive layout testing tools. Simply type in your URL and it will resizes your page between a range of different preset devices.