http://feeds.dzone.com/~r/dzone/frontpage/~3/RxeQpCjTqSs/15_useful_jquery_grid_plugins_for_developers.html

15 Best jQuery Grid Plugins for Developers

1. Freewall

Freewall is a cross-browser and responsive jQuery plugin to help you create many types of grid layouts: flexible layout, images layout, nested grid, fluid grid, metro style layout, pinterest like layout with nice CSS3 animation effects and call back events. Freewall is all-in-one solution for creating dynamic grid layouts for desktop, mobile and tablet.
It is based on the width (or height) of a container and the width (height) of a cell unit, It will create a virtual matrix. Scanning the matrix at each cell will find a free cell around to made a free area, then try to fit a block element into it. In case no block can fit the gap, it will resize the block to fill the gap (that is one of the options).

Source

2. S Gallery

S Gallery is a jQuery image gallery plugin that displays images in a responsive grid. It is inspired from the gallery in Sony’s product pages (which is made with Flash) and mimics that completely. Once an item is clicked and focused, it is possible to browse others with prev-next buttons or via keyboard. Returning back to the grid view is possible with a click and, also, a fullscreen option exists (uses HTML5 Fullscreen API).

Source

3. Mason.js

There are various JavaScript-powered solutions for creating dynamic-column grid layouts (like Pinterest). Although most of them are great, sometimes, the grids contain gaps or ragged edges. Mason.js is a jQuery plugin that aims to perfect such grids by filling those gaps smartly. One the grid is created, the plugin calculates where those gaps exist and fills them with either predefined elements or by duplicating the content in the grid. It is possible to define the sizes to be used for elements, the size of columns/rows, breakpoints and if the layout will be fluid or fixed.

Source

4. jQuery.Shapeshift

There are various jQuery plugins for creating Pinterest-like dynamic grid layouts. jQuery.Shapeshift is a strong alternative to them with an an extra touch :the items can be drag ‘n’ dropped (uses jQuery UI). The drag ‘n’ drop doesn’t affect the grid negatively as the grid auto-fills the gaps when needed. It also works on touch devices and responsive layouts. The plugin comes with lots of options to set the margins, enable/disable drag-drops, customize animation and much more.

Source

5. jQuery Nested

Nested is a jQuery plugin for generating multi-column grid layouts with zero gaps. The plugin creates a matrix of all elements, builds a multi column grid and tries to fill any gaps by reordering the elements. There are various other solutions out there that does the same. However, Nested applies one small action: it resizes any element at the bottom of the grid to guarantee the gap-free layout. Its usage is very easy by simply targeting a container element through a jQuery function. And, various options exist for customization like enabling/disabling animation, min. number of columns and more.

Source

6. Wookmark jQuery Plugin

The dynamic column grid layouts are so popular not only because it is used by Pinterest but also because it is a great way of displaying content with different sizes. Wookmark, a Pinterest alternative, has released a jQuery plugin for creating such layouts, that work well on each browser, instantly. The plugin has very few options to set: the container element, offset (vertical/horizontal distance) and width of the items, that’s all. Once initialized, it gets the size of the window and auto-arranges the grid (yes, it is responsive).

Source

7. Grid-A-Licious

Grid-A-Licious is a jQuery plugin that enables us to easily create Pinterest-like floating-grid layouts. There are other resources to create such an output but Grid-A-Licious differs itself by offering a completely responsive solution. Regardless of the screen size or device, the grid fits perfectly as it is floating (no absolute positioning is used) and fluid. The plugin has options to customize the width, gutter and animation (speed, duration, effect, etc.). And, it supports appending/prepending new items to the grid which is useful for dynamic layouts.

Source

8. jPhotoGrid

jPhotoGrid takes a simple list of images and captions and turns it into a grid of photos that can be explored and zoomed. Nearly all of the styling for this plugin is done in css. The trick is to layout the grid by floating the list items. The first thing the plugin will then do, is convert these all to absolutely positioned. This is what allows the plugin to zoom in on an individual image and then return it to its place.

Source

9. Gridster

Gridster is an impressive jQuery plugin to develop iGoogle-like multi-column grids that can be drag ‘n’ dropped and re-ordered. The plugin only requires jQuery (no jQuery UI) and can convert any given HTML structure into the widgets of the grid. And, we are not limited with the elements loaded initially but can add and remove new ones dynamically.

Source

10. Photoset Grid

