jQuery Responsive Layout Plugins

7 Responsive Layout Design Helpers by jQuery Plugins

Written by Kenny on August 17, 2012 jQuery
Responsive layout allows you to create specific and optimized web pages for different ranges of devices like mobile, tablet, desktop and etc

7 Responsive Layout Design Helpers by jQuery Plugins

jQuery Responsive Layout Plugins
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

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.

Source

 

jQuery Responsive Web

jQuery Responsive Web

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.

Source

 

Breakpoints.js

Breakpoints.js

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.

Source

 

Heads-Up Grid

The Heads-Up Grid

The 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.

Source

 

Automatic Image Montage jQuery Plugin

Automatic Image Montage

Automatic Image Montage


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).

Source

 

jQuery Masonry

jQuery Masonry

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.

Source

 

Isotope

Isotope

Isotope


Isotope is another responsive and dynamic grid layout with the abilities of filtering and sorting as well as enhancement on animation.

Source

 

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

Twitter Bootstrap

Twitter 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.

Source

 

Skeleton

Skeleton

Skeleton


Skeleton is a small collection of CSS files that can help you making responsive web design.

Source

 

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.


» This Might Interest You «

User Feedbacks (5) Share Your!

  • Most responsive themes I’ve seen have many of these features included.Thanks for posting– I’ll use that on my site.

    2 years ago! Reply
  • And what about Media queries?

    2 years ago! Reply
    • Hi,

      Yes, of course using CSS3 media queries can be another way to make the thing done.

      Btw, thanks for sharing!

      2 years ago! Reply
  • Vladimir Rezharoz

    Thank you ! Awesome!

    2 years ago! Reply
  • You should also mention about http://headjs.com/

    2 years ago! Reply

Leave a Feedback

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>