CSS does a pretty darn good job of helping to lay out a web page… but not always. Even with all the versatility that CSS offers (including CSS3), it sometimes is not enough and, dare I say it, I really hate to say it – HTML tables are on [very few] occasions missed, as they can fill in the holes that CSSes layout techniques may leave behind.
Thankfully we do not have to venture down the road of HTML tables, there is a White Knight that can save is, as it always does – there is jQuery and its marvelous community of developers that release an endless river of powerful and always useful plugins.
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.
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 kind of UI look you need – from simple headers or sidebars, to a complex application with toolbars, menus, help-panels, status bars, sub-forms, etc.
If you combine it with other jQuery UI widgets you can easily create sophisticated applications.
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 is flow, 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.
jQuery pageSlide was inspired by the UI work of Aza Raskin. In his recent posts regarding concepts for Firefox Mobile and a mouse-based Ubiquity, Aza introduced the idea of sliding (or "throwing") content aside to reveal a secondary content pane.
A few years ago, Richard Rutter wrote Compose to a Vertical Rhythm, which described how web developers could use CSS to maintain proper vertical typographic rhythm when designing pages. The technique is fairly straightforward, requiring some basic math to ensure consistent margins and leading across all page elements.
One issue that many people face with this technique, is that vertical rhythm can easily be thrown off by non-text elements, such as images. One solution to this issue is to make sure your images always have a height that is a multiple of the line height being used by your document, and herein lies the power of this small jQuery plugin.
For a beautiful layout it is recommended to use the CSS property ›line-height‹. By setting the line height explicitly and calculate all vertical distances as multiples of the line height you ensure that all baselines are aligned to the same grid.
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. This jQuery plugin is designed to help with the creation of newspaper-style column layouts in HTML.
This project has the following goals: display columns filling the container allow smooth paging, without a reload smoothly adjust the page when resizing the window allow columns spanning images allow interstitial content, like quotes (todo).
If you've ever felt the need to wrap stuff around an irregularly-shaped image using CSS's float, you may have been somewhat disappointed to find out that it's forced to wrap around the image's bounding box, rather than the actual contents of the image. jQSlickWrap will fix all that.
The jQuery background canvas plugin injects such a canvas element behind a div or whatever block element and provides functions to draw on it. When the background of the div is made transparent, this canvas element can be seen and it will provide the new background for the div.
Creating the visual effect of equal-height columns or content boxes has been a challenge ever since the abandonment of table-based layouts.
This plugin adds support for scaling background images using a 9-grid. Developers can specify a grid for selected elements which causes the background-image to be scaled selectively, depending on what part of the grid the background lies.
JPolite is a pure front-end portal framework based on jQuery & BlueTrip CSS framework, with a handful of jQuery plugins already integrated. It provides a compact yet powerful foundation for custom AJAX web applications with Netvibes like user experiences.
You can use JPolite as a base for creating complex / customizable websites quickly by separating content, appearance and behavior. JPolite provides the ease of turning an HTML content block into tabbed or accordion control without extra code.
AlignWith is a simple plugin that will re-position one or more HTML elements that need to be aligned with another element.
Elements can be aligned by corners, edges and centre-points – ideal for dynamic content such as menus and tooltips.
jScrollHorizontalPane is a plugin based off of Kevin Luck’s jScrollPane which override’s the browsers default horizontal on any block level element with an overflow:auto style. It’s built on top of the jQuery library and uses both the dimensions plugin and the mouse wheel plugin. Provided with the download of the plugin there is a default jScrollHorizontalPane.css which can be used as a basis to edit the stylings on the scroll bar.
You might also like…
10 jQuery Plugins for Easier Google Map Installation »
25 Tutorials and Resources for Learning jQuery UI »
Creating a Web Development Environment using Google Chrome Extensions »
CSS References, Tutorials, Cheat Sheets, Conversion Tables and Short Codes »
The Blueprint CSS Framework – Tutorials, How-to Guides and Tools »
50 Essential Web Typography Tutorials, Tips, Guides and Best Practices »
50 Useful Tools and Generators for Easy CSS Development »
20+ Resources and Tutorials for Creative Forms using CSS »
24 CSS (in some cases with jQuery) Navigation and Menu Tutorials »
22 CSS Button Styling Tutorials and Techniques »
15 Amazing jQuery Image Gallery/Slideshow Plugins and Tutorials »