Photoset Grid is a simple jQuery plugin to arrange images into a flexible grid, based on Tumblr’s photoset feature. Originally the plugin was created for the Style Hatch Tumblr themes as a way to use the photoset grid in responsive layouts, but they have since expanded it and released a jQuery plugin for us.

Source

11. Flex

Flex is a fluid asymmetrical animated grid plugin for jQuery. You can mouse over the tiles to see them expand. Flex is an idea inspired by the old flash homepage on Adidas.com.

Source

12. Freetile

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.

Source

13. Griddy

Griddy is a small JQuery plugin thats creates a simple, customizable grid overlay on top of any element. It can also calculate row heights and column widths automatically based on the number of rows/columns and gutter space. There are few options, including: rows, row height, row gutter, columns, column height, column width, color and opacity.

Source

14. jSquares

jSquares is a jQuery plugin that pops up an image and a description in an overlay on hover. It is basically identical to the image grid found on www.ted.com. There are some parameters can be added when you call jSquares, e.g. caption size, opacity of the images, shuffle speed and etc. It works like a charm in IE6+, FF 3+, Safari 3+ and Opera 10.

Source

15. jqGrid

jqGrid is an Ajaxed jQuery grid plugin with amazing features. As the grid is a client-side solution that loads data with Ajax callbacks, it can be used with any server-side language like ASP, PHP, ASP.NET, JSP and so. A clever feature is sub grids which shows you a sub grid when a master column is called.

Source

15 JQuery Lightbox Plugins For Visually Enhancing Images

Best jQuery Plugins of the Week

http://thedesignblitz.com/best-jquery-plugins-of-the-week-14/

1. tableOperations

Developed by Patrick Coffey, tableOperations is a plugin that lets you easily create tables with select-able rows and operations that can be easily performed on few selected rows.

Download

2. Character Countdown

Developed by Michael Lynch Character Countdown is a simple, lightweight jQuery plugin that lets you display countdown of the remaining characters eligible in an input or text area.

Demo | Download

3. jQuery.creaseFont

Developed by Sentences / Nico R, creaseFont is jQuery plugin that lets you resize the Font on the whole Page or in some elements for your ease.

Demo | Download

4. Reading Time

Developed by Michael Lynch, Reading Time is a simple, lightweight jQuery plugin that is used to display an estimated time to read some text making it easier for users to read time.

Demo | Download

5. Geopost

Developed by Michael Lynch, Geopost is a simple, lightweight jQuery plugin that lets you generate a postal code based on your current location.

Demo | Download

6. jQuery TimeCircles

Developed by Wim Barelds, TimeCircles jQuery plugin provides a nice looking way for counting down towards a certain time or counting up from a certain time. The image below clearly shows that it is visually appealing countdown or timer worth checking out.

Demo | Download

7. Tunez

Tunez by Michael Lynch is a simple, lightweight plugin that lets you display the recently scrobbled tracks on Last.fm.

Demo | Download

8. Bootstrap Form Helpers Color Picker

Bootstrap Form Helpers Color Picker by Vincent Lamanna is a cool color picker jQuery plugin for Bootstrap.

Demo | Download

9. Open Weather

Open Weather by Michael Lynch is a simple, lightweight jQuery plugin that is used to display the current weather of city using free OpenWeatherMap API.

Download

10. jQuery Img Alt Appender

This is a cool jQuery plugin that shows alt attribute in image elements by inserting text after the image.

Download

11. Markdown

Markdown by Can Geliş is a jQuery plugin that provides necessary wrapper functions for a markdown editor to enable users to create their own markdown editor with ease.

Demo | Download

12. jQuery Domify

Domify by James Westgate is a jquery plugin that can be used to encourage progressive enhancement of markup inside noscript tags which are replaced by document fragments that can be processed by a callback function before being added to the dom.

Download

13. PlusAsTab

PlusAsTab is a cool jQuery plugin for using numpad plus key as a tab key equivalent. With this plugin, elements can be marked as plussable, enabling you to use + on the numeric keypad to navigate page.

Demo | Download

14. EmulateTab

EmulateTab is a jQuery plugin that lets users emulate tabbing between elements on a page. This plugin is useful in developing.

Demo | Download

Do share with us more cool, helpful and best jQuery plugins you know about or have created. Make sure to drop in in the comments below.

15 jQuery Mobile Plugins for Mobile Devices

http://mashable.com/2013/10/20/bootstrap-editors/

18 Essential Bootstrap UI Editors

