Skip to main content

Super useful jQuery plugins for responsive web design

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 selectfor 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/

Popular posts from this blog

Text Ideas in Design - Turn Typography into exciting designs!

Text Ideas in Design  - Turn Typography into exciting designs! TEXT THAT CREATES BACKGROUNDS   Tiling, gradients,  bokeh  and text design interlink to form an interesting background. Bokeh is the photographic blur effect to get a soft, out-of-focus look. Extremely effective and relevant use of handwritten text to form a background and an image. The ad for Australia Post says “If you really want to touch someone, send them a letter.”  The visual shows this literally – a letter hugging a girl. EXTRA-LARGE HEADLINES Looks like designers are having themselves a field day with big, bold headlines.  The kind that stop you in your tracks and make you read. This site has the outsized headline in lower case and the content in all caps in a smart yet simple design that optimizes the use of color and type. Courtesy:  LemonDesign    Here every word begins with the letter ‘A’ which takes center-stage in no uncertain terms.  ...
Post a Comment
Read more

Web Design Ideas

ooking for something to add a little punch to your website design and make it stand apart?  We bring you some ideas to trigger your creative thoughts and entice the user into your site. Use single page design - keep it simple Create unusual icons  – let your imagination come into play Use attractive navigation  – try out something different Draw on circular elements  to attract the viewer - soften hard lines and angles Use good-looking textures Use CSS3 to create animations, transforms and transitions  –  a great alternative to Flash Try out unusual designs for forms Single Page Design Click here for some great ideas on single page designs! Just Dot This scrolling single-page website uses a simple concept – ideas coming to life on a blackboard, with all the changes, scribbles and erasing that refine the process of ideation. The white and red chalk sketches and typography highlight the site’s promise of “Brilliant ideas come to life”. The J...
Post a Comment
Read more

Dynamic Grid Output Script Using PHP + MySQL Array Data

<?php // Include database connection include_once  'connect_to_mysql.php' ; // SQL query to interact with info from our database $sql  =  mysql_query ( "SELECT id, member_name FROM member_table ORDER BY id DESC LIMIT 15" );  $i  =  0 ; // Establish the output variable $dyn_table  =  '<table border="1" cellpadding="10">' ; while( $row  =  mysql_fetch_array ( $sql )){          $id  =  $row [ "id" ];      $member_name  =  $row [ "member_name" ];         if ( $i  %  3  ==  0 ) {  // if $i is divisible by our target number (in this case "3")          $dyn...
Post a Comment
Read more