Most web designs use a classic header, columns, and footer layout, so there is no point in slaving over the details of the basic structure when you are starting a new design from scratch. YAML Builder makes the process quick and easy with a simple WYSIWYG online tool to build out your starting point.

You start out with a basic three column layout and from there you can customize it to fit your specific needs. Choose the doc type (I prefer HTML 4.0 Strict), optional base elements, and the number of columns to start out with. You can specify the widths of various elements choosing between a static width or liquid layout and the source order of the columns. Finally, the fun can begin by adding specific elements like headings, paragraphs, and lists to complete your basic web page. It should be noted that adding the specific content is not as straight forward as I would have expected. You need to click on the ‘Add +’ toggle in the upper left corner of the element before you can drop in child elements. Throughout the whole process you can click the ‘Toggle View’ button to see a real time preview of the final rendered code. When you are all done click the ‘Get Code’ button and the builder will display the HTML code, the base CSS code, and even an Internet Explorer bug fix CSS in a slick modal pop up so you can be off to a great cross-browser start.

YAML (Yet Another Multicolumn Layout) is an open source CSS framework meant to get you up and coding quickly while reducing the tedious detail work associated with CSS design. Download Squad recently reviewed the Yahoo CSS Grid Builder tool which does a similar thing but is much less polished. The YAML builder also offers a greater flexibility with your design as well as using less code in the end.

If CSS has left you a bit dizzy in the head or you simply want a quick place to start, the YAML builder is the best place to go to.