Wednesday, December 12, 2007

Layout in CSS

Doing my own design using div and float was really painfull - not even talking about the table time. You often need header, menu or tabs, content, footer,etc... and also have to take into consideration specific browser interpretation (box model and so on).

Discovering in the Yahoo! UI library a Grid CSS component, I just decided to give it a try.
Great documentation, quite simple use, in half an hour I have done a simple layout (header, left menu, main content divided into 3 different blocks, right content, and footer ). Not to mention that it is same rendering for different browsers. Everything I needed!

There are three main components:
  • the document : defines the width of the layout
  • templates: ready to use layouts
  • grids: to make more complicated and structured components.
Combining all three components should meet the requirements of most web pages layout.

What is just missing is to have a really simple way to add custom grids (like 40% + 20% + 30%)

If you want to play with it just test the builder.