In today’s competitive time, who doesn’t want to catch the attention of its targeted audience? None of us, right? Yeah, on the internet we all want to provide our audience with an awesome design and advanced features with quick navigation to cheer and brag about. And in this, the latest HTML5 and CSS3 help us a lot. But, many a times that’s not sufficient as while working with HTML5 and CSS3 you’ll notice that sometimes it becomes annoying to control the web layout, and that’s where jQuery comes into play.

So today we are going to talk about the 15 awesome jQuery Layout and UI plugins that you should really use in your own or client’s project.

1. jQuery Responsive Web

Responsive design is the new trend in web development industry. As if you use a responsive design on your website, you’ll never need a separate mobile site to counter your audience that uses a smartphone to access the web. And this awesome jQuery Responsive Web plugin makes your website adapt to any screen size with almost no setup.

Once you install this jQuery plugin on to your site, it adds dynamic classes to the section, depending upon the OS, resolution and browser.

To implement this into your existing site or blog, you just need to add a little code i.e., “$(window).responsiveWeb();” in your .js file. Additionally, just make sure that the jQuery version you are using is v1.2.x and above.

2. jQuery UI Layout

jQuery UI Layout is another fantastic jQuery plugin that makes plenty of things quick and easy. This jQuery plugin is inspired by another jQuery plugin named as extJS borderlayout, but it offers better control and let you customize your layout more easily. With this plugin you can create any User Interface look from simple headers or sidebars, to a complex application with status bars, toolbars, help-panels, menus, sub-forms & much more. That’s because it offers unlimited layout capabilities, and dozens of options with full CSS control.

While using this plugin, you can use any of the HTML5 elements such as divs, iframes, etc. Additionally, you can also use it in unison with other jQuery UI widgets that are helpful in creating a well refined application.

3. Shapeshift

Have you ever heard about jQuery Masonry? It’s also a popular jQuery based grid layout plugin, but couldn’t make it to our list. And Shapeshift is inspired by the same plugin. It is capable of organizing a compilation of web elements into a column grid system dynamically, which is somewhat identical to Pinterest.

The thing that makes it different from other jQuery layout plugins is its ability to drag and drop items within the grid while keeping a logical index position for each and every specific item in use. This eventually allows for the grid to be delivered precisely every time Shapeshift comes in use, but for that the child elements should be in perfect order.

Some Advance Features of Shapeshift that makes you inclined toward it.

• Column Grid System: All the present items flow from top to bottom and from left to right.
• Drag & Drop: You can click and drag web elements to move them across the layout.
• Responsive: Once you resize the browser window, the grid will change itself to a new dimension according to the browser window’s size.
• Works on Touch: Integrate it with jQuery UI Touch Punch, which will enable drag and drop on touch devices.

4. jLayout

Do you want to use something that can offer different layout algorithms? Then try and use jLayout jQuery plugin. This perfect plugin offers four layout algorithms for laying out HTML elements in a webpage. The first one is border, which sets the components in 5 varied regions. The second one is grid, which puts down the components in a grid defined by the user. The third one is flexGrid, which places the components in a grid comprising of flexible rows & columns size. The last and final algorithm is flow, which places the components in rows, which overflows to new rows if there’s a dearth of horizontal space.

5. jQuery Full Content

How about making a full screen single page site? Have you ever thought about it in the past? Probably not, but it’s a new trend in the web development industry. With jQuery Full Content plugin, achieving this looks pretty simple and quick. This plugin create containers with full width & height of the window screen, and adds a dynamic position to it. Each of its containers can be easily set in any horizontal or vertical position. With it scroll animation can also be applied between two or more containers. In addition to this, the jQuery Full Content is very easy to configure and pretty simple to use. It also supports Internet Explorer version 8.0+.

6. CSS-Template-Layout

Ever heard about W3’s CSS Template Layout Module? Probably yes, but it’s still in a draft status. However, with CSS Template Module, a jQuery plugin, you can still use that in draft module as it breaks down a given set of CSS rules and displays the content as defined in the specification. The best part about this plugin is that it supports almost all modern and old browsers, for example; you won’t face any problem with it on Internet Explorer version IE6+, Firefox 2+, Opera 9+, Safari 3.1+ and Chrome 1+.

Its Additional Features:

• By adding this little code “$.templateLayoutShowOnReady()” before $(document).ready(function){ } to avoid the brief appearance of the un-templated page before the DOM gets loaded completely.
• With this code “$.redoTemplateLayout()” you can easily run the template process again.
• You can use/implement the jQuery’s css( name, value ) function if you want to change the display and position template properties on specific web elements.

7. jQuery Nested

jQuery Nested is a fascinating jQuery based plugin that allows users to create multi-column, dynamic grid layouts in seconds. What makes it differ from other JavaScript libraries and jQuery plugins that are identical to it, is that it allows you to have a complete gap-free layout. To ensure the gap-free layout is done effectively, the jQuery Nested creates a matrix of all web elements and generate a multi-column grid, akin to other libraries and scripts. Then it looks for the gaps within the generated matrix and tries to fill them by re-arranging the present elements.

