10 jQuery Plugins to Help with Web Page Layouts

By / May 21, 2010 / Tools
shares

Every now and then a web project will come up that has special and unique layout requirements, and the current capabilities of CSS just aren’t enough. With projects such as these, jQuery can be your best friend. So here are 10 jQuery plugins to help you out with page layouts.

UI.Layout

jquery

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.

mb.containerPlus

jquery

This plugin let’s you build full featured and fully skinnable containers. The container can be set to draggable, resizable, collapsable and minimizable.

css-template-layout

jquery

The project aims at providing web designers with a way to use the W3′s CSS Template Layout Module today. 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.

Masonry

jquery

Masonry is a layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

Columnizer

jquery

Columnizer will automatically layout your content in newspaper column format. You can specify either column width or a static number of columns.

jQSlickWrap

jquery

jQSlickWrap forces text to wrap around the contents of an image, not just its bounding box as it does when you use a float with CSS.

Equal Heights

jquery

Equal Heights loops through the top-level child nodes of a specified element and sets their min-height values to that of the tallest.

js-columns

jquery

js-columns is designed to help with the creation of newspaper-style column layouts in HTML. While CSS3 has a variety of column-style properties, these are not yet widely implemented, and none help with the creation of page-based layouts.

Columnize

jquery

jQue­ry Co­lum­ni­ze al­lows you to crea­te a newspa­per-li­ke co­lumn lay­out.

jLayout

jquery

jLayout provides four layout algorithms for laying out HTML elements in web pages. This plugin allows you to lay out your elements with as little code as possible, and behaves correctly when used with margins, padding and borders.

About the Author

Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. He is the founder of WDL and ThemeTrust.

20 Comments

  1. Oles
    May 21, 2010

    Thanks, useful post.

    Reply
  2. Heather
    May 21, 2010

    These are great – I know of at least two of these that I’ll be trying out immediately. Thanks for the inspiration.

    Reply
  3. tgpo
    May 21, 2010

    Masonry is very useful! Thanks for the list.

    Reply
  4. HowToPlaza
    May 21, 2010

    This can really speed up the job of creating awesome-looking layouts.

    Reply
  5. Santorini
    May 21, 2010

    Very nice list. Thanks, just learning css3

    Reply
  6. Michael Pehl
    May 21, 2010

    Nice collection. I think I should test some of these plugins :)

    Thanks for sharing!

    Reply
  7. Jordan Walker
    May 21, 2010

    Why use JavaScript in place of CSS?

    Reply
    • ddeja
      May 21, 2010

      Couse sometimes it’s better looking. I think that’s all. You want nice looking page You use CSS, but if You want flash, trendy what ever page You use JavaScript:)

      Reply
      • dan
        May 24, 2010

        that’s the stupiest comment i’ve seen in a long time. get a book on progressive enhancement.

        Reply
        • Doug Gough
          May 25, 2010

          Yes, I agree. That comment is pretty stupie.

          Reply
    • Scott
      August 10, 2010

      Because it’s one line of javascript and 10 minutes work, vs hours of frigging with pages of css, just because css and HTML were not developed with the modern web application in mind. How would it be if all your desktop apps either had a half-filled window, or a scrollbar on the right with half the contents off the page? No thanks.

      Reply
    • Jay
      December 7, 2011

      It’s the same mentality that uses Java over C++. Make life easy for the developer and make the end user pay in extra processing every time they use the app.

      Reply
  8. Marco
    May 22, 2010

    Thank you for sharing, it’s a very useful list!

    Reply
  9. CSSReX
    May 22, 2010

    Nice List! I am going to try all these one by one :)

    Reply
  10. suraj
    May 23, 2010

    very useful plugins for webmasters, thanks for sharing. :)

    Reply
  11. Soulsizzle
    May 24, 2010

    I tend to stay away from doing layout with JS, but Masonry rocks. Definitely very useful.

    Reply
  12. Avinash
    May 24, 2010

    Thanks for sharing !

    will give it a try very soon :)

    ~Avinash

    Reply
  13. Stevensst
    May 24, 2010

    great ! thanks for sharing, been looking for some of em for a long time!

    Reply
  14. richard
    October 4, 2010

    Awesome. I especially like the UI.Layout. Tested the layouts on the fly using htmlinstant.com and they looked good.

    Reply
  15. Abhishek Saha
    October 23, 2011

    You can also have a look at http://ajaxtown.com
    It has a Layout Plugin which can creates 1-2-3 column layouts along with preloading option. easy to implement.

    Reply

Leave a Reply