30 jQuery Responsive Layout Plugins

Sam Deering

Extensive list of some of the most useful jQuery responsive layout plugins used by designers aiming to design responsive layouts for their websites. Responsive layouts are relatively new in the web design world and are becoming more popular due to the rise in popularity of mobile web design and the broaden of screen resolutions. Enjoy!

Related Posts:

1. jquery-quickfit

A quick and dirty approach to fitting text into its surrounding container.


jquery-quickfit

Source Demo

2. Menu to a Dropdown for Small Screens

The Five Simple Steps website has a responsive design with a neat feature. When the browser window is narrow, the menu in the upper right converts from typical menu links into a dropdown menu. Using jQuery, this tutorial will show you how to recreate it.


Menu to a Dropdown for Small Screens

Source Demo

3. Doubletake

Dynamically updates the src of your images based on the browser width. Start with a small, mobile-friendly image in your HTML. Doubletake will use a defined set of breakpoints to update image SRCs when necessary.


Doubletake

Source Demo

4. ResponsiveSlides.js

A tiny jQuery plugin that creates a responsive slideshow using images inside “ul”. It works with wide range of browsers including all IE versions from IE6 and up.


ResponsiveSlides.js

Source + Demo

5. jQuery Responsive Thumbnail Gallery

The plugin allows us to define each image in 2 different sizes, just set a breakpoint width and it decides which image to display according to the size of the screen.


Responsive Thumbnail Gallery

Source + Demo

6. rlightbox

Is a jQuery UI mediabox that can display many types of content such as images, YouTube and Vimeo videos. It has many unique features like Panorama and Live Re-size and like other jQuery UI widgets, it is ThemeRoller ready.


rlightbox

Source Demo

7. Isotope

Is a jQuery plugin for intelligent, dynamic layouts that can’t be achieved with CSS alone. You can hide and reveal item elements easily with jQuery selectors and re-order item elements with sorting.


Isotope

Source + Demo

8. Automatic Image Montage with jQuery

Arranging images in a montage like fashion can be a challenging task when considering certain constraints, like the window size when using fullscreen, the right image number to fill all the available space or also the size of the images in use.


Automatic Image Montage

Source Demo

9. wmuSlider

This is an easy-to-setup responsive image slider plugin. It has navigation and pagination controls, animations and touch support.


wmuSlider

Source + Demo

10. Heads-Up Grid

The Heads-Up Grid is a responsive overlay grid for in-browser website development. It has been created to make it relatively easy to adapt to the needs of responsive web design.


Heads-Up Grid

Source + Demo

11. AdaptiveMedia

Why do you use AdaptiveMedia? Your desktop-centric images are loaded slowly and costed to your visitors for devices with small screen like mobile phones. That is why; you may create more than one image for different screen sizes and load them with AdaptiveMedia.


AdaptiveMedia

Source Demo

12. Hoverizr

A tiny responsive jQuery plugin that outputs manipulated images on top (or below) of any targeted images and has 3 built-in effects: grayscale, blur and color inversion.


Hoverizr

Source + Demo

13. TinyNav.js

Converts your “navigations created with lists” into select dropdowns when browsed on small screens. It also automatically selects the current page and adds selected=”selected” for that item.


TinyNav.js

Source + Demo

14. Adaptive Images in HTML

Detects your visitor’s screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page’s embedded HTML images.


Adaptive Images in HTML

Source + Demo

15. Dynamic Carousel

A carousel plugin built for responsive layouts.


Dynamic Carousel

Source + Demo

16. Responsive-Menu

This is also a simple jQuery plugin to convert list-based navigations into a select element for mobile devices and low browser widths.


Responsive-Menu

Source + Demo

17. Photo Swipe

This is a jQuery Mobile plugin for creating image galleries specifically targeting mobile devices. It provides an intuitive interface that makes it possible to interact with images on the mobile website.


Photo Swipe

Source + Demo

18. scrolldeck.js

With this plugin, you can easily make responsive slideshow / presentation / landing page websites. It includes the nice simple animations that scrollorama provides.


scrolldeck.js

Source + Demo

19. TouchCarousel

Is mobile-friendly and lightweight jQuery content scroller with touch navigation for mobile and desktop. May be used as carousel, banner rotator and image gallery.


TouchCarousel

Source Demo

20. Responsive Horizontal Layout with jQuery & CSS3

The idea is to make each panel individually scrollable and animate a content panel to the left of the viewport once it’s clicked or selected from the menu.


Responsive Horizontal Layout

Source Demo

21. Responsly.js

Contains a set of responsive widgets and responsive images slider is one of it. It’s a fairly simple slider with keyboard navigation, interval, autostart and prev & nav features.


Responsly.js

Source + Demo

22. Camera

Camera slideshow is an open source project based on Diapo slideshow, but with additional features such as responsive, public methods, skins, easing and more transition.


Camera

Source + Demo

23. UnoSlider

A fully responsive, touch enabled, mobile optimized jQuery slider plugin.


UnoSlider

Source + Demo

24. FlexSlider

A responsive slider that comes with a bunch of customisable settings. It supports callback api, touch swipe, custom navigation options and you can use any html elements in the slides.


FlexSlider

Source Demo

25. SwipeJS

A lightweight mobile slider with 1:1 touch movement, resistant bounds, scroll prevention, rotation/resize adjustment and completely library agnostic.


SwipeJS

Source + Demo

26. Blueberry

An experimental open-source jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts.


Blueberry

Source + Demo

27. Breakpoints.js

A project of hackers and designers at XOXCO. It defines breakpoints for your responsive design. Breakpoints.js will fire custom events when the browser enters or exits breakpoint.


Breakpoints.js

Source + Demo

28. jQuery Masonry

A dynamic layout plugin for jQuery. It is a flip-side of CSS floats. While floating arranges elements horizontally and vertically.


jQuery Masonry

Source + Demo

29. jQuery Responsive Web

A jQuery plugin helping design more responsive and adaptive websites by adding dynamic classes to the BODY class depending on the operating system, browser, and resolution.


jQuery Responsive Web

Source + Demo

30. Response JS

A lightweight jQuery plugin that gives web designers tools for building responsive websites. It provides semantic ways to dynamically swap code blocks based on breakpoints and service images progressively via HTML5 data attributes.


Response JS

Source + Demo

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.