___layouts - A simple CSS layout builder

Christos Constandinou has taken YUI Grids and made ___layouts which is a simple CSS layout builder. It is quite easy to use and does work with fixed-width layouts. I do like the ‘tidy’ and ‘untidy’ features that give you the easy ability of having equal height columns or not.

The foundational ___layouts file offers five preset page widths, the option to have a fixed width or a text “zoom” style scaling effect and two core templates which give you the ability to nest subdivided regions of one to four columns.

  • Supports fluid-width (100%) layouts.
  • Supports preset fixed-width layouts at:
    • 640px
    • 760px
    • 900px
    • 1000px
  • Supports easy customization of the width for fixed-width layouts.
  • Option to make layout flexible in response to user initiated font-size adjustments
  • Self-clearing sections. No matter which column is longer, each div.section will clear correctly.
  • Option to center within the viewport pages less than 100%.
  • Supports easy to over-write CSS classes for people who require “pixel perfect” layouts
  • font.css based on YUI fonts.css though changed slightly to rid you of having to look up calculations for different font-sizes (so now: 1em = 10px, 1.3em = 13px, etc…).

There is also a builder application (FF only) which will give you a view on the layout.

This entry was posted on Thursday, February 15th, 2007.
You can leave a comment, or trackback from your own site.

1 Trackbacks/Pingbacks

  1. Pingback: Fixed CSS Centered Layout Tutorial by Vernon Kesner on February 27, 2007

Leave a comment