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.
jQuery Masonry
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 Plugin
The Columnizer jQuery Plugin will automatically layout your content in newspaper column format. You can specify either column width or a static number of columns.
And, yes, it’s very easy to use!
UI.Layout Plug-in
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.
jLayout
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
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.
This plugin allows any developer to recreate a similar interaction on their own website using a few simple lines of Javascript. By attaching the method to an anchor tag, pageSlide wraps the original body content into a wrapper and creates an additional block for the secondary content load. The slide is animated whenever the click event is invoked.
jMetronome Vertical Rhythm Example
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.
Columnize
jQuery Columnize is a plugin for the Javascript library jQuery which will allow you to create a newspaper-like column layout. The original HTML code only needs small adaptions, and in most cases, it is not necessary to adapt the code at all.
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.
js-columns
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).
jQSlickWrap – Slick text wrapping for jQuery
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.
Layout Background Canvas Plugin: Gradients, Rounded Corners without CSS
The HTML5 standard introduces the element, a resolution dependent bitmap canvas on which 2D graphic objects can be rendered. With JavaScript one can draw shapes like circles, rectangles and lines on this element.
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.
Equal Heights with jQuery
Creating the visual effect of equal-height columns or content boxes has been a challenge ever since the abandonment of table-based layouts.
When developing complex web applications or site designs you will find that it often makes sense from a usability and performance standpoint to use a simple JavaScript workaround: this equalHeights() function determines the heights of all sibling elements in a container, and then sets each element's minimum height to that of the tallest element.
When JavaScript is disabled, the boxes or columns appear with varying heights, but the content remains legible and the page is still completely usable.
scale9grid
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 v2 – Lightweight jQuery Portal
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
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.
Elements can be aligned by corners, edges and centre-points – ideal for dynamic content such as menus and tooltips.
Scroll Horizontal Pane
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 defaultjScrollHorizontalPane.css which can be used as a basis to edit the stylings on the scroll bar.
0 comments:
Post a Comment