Summary
Yahoo's YUI user interface toolkit now includes a CSS Grid Builder that makes correct cross-browser CSS page layout easy.
Advertisement
Developers often have to rapidly prototype Web pages with a certain layout. Instead of using HTML tables, CSS-based grids are more flexible for that task. But CSS grids are also difficult to get right, especially in a way that works across all the major browsers.
To alleviate the need of having to learn various browsers' CSS quirks, Yahoo's YUI toolkit now includes the YUI Grids Builder that makes CSS-based page layout easy. Jeremy Zawodny writes of this tool,
While I've heard tons of praise for YUI, the Yahoo User Interface library, I'd mostly assumed it was stuff for other people--you know, the ones who understand all that stuff... But I recently came across a link to the YUI Grids Builder and started playing with it. In about 20 seconds, I realized that I could use that as the framework to finally redo the horrible hack that is my blog layout.
YUI Grids Builder is a Web-based tool, works on all the major browsers, and provides a WYSIWYG layout environment for CSS-based tables and grids. Among its main features:
Supports fluid-width (100%) layouts as well as preset fixed-width layouts at 750px, 950px, and 974px, and the ability to easily customize to any number.
Supports easy customization of the width for fixed-width layouts.
Flexible in response to user initiated font-size adjustments.
Template columns are source-order independent, so you can put your most important content first in the markup layer for improved accessibility and search engine optimization (SEO).
Self-clearing footer. No matter which column is longer, the footer stays at the bottom.
Layouts less than 100% are automatically centered.
What do you think of the various tools in YUI's Ajax offerings?