15+ jQuery responsive layout plugin helpers

I think the title says it all. As I blogged some time ago about a CSS framework for responsive layouts, today we present another post that targets responsive designs. Reminding all what responsive design is in a quickly manner, we can definitely say that responsive websites/layouts allows you to offer a specific and optimized screen size based on user’s device (mobile, tablet, desktop, etc).

Usually, achieving responsive layouts you would normally use Media Queries to resize the overall layout. But, did you ever thought what happens to all the rest of the elements/features? We are talking here about navigation, forms, sliders, etc. Well, they remain the same and they also need to be optimized.

To help you out optimize web elements that are quite tricky to transform into responsive ones, we provide a small but useful list of jQuery responsive layout plugins to help you in this direction. Clicking the image preview will take you to the specific plugin. Enjoy

15+ jQuery responsive layout plugin helpers

Elastislide – A responsive jQuery slider plugin

With the responsive awakening in web design it becomes important to not only take care of the visual part of a website but also of the functionality. Elastislide is a responsive jQuery carousel that will adapt its size and its behavior in order to work on any screen size. Inserting the carousel’s structure into a container with a fluid width will also make the carousel fluid.

rlightbox

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. Like other jQuery UI widgets, it is ThemeRoller ready and also responsive.

FitText

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.

Blueberry

Blueberry is an experimental opensource jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts.

Response JS

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.

Flexslider

An awesome, fully responsive jQuery slider plugin from WooThemes. Comes with a great number of options and works in all major browsers. Has multiple slider support, Callback API, Hardware accelerated touch swipe support and many more.

wmuSlider

Seamless Responsive Photo Grid

A cool tutorial on how to achieve a responsive photo grid system – from css-tricks.com

Dynamic-Carousel

A carousel plugin built for responsive layouts from Wilto.

FITVIDS.JS

A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

Responsive image gallery with thumbnail carousel

Today we want to show you how to create a responsive image gallery with a thumbnail carousel using Elastislide. Inspired by Twitter’s “user gallery” and upon a request to show an integration of Elastislide, we want to implement a responsive gallery that adapts to the view-port width.

The Heads-Up Grid

The Heads-Up Grid is an overlay grid for in-browser website development, built with HTML + CSS + JavaScript.

Masonry

Masonry is a dynamic grid layout plugin for jQuery. Think of it as the flip-side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

jFontSize

The jFontSize plugin was developed to facilitate the process of creating the famous buttons A+ and A-, which alter the font size on sites with very large texts, such as blogs, journals, tutorials, etc. This tool is also used to increase the accessibility of sites, helping people who have visual problems to see better content.

Responsive Menu

A Plugin which turns your site’s navigation into a dropdown (“select”) when your browser is at mobile widths.

Responsly.js

Dead simple responsive widgets, written using CSS3 transformations and available as a jQuery Plugin. Currently a sideshow and accordion are available.

Doubletake

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.