6 Flexible jQuery Plugins To Control Webpage Layouts Easily

Post pobrano z: 6 Flexible jQuery Plugins To Control Webpage Layouts Easily

Controlling layouts with CSS is a big subject these days as after dropping the table support, it is clear that the current capabilities of CSS is not enough to develop complex & flexible layouts with ease.

There is CSS Template Layout Module which offers exciting features but it is in a draft status.

Until we get those new features, there are various solutions that are developed with jQuery to manipulate page layouts for faster & cross-browser results.

Here is a collection of 6 jQuery plugins to manage page layouts easily:

jQuery Masonry

jQuery Layout Plugin

Masonry is like the flip side of CSS floats. Floats arrange elements horizontally then vertically, Masonry arranges them vertically then horizontally. And the result is no vertical gaps between elements of varying height.

The plugin is almost totally managed with CSS rules. It uses jQuery’s outerWidth() and innerWidth() methods to calculate the margins & paddings of elements.


jQuery UI Layout Plugin

This is a plugin to create desktop-like layouts. It can b used to create any UI look from simple headers or sidebars, to a complex application with toolbars, menus, help-panels, status bars, sub-forms & more.



The library provides three layout algorithms:

  • border, which lays out components in five different regions
  • grid, which lays out components in a user defined grid
  • flex-grid which offers a grid with flexible column and row sizes.


jQuery CSS Layout

The plugin aims to offer a similar functionality with the CSS Template Layout Module (which is currently in a draft status).

The script simply parses the mentioned CSS rules & displays the content accordingly.


jQuery Column Plugin

The plugin automatically converts any content into a newspaper-like column format.

A default clumn widt or a static number of columns can be defined & the rest is almost done by itself.


jQuery Equal Heights

Creating equal height boxes or content holders is mostly a challenge with CSS. The plugin makes this process easy by simply calling a function.

Special Downloads:
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop

SSLmatic – Cheap SSL Certificates (from $19.99/year)
Dreamhost $50 Discount Code: WRD
Follow WebResourcesDepot At Twitter And Get More Resources!

Tags: ,

Related posts

Dodaj komentarz