HTML5 Zone is brought to you in partnership with:

My name is Jean-Baptiste Jung and I’m a 29 years old web developer and professional blogger. I was born and raised in Paris, France and I now live in Belgium with my wife and our adorable cat. I first used the internet in 1998, built my first website in 2001 and finally started to work as a professional web developer in 2005. In 2010, I left my job and created my own web development studio. jb is a DZone MVB and is not an employee of DZone and has posted 55 posts at DZone. You can read more from them at their website. View Full User Profile

Super useful jQuery plugins for responsive web design

04.01.2013
| 6725 views |
  • submit to reddit

When building responsive websites, jQuery can be very helpful. In today’s article, I have compiled a list of jQuery plugins that will definitely help you building more responsive and usable websites.

SlabText.js


SlabText is a jQuery plugin that splits headlines into rows before resizing each row to fill the available horizontal space. Basically, it means that your headline will always look great whatever of the client screen size.
Download: http://www.frequency-decoder.com/2012/01/08/slabtext-a-jquery-plugin…

jQuery 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.
Download: http://masonry.desandro.com/

TinyNav.js


TinyNav.js is a super useful jQuery plugin which allows you to automatically turn a navigation menu into a select for small devices such as iPhones. A must have!
Download: http://tinynav.viljamis.com/

FitText.js


FitText is a simple jQuery plugin that automatically make a text fit the width of its parent element. Perfect for awesome, responsive headlines!
Download: http://fittextjs.com/

Breakpoints.js


Simply define breakpoints for your responsive design, and Breakpoints.js will fire custom events when the browser enters and/or exits that breakpoint. Very useful on complicated layouts!
Download: http://xoxco.com/projects/code/breakpoints/

ResponsiveSlides.js


Slideshows are very popular among the web. Though, forcing them to fit any screen size can be a little tricky. ResponsiveSlides.js allow you to create responsive slideshows, which will look great whatever on any device.
Download: http://responsive-slides.viljamis.com/

Flare


Flare is another jQuery plugin for building responsive and full width slideshows. It is not free but it is absolutely worth $10 as it is very easy to use and visually pleasant.
Download: http://is.gd/flarecwc

FitVids.js


A lightweight, easy-to-use jQuery plugin for fluid width video embeds. It was built by was built by Chris Coyier and Paravel.
Download: http://fitvidsjs.com/

Responsive tables


Does your tables break your responsive layout? If yes, here is a simple JS/CSS combo that will let your tables adapt to small device screens without everything going to hell. A must have for any tables!
Download: http://www.zurb.com/playground/responsive-tables

jq-idealforms


Ideal Forms is the ultimate framework for building and validating responsive HTML5 forms. It is super easy to use.
Download: http://elclanrs.github.com/jq-idealforms/



Published at DZone with permission of jb j, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)