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!
A quick and dirty approach to fitting text into its surrounding container.
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.
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.
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.
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.
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.
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.
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.
This is an easy-to-setup responsive image slider plugin. It has navigation and pagination controls, animations and touch support.
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.
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.
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.
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.
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.
15. Dynamic Carousel
A carousel plugin built for responsive layouts.
This is also a simple jQuery plugin to convert list-based navigations into a select element for mobile devices and low browser widths.
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.
With this plugin, you can easily make responsive slideshow / presentation / landing page websites. It includes the nice simple animations that scrollorama provides.
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.
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.
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.
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.
A fully responsive, touch enabled, mobile optimized jQuery slider plugin.
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.
A lightweight mobile slider with 1:1 touch movement, resistant bounds, scroll prevention, rotation/resize adjustment and completely library agnostic.
An experimental open-source jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts.
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.
28. jQuery Masonry
A dynamic layout plugin for jQuery. It is a flip-side of CSS floats. While floating arranges elements horizontally and vertically.
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.
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.
Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.
Jump Start Git, 2nd Edition
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers
Form Design Patterns