8. Columnizer

If you want your website to have a newspaper look, then the Columnizer would be the most appropriate jQuery plugin for you to opt for, as it automatically converts any content present on a particular website into a newspaper-like column format.

And the best part is that you will always have total control to set the column width and the number of columns to be used. Once it’s all defined as you per your preferences, just leave the rest on Columnizer.

In addition to this, there are plenty of other features that are associated with this perfect jQuery layout plugin.

• With its latest version, you can define the line breaks for some or all columns present on your website.
  • Change the new `manualBreaks` option to true, if you want to use only manual breaks without any auto-columnizing effect which is set to false by default.
  • Any node with a CSS class called `columnbreak` will serve as a column break for that specific column.
• If you facing any error while using the CSS classes used by Columnizer with your other styles, just prefix them all by using the `cssClassPrefix`.

9. Freetile.js

Freetile, a jQuery layout plugin is yet another fantastic plugin that you can use to add more dynamism on your website. It organizes the content of a webpage in a responsive and dynamic layout. It can be implemented to either all or any specific container element. Once it is applied, it looks to arrange, the content within those container elements, in an optimal layout that uses the screen space by packing them in a tight arrangement.

Though the makers of Freetile were initially inspired with other jQuery layout plugins such as vGrid, Woomark, and Masonry, but they have been able to make it different from those. To use it on your site, you don’t need to define a column width suitable to the size of the web element. Moreover, you can also customize the Freetile according to your own preferences.

10. Gridster.JS

Gridster is another awesome jQuery layout and UI plugin. It is identical to Shapeshift that we have already covered above. It allows building instinctive draggable layouts from web elements across multiple columns present on a webpage. With the help of this plugin, you can add or remove elements from the grid dynamically. To ensure that Gridster works smooth and effectively on your site, it should only be viewed on Internet Explorer 9+, and the latest version of Firefox, Google Chrome, Opera and Safari.

11. Script.Aculo.Us

Script.aculo.us is an open source, but comprehensive set of JavaScript library, which help web developers to build intuitive web user interface and make powerful websites. This awesome script library provides its users with some exciting features and full control on the web with a visual effect engine, Ajax based auto-completion, in-place editing, a drag and drop library, sliders and much more. However, if you don’t want to offer all these functionality to the end users, you can limit the execution of all those scripts by defining them in a comma separated list, which will look something like this;

<script src="scriptaculous.js?load=effects,dragdrop" type="text/javascript"></script>

12. Grid-A-Licious

These days, people are inclined towards Pinterest, and ask web developers to make a similar user interface for their websites. And Grid-A-Licious can easily help in that. But it still has a unique difference if compared with the rest. Grid-A-Licious is responsive and adapts to different screen sizes and resolutions or devices pretty easily. Therefore, if you want to build a powerful responsive site then you must try it once to know its capability as well as its simplicity.

Apart from being responsive, there are some exciting features that are associated with this perfect jQuery based Grid-A-Licious plugin, which are listed below.

• Width and gutter setting.
• fadeInOnAppear effect.
• Prepend and Append method to add new items.
• OnComplete Call back event.

13. Metro UI CSS

When Microsoft launched Windows 8 in the global market, its user interface grabbed a lot of attention, and people started to make their websites with the similar kind of UI. However, for web developers, making such an interface was a time consuming task, but not anymore as Metro UI CSS allows them to develop Window 8 lookalike user interface within a short span. The Metro UI CSS uses the pre-defined css styles and markup. With the super awesome Metro UI CSS, you can modify and have better control on your menu and navigation, accordion, buttons, rating, carousel, slider, sidebar, dialog box, calendar, etc.

Features:

• It is has been developed using LESS dynamic stylesheet language.
• You can use it for free by linking back to its site.
• It supports responsive layout.
• It has got an easy to use grid system.

14. jQuery EasyUI

EasyUI framework, as the name suggests helps the developer to build custom user interfaces. EasyUI is in itself a collection of jQuery based user interface plugins that provide you with the essential functionalities to build modern interactive web based application having custom UI design. It is powerful time saving tool and the best part about it is that it can also be used to create UI for HTML5 applications and JavaScript applications. It can be used to create Drag and Drop applications, Menus, Button, Layouts, DataGrids, data Windows, data Trees, and Forms.

15. jQuery Tools

jQuery is a powerful JavaScript library which can easily enhance the overall functionality in a website. And jQuery Tools is a massive compilation of the most important jQuery elements that can be used to create astonishing UI, which includes tooltips, accordions, tabs, navigation, and visual effects.

For using jQuery Tools, it isn’t necessary to be skilled in web design and development, instead a novice can also use it pretty easily as there are plenty of demos available on its main site with which you can easily learn, and can also use their source code for development. Moreover, the jQuery Tools library is a well maintained one, and is updated regularly.

If this list of jQuery Layout and UI plugins has been of any use for you, or you have tested any of the given plugins, please share your experience in the comments section provided below.