Nowadays controlling and managing layouts with CSS has become one of the major issues as tablet support has been dropped; which makes it abundantly clear that the current potential of CSS is not good enough by which to develop complex and flexible layouts as easily. To overcome this problem, we have gathered a few jQuery plugins which will enable you to manipulate and develop page layouts faster and with cross browser compatible results.
With the following plugins, users can easily manage and arrange elements horizontally and vertically, lay out HTML elements on web pages, and convert any content into a newspaper-like column format. We hope you will find this list handy and useful for your development related tasks. Enjoy !
1. jQuery Masonry
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.
[button-dark url=”http://masonry.desandro.com/” target=”_blank” position=”right”] Source [/button-dark]
The jLayout jQuery plugin provides four layout algorithms for laying out HTML elements in web pages. The first is border, which lays out components in five different regions. The second algorithm is grid, which lays out components in a user defined grid. The third algorithm is flexGrid, which lays out components in a grid with flexible column and row sizes. The fourth and last algorithm isflow, which lays out components in rows with components overflowing to new rows if there, is not enough horizontal space.
The plugin allows you to lay out your elements with as little code as possible, and behaves correctly when used with margins, padding and borders.
[button-dark url=”http://www.bramstein.com/projects/jlayout/jquery-plugin.html” target=”_blank” position=”right”] Source [/button-dark]
The plugin automatically converts any content into a newspaper-like column format. A default column width or a static number of columns can be defined & the rest is almost done by itself. Optionally prefix all of the CSS classes used by Columnizer to avoid conflicts with your other styles. Use the new
cssClassPrefix to define the class prefix.
[button-dark url=”http://welcome.totheinter.net/columnizer-jquery-plugin/” target=”_blank” position=”right”] Source [/button-dark]
Creating equal height boxes or content holders is mostly a challenge with CSS. The plugin makes this process easy by simply calling a function.
[button-dark url=”http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/” target=”_blank” position=”right”] Source [/button-dark]
5. CSS-Template Layout
As a jQuery plug-in, the script parses a given set of CSS rules and displays the content as indicated in the specification. Options include the ability to select the CSS parsed, as well as an optional prefix to use for the CSS rules. Specifying a prefix allows style rules that are interoperable with a possible future browser implementations.
[button-dark url=”http://code.google.com/p/css-template-layout/” target=”_blank” position=”right”] Source [/button-dark]
6. UI Layout
This plug-in was inspired by the extJS border-layout, and recreates that functionality as a jQuery plug-in. The UI Layout plug-in can create any UI look you want – from simple headers or sidebars, to a complex application with toolbars, menus, help-panels, status bars, sub-forms, etc. Combined it with other jQuery UI widgets to create a sophisticated application. There are no limitations or issues – this widget is ready for production use.
[button-dark url=”http://layout.jquery-dev.net/” target=”_blank” position=”right”] Source [/button-dark]