Here are 48 best jQuery plugins for responsive web design.
Naver is an easy way to turn any navigation system into a responsive-ready, mobile-friendly toggle.
jQuery Picture is a tiny (2kb) plugin to add support for responsive images to your layouts. It supports both figure elements with some custom data attributes and the new proposed picture format. This plugin will be made redundant when the format is approved and implemented by browsers. Lets hope that happens soon but in the meantime this plugin will be kept up to date with latest developments.
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.
Ultimate Grid Responsive Gallery
This is a HTML | CSS | JQuery Grid with a Lightbox, you can specify thumbnails for the grid and when you click on it to open the lightbox it will load the normal image, you can specify the text for the captions and for the lightbox. Also you don’t have to load all the images at once (for performance purposes) so you can specify the number of images to load when it first load and the number of images to load when you click the “load more images” button.
A responsive “dynamic layout” jQuery plugin.
The mobile-friendly, responsive, and lightweight jQuery date & time input picker.
slimMenu is a lightweight jQuery plugin, which is made to create responsive and multi-level navigation menus on the fly.
A Responsive jQuery Gallery Plugin with CSS3 Animations.
Magnific Popup is a responsive jQuery lightbox plugin that is focused on performance and providing best experience for user with any device (Zepto.js compatible).
bxslider is a fully responsive jQuery Slider Plugin that allows you to create a content slider which can contain images, video, or HTML content.
The best jQuery plugin for creating side menus and the easiest way for doing your menu responsive
Parallax scrolling responsive framework.
As long as there has been jQuery there have been image carousels created with jQuery. The famous jCarousel has been out since 2006, the same year the first version of jQuery was released. However, with the explosion of users now using their mobile devices for their internet browsing — on iPhones, iPads, and the like — it becomes necessary for jQuery plugins to support a good user experience on these devices. Enter Flexisel, the responsive image carousel with options specifically available for adapting the carousel for mobile and tablet devices.
Fluid, flexible, fantastically minimal. Use any HTML in your slides, extend with CSS. You have full control.
All Around content slider is a multi-purpose all-in-one slider solution for your website. It supports both images and video. It can be an easy and effective solution for your shop related website as you can display your products in an interesting and eye appealing way. All Around carousel is perfect for almost all type of websites and it can fit perfectly into all business areas. You can display your company services, personal portfolio, sport products, health services, real-estate properties, vacation/holiday offers, cooking recipes and much much more.
ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slider using list items inside ul. It works with wide range of browsers including all IE versions from IE6 and up. It also adds css max-width support for IE6 and other browsers that don’t natively support it. Only dependency is jQuery (1.4 and up supported) and that all the images are same size.
Responsive jQuery Masonry
Pinterest-style layout with responsive design.
ReView is a dynamic viewport system that provides efficient responsive web design viewing choice.The system provides both initial ‘Opt-In’ and ‘Opt-Out’ responsive design states.
Responsive Measure is a simple script that allows you to pass in a selector (ideally the container where your primary content will go) which generates the ideal font size needed to produce the ideal measure for your text.
Freetile is a plugin for jQuery that enables the organization of webpage content in an efficient, dynamic and responsive layout. It can be applied to a container element and it will attempt to arrange it’s children in a layout that makes optimal use of screen space, by “packing” them in a tight arrangement.
HorizontalNav is a jQuery plugin that spans a horizontal navigation to fit the full width of it’s container. If you’ve ever had to create this effect on a project, you’ll know it’s pretty annoying to do. But this plugin makes it easy and adds support for IE7.
FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.
Isotope: An exquisite jQuery plugin for magical layouts
Responsive google maps
Well, when scrolling a website on your mobile device you can get trapped in a google map due to the Maps scrollbar of death™. This plugin gives you a native google maps on your website and a safe fallback to the static image API of google maps for smaller devices.
Enrich your website experience with ThumbFx, a jQuery animation plugin that brings your images and content to life. Create unique animated effects effortlessly without any knowledge of jQuery. All effects are responsive and adapt perfectly for all device resolutions like mobiles, tablets and desktops.
uSquare is a responsive squared grid that can display your content in a unique and interesting way. You can use it for displaying team members, products, services, designs, blog posts or anything else that comes to your mind. In our live preview we have included 3 modifications of the original file in order for you to see how uSquare can serve your purpose.
Flare – a custom responsive, touch enabled, mobile optimized lightbox jQuery plugin, which can be used to display single images/videos or entire galleries.
jQuery OneByOne Slider Plugin
The OneByOne Slider is a lightweight, responsive & layered jQuery plugin you can use to display your image and text one by one. The CSS3 animation is driven by Animate.css. It’s mobile friendly, which support wipe left/right on your touch device like iPhone & iPad. You can drag and drop to navigate with your mouse too.
The plugin is totally rewritten and the biggest change since the previous versions of Grid-A-Licious (and other similar plugins) is that the items in the grid aren’t using absolute positioning any more. They’re all floating. This will help many of you who are struggling with the grid content overlapping each other while loading. Also, this will probably speed up things as well.
Blueberry is an experimental opensource jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts.
a jQuery plugin which slides a webpage over to reveal an additional interaction pane.
An awesome, fully responsive jQuery slider plugin.
jQuery.carouFredSel is a plugin that turns any kind of HTML element into a carousel. It can scroll one or multiple items simultaneously, horizontal or vertical, infinite and circular, automatically or by user interaction. Oh, and it’s responsive too.
jQuery Responsive Menu Plugin
A Plugin which turns your site’s navigation into a dropdown select when your browser is at mobile widths.
Responsive Image Maps jQuery Plugin
Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize
SlabText is a plugin that combines FitText with Erik Loyer’s slabtype algorithm, so anyone can create big, bold, responsive headlines.
Camera slideshow is an open source project, based on Diapo slideshow, but improved a lot.
A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
jQuery Responsive Thumbnail Gallery Plugin
jQuery Plugin for creating image galleries that scale to fit their container.
Response JS is a lightweight jQuery (or Zepto) plugin that gives web designers tools for building performance-optimized, mobile-first responsive websites. It provides semantic ways to dynamically swap code blocks based on breakpoints and serve images (or other media) progressively via HTML5 data attributes. Its methods give developers hooks for triggering responsive actions and booleans for testing responsive properties.
Responsive Content is used to load content that is appropriate to the current device’s screen size. It is typically used alongside Responsive Design techniques. Note however that Responsive Design and Responsive Content act on different levels: given a particular screen width, the former applies a particular styling to the same content – whereas the latter actually loads different content. It can be used subtly – for example to cause smaller images to be loaded on smaller devices – or to deliver radically different content to different screen widths or device capabilities.
Animated Responsive Image Grid
A jQuery plugin for creating a responsive image grid that will switch images using different animations and timings. This can work nicely as a background or decorative element of a website since we can randomize the appearance of new images and their transitions.
RefineSlide is a simple jQuery plugin for displaying responsive, image-based content (with shiny animations).
Turn Your Complex IFrames into Responsive Goodness NPR-style.
Define breakpoints for your responsive design, and Breakpoints.js will fire custom events when the browser enters and/or exits that breakpoint.
Glisse.js is a simple, responsive and fully customizable jQuery photo viewer. You’ll like the transitions between two pictures entirely assumed by CSS3.
Don’t let tables break your responsive layout anymore. This simple JS/CSS combo will let your tables adapt to small device screens without everything going to hell.