Best jQuery Responsive Plugins & Tutorials with Demo

Nested : jQuery Gap free, Multi column Grid layout Plugin

February 13, 2013 | Layout, Plugins, Responsive

Nested is a jQuery plugin which allows you to create multi-column, dynamic grid layouts. Unlike other libraries and jQuery plugins similar to Nested, this is (as far I as I’ve know) the first script out there that allows you a complete gap-free layout.

It creates a matrix of all elements and creates a multi column grid, similar to other libraries and scripts out there. Then it scans the maxtric for gaps and tries to fill them by reordering the elements. This is exactly how I’ve seen other newer libraries, scripts and modifications behave but if you stop here, the result will sometime leave unwanted gaps as well. That is why I added the last step, an option to resize any element at the bottom of the grid that is bigger (or smaller if you prefer) than the gap to make the grid completely gap-free.

Read More Demo

Lush : jQuery Content Slider with CSS3

February 8, 2013 | CSS2 / CSS3.0, Plugins, Premium, Responsive, Slider

Lush is a flexible content slider. It uses CSS3 native transition and animations to get the best performance taking advantage of the modern browser features, without lose functionality in older browsers.
It uses a semantic syntax to describe the animation timeline avoiding complex attributes and keywords.
The animation system is completely extensible allowing to add more animations and transitions easily just like adding new CSS classes.

Features:

Native animations
Fully Responsive
Crossbrowser
Natural syntax animation timeline
CSS3 3D animation
Extensible animation system
Flexslider compatible
Pages Slider (via iframe)
CSS skineable
Powerful API
4 different shadow images included

Read More Demo

Top Drawer : A smooth dropdown menu with jQuery & CSS3

February 6, 2013 | Menus, Responsive

Top Drawer is a smooth dropdown menu for responsive web design. It is designed to demonstrate smoother reveal menus in small contexts using CSS3 rather than animating with JavaScript.

Tap the menu icon in the top right. The click event will assign the class of active to the drawer container which alters the translate value to bring it into view. Modernizr will detect whether the user’s device is capable of CSS transforms, if it isn’t we simply show and hide the menu after the button is pressed – no point in animating if it isn’t going to work smoothly.

Read More Demo

3D FlipBook – Responsive jQuery Plugin

February 4, 2013 | CSS2 / CSS3.0, Plugins, Premium, Responsive

Responsive design – book resizes so it fits screen width or screen height depending on the layout, thumbnails are placed horizontally or vertically depending on the layout.

Features:

optimized for mobile – look and feel of a native app on mobile with touch swipe, pinch zoom etc
easy to use and customize – create book and change book settings in the xml. Change style in the css
no Flash Player needed – works everywhere
choose between 2 types of flip animation – 2d or 3d flip animation customizable animation speed and transition type
show all pages – vertical or horizontal thumbnails depending on the layout, with scrollbar, optimized for mobile devices
advanced zooming support with mouse wheel zoom on desktop, pinch zoom on mobile, scrollbars when zoomed, touch swipe, click and drag
real fullscreen support – if fullscreen is not supported by the browser, the icon will not be shown in the menu, if fullscreen is supported it will expand the book in real full screen mode, not browser full screen
2 sets of iocns included – light and dark

Read More Demo

jQuery Scroll Content Presenter with CSS3

February 3, 2013 | Animation, CSS2 / CSS3.0, Plugins, Premium, Responsive, Slider

It is an extension that allows you to create an unique and beautiful style of navigation , showing the contents of your site through animations and colors to engage your visitors. Scroll Content Presenter builds the navigation menu for you based on the structure of your HTML.

Features:

Vertical and horizontal navigation
Custmom scroll
Parallax animation
CSS3 transitions
Built using bootstrap
Generate navigation menu for you

Read More Demo

fluidvids.js : Fluid and responsive YouTube and Vimeo videos with JavaScript

January 30, 2013 | Core Java Script, Responsive, Video & Audio

FluidVids.js is a javascript plugin that allows iframes containing youtube or vimeo embeds to be fluid width, for responsive and fluid development.

Read More Demo

Off-Canvas Navigation for Responsive websites with jQuery & CSS3

January 22, 2013 | CSS2 / CSS3.0, Menus, Responsive

In this article, I’ll be walking through a build demo that centers on two topics. The first is responsive design patterns that embrace the viewport and that improve content discoverability beyond the basic hyperlink; in this case, off-canvas navigation. The second is the complexities of implementing such ideas in an accessible and highly performant manner. These are two topics that I believe are at the heart of the Web’s future.

Read More Demo

Responsive Slideshow Photo Gallery Grid with Html5

January 16, 2013 | Core Java Script, CSS2 / CSS3.0, HTML5, Plugins, Popup Window, Premium, Responsive, Slider

The Responsive Slideshow Photo Gallery has a fluid / flexible / responsive layout. Basically the grid is added into a html page into a div of your chosing and it’s adapting based of that div’s width, the grid height is modified based on the number of thumbnails and if other elements are below the grid div they will be pushed down automatically (document flow). In the examples provided you can see a few ways in which you might use this grid, of course that other configurations are possible.

Pure OOP JavaScript code, no usage of jQuery or other libraries, in this way there will be no incompatibilities with HTML pages that might be using jQuery or other JavaScript libraries.

The Responsive Slideshow Photo Gallery is using the GPU (hardware acceleration) using HTML5 standards. The rendering speed and performance is impeccable on desktop computers and most importantly on mobile devices, the way it works it will try to use CSS3 and if this is not available it will down fall to CSS2 or CSS1 for older browsers like IE7 and IE8.

Read More Demo

Droptiles : Metro style dashboard in jQuery, HTML5 & CSS3

January 10, 2013 | CSS2 / CSS3.0, Drag & Drop, HTML5, Layout, Plugins, Responsive

Droptiles is an Open Source Windows 8 Start like Metro style Web 2.0 Dashboard. It builds the experience using Tiles. Tiles are mini apps that can fetch data from external sources. Clicking on a tile launches the full app. Apps can be from any existing website to customized website specifically built to fit the Dashboard experience. Droptiles is built almost entirely of HTML, Javascript and CSS and thus highly portable to any platform.But with very little change you can port it to PHP, Ruby, JSP or any other platform.

Features:

Metro style user interface. CSS framework to build metro style websites, inspired by metroui.org.ua.
Drag & Drop tiles to personalize the experience.
Live tiles: Tiles are mini-apps, loading data from variety of sources.
Quick and easy App framework. Try the Flickr and News Reader app.
Client side object model and data binding for easy MVVM implementation.
Server side platform neutral implementation. Can be ported to PHP, JSP easily.

Read More Demo

Best jQuery Responsive Plugins & Tutorials with Demo

Nested : jQuery Gap free, Multi column Grid layout Plugin

Lush : jQuery Content Slider with CSS3

Top Drawer : A smooth dropdown menu with jQuery & CSS3

3D FlipBook – Responsive jQuery Plugin

jQuery Scroll Content Presenter with CSS3

fluidvids.js : Fluid and responsive YouTube and Vimeo videos with JavaScript

Off-Canvas Navigation for Responsive websites with jQuery & CSS3

Droptiles : Metro style dashboard in jQuery, HTML5 & CSS3

3500+ Free CSS Code Snippets

jQuery Plugins Tags