Bootstrap has exploded since Twitter released it in 2011, becoming one of the most popular responsive frameworks available. It boasts an extensive library of pre-styled components, plugins and add-ons that make kickstarting your next web project a breeze.

There is no shortage of Bootstrap resources, but in this post, we will focus on the editing tools that allow you to customize the framework to suit your requirements.

We gathered 18 of the best free and paid Bootstrap editors, available online or as desktop tools, to help boost your web development productivity.

Are there any Bootstrap editors that you use and would recommend? If so, please share with our readers in the comments below.

1. Jetstrap

Jetstrap is a web-based Javascript library for building rapid prototypes and applications with Bootstrap. It boasts a simple but extremely powerful interface with drag-and-drop functionality.

The workspace allows you to drop elements, customize them and then see a live preview, with the entire code neatly formatted. You can test on multiple device emulators within the workspace, easily export your code, and have your website up and running quickly.

Price: Basic plans start at $16 per month and go up to $99 per month.

2. Divshot

Divshot allows for fast, visual front-end development, and works superbly with the most popular frameworks, including Bootstrap, Foundation and Ratchet. The included component libraries are completely customized for each framework, with the visual HTML editor supporting custom code, JavaScript, CoffeeScript, LESS and more.

The theme switcher is incredibly useful, meaning you can change the overall look of the entire theme with just a few clicks, or you can choose a custom option.

Price: Plans start at Free and go up to $300 per month for agencies.

3. Easel

Easel is an in-browser design tool to mock up and collaborate on projects, without shifting between your text editor and browser. It allows for rapid prototyping with the added ability of importing elements from your existing website.

If you already use Bootstrap, you can use Easel to create markup that you can drop directly into your site, or get started with Bootstrap quickly using the great collection of components. You can export either the entire document or just specific elements.

Price: Plans start at Free and go up to $99 per month for medium-sized teams.

4. Kickstrap

Kickstrap is a front-end framework with the Bootstrap library bundled and layered, and you can decide which Bootstrap CSS and JS components to use as you develop. Since you never edit Bootstrap's code directly, you can keep its layers up-to-date without overwriting your existing code.

Kickstrap is ready to use "out of the box," so there is no installation or database required. This enables you to put Kickstrap right onto your server.

Price: Free

5. Bootstrap ThemeRoller

Bootstrap ThemeRoller is an intuitive web app for creating your own Bootstrap theme using a visual interface. You can customize the color, size, fonts, forms, buttons, tables, alerts, navigation bar, menus and more.

The appe generates a unique URL for every style you create, which saves your settings so you can pause and resume your customization where you left it. You can see your changes live and download the final theme in a single ZIP file.

Price: Free

6. Lavish

Lavish is a Ruby on Rails application that generates a Bootstrap color scheme from an image, which you can customize to suit your requirements. Once you select an image, Lavish generates colors from the image for the body background, links, header, menu, tabs, text, dropdown and more. You can then swap these around until you're satisfied with the scheme, and then download the Boostrap.css file.

Price: Free

7. BootSwatchr

BootSwatchr is a visual tool, inspired by Bootswatch, for creating custom Bootstrap themes from the ground up. Just like Bootstrap it uses LESS to create dynamic, modular stylesheets to give you a live preview of the changes you make.

To get started, simply create a new BootSwatch and edit the variables you wish to change on the left. This will update the preview on the right. You can export in JSON format or download the full or minified CSS file.

Price: Free

8. LayoutIt!

LayoutIt! features a drag-and-drop interface for creating front-end code simply and quickly. It takes every element and component of Bootstrap to make coding easier, without needing to be an expert in JavaScript, HTML5 or CSS3.

It's easy to integrate LayoutIt! with any programming language; just download the HTML and start building the design into it. To begin, choose one of the base templates — starter, basic marketing or article — and being working on customizing the template as you see fit.

Price: Free

9. PaintStrap

Using PaintStrap, you can generate beautiful Bootstrap themes with Adobe Kuler or COLOURLovers. To get started, input either the color scheme theme ID or a permalink URL, and then set the colors for corresponding elements such as text, navigation, buttons, background and links.

You can generate the resulting CSS as a ZIP of all the files, individually or as a theme. You can share your color scheme in the gallery or download another user's theme.

Price: Free

10. Pingendo

Pingendo is a visual desktop application to create prototypes of responsive websites based on the Bootstrap framework. You can start a project from the collection of ready-to-use layouts, drag elements into position, resize and customize, and insert your own content.

Using the Snippets CSS panel, you can insert new elements and drag and drop in the DOM structure, while previewing the changes you make instantaneously.

Price: Free

11. BootTheme

BootTheme allows you to create themes, mockups, websites and applications using the foundation of Bootstrap, with a drag-and-drop UI. You can instantly see your changes in the Live Preview panel, use In Place Editing to change the content in the preview panel and import Bootstrap variables.

You can also create your own personal collection of themes, templates and code snippets, and share your work through a unique URL. Projects are available to download in HTML, CSS and JavaScript.

Price: Plans start at Free and go up to $19 per month for the Pro Plan.

12. Bootply

Bootply is a drag-and-drop visual editor to design, create prototypes and test the Bootstrap framework. It integrates well with other popular plugins, micro-libraries and frameworks, including FontAwesome, AngularJS, Isotope, jQuery and many others.

You can leverage the Bootply code repository to grab Bootstrap ready snippets, examples and templates. The active Bootply community makes it easy to discover, share and showcase code and snippets.

Price: Free

13. BootUI

BootUI is a visual Bootstrap editor that doesn't require any HTML or CSS skills, and it features a diverse collection of responsive templates. It's easy to get started; just select a template and double-click to edit the content. It also works offline, has free updates and currently boasts 24 responsive template options.

The editor features real-time previews of the changes you make. If you require a specific Bootstrap template, simply email BootUI and the team will produce a responsive template to match your request at no extra cost.

Price: Free trial and $49.95 to purchase

14. Fancyboot

Fancyboot is a simple but powerful customization tool for Bootstrap that allows you to edit Bootstrap installations and see live previews of your changes. You can select the plugins and components you want included, use the side menu and select the colors you wish to use.

Bootstrap includes extra variables that are not available in the official customization page. Once you have made your changes, you can download a ZIP file with the compiled and minified CSS, as well compiled jQuery plugins.

Price: Free

15. Wrap Bootstrap Live Editor

Bootstrap Live is a WYSIWYG editor for Bootstrap that offers a simple and elegant way to edit and beautify HTML, with Bootstrap-ready content and snippets. The HTML button allows you to open the default source view with code coloring and formatting.

The editor features advanced options including button configuration, custom tags, localization and more.

Price: Free

16. Bootstrap Magic

Bootstrap Magic is a Bootstrap theme generator using the latest Bootstrap 3 release and Angular JS. It provides a live preview of any changes as you make them, and includes variable importing, a color picker and smart typeahead. It also completely rebrands the framework to your own style.

Once you have customized your theme, you can instantly download it with personalized CSS and LESS variables in a minified version.

Price: Free

17. Style Bootstrap

Style Bootstrap is an in-browser GUI utility to customize the Twitter Bootstrap look and feel. You can customize the body style, typography, buttons, navigation, forms, alerts and more. Once you've finished crafting your theme, you can download the generated CSS.

Price: Free

18. X-Editable

X-Editable provides in-place editing with Bootstrap, jQuery UI or pure jQuery, and the library allows you to create editable elements, including both "popup" and "inline" modes.

It boasts a wealth of features, including client-side and server-side validation, keyboard support, live events, customizable container placement and more. X-Editable provides faster development, easy adding and removing of fields, a simple backend script for data updates and is more convenient for small forms.

Price: Free

For the best info on Ionic, check out our great documentation page!

Note: Ionic currently best supports iOS 6+. Android support is okay but not great, but we are working to make Android kick ass in the coming weeks, so please let us know if you run into Android issues!

What is Ionic?

Ionic is the open source HTML5 Mobile Framework for building amazing, cross-platform native apps with HTML, JavaScript, and CSS.

We built Ionic because we wanted a framework that focused on building hybrid native apps, rather than mobile websites. We wanted this framework to be obsessive about great design and performance. A framework that left the past behind and focused on the future where mobile devices could make HTML5 feel native.

It's important to realize that Ionic is not a replacement for frameworks used for building mobile web apps. There are a lot of great solutions that work well for websites, like jQuery Mobile.

Ionic is also not a good solution if you need to support older generation devices. Our compatibility starts at iOS 6 and Android 4.1. We will never support versions earlier than those. This is a framework for the future.

Ionic: A hybrid mobile app framework

Ionic is a front-end framework for developing hybrid mobile apps with HTML5, CSS, and JavaScript. It’s fast, uses AngularJS, and it’s beautifully designed with a focus on Native features.