Using YUI grids: A dream come true

I've never been a hero when it comes to putting designs into a good HTML/CSS website. It's just not my strength, and also not something I overly enjoy. Especially the fact that anything I put together would break under Internet Explorer was a hell. But when Dave Dash pointed me towards the YUI grids feature, a new world opened for me.

I know the difference between various browsers, and I know that using certain approaches in your HTML or CSS usage will probably lead to things breaking in one browser or another, but sometimes, that certain approach is just the best solution there is. I had heard of CSS "frameworks" before but since HTML and CSS has never been the thing I like doing most, I never really looked at it, afraid that I had to learn all kinds of things. I was stupid.

Just as I like symfony for the fact that it makes development more structured and easy (obviously as long as you stay within the "boundaries" of how symfony works), CSS frameworks make the CSS work a lot more structured and easy (with the same limits). There are various out there, but as I was struggling with a problem I sent an IM to Dave Dash and he suggested I look at YUI grids , the CSS grid framework of the Yahoo! UI toolset. This was a good move, because within an evening I had rebuilt the complete markup and layout of the site I was working on at that point, but the markup looked much better and it looked exactly the same in several different browsers, including the most popular, Internet Explorer, Firefox and Opera. Oh, and did I mention that it took me several evenings of work just to get it to work correctly on Firefox?

The work starts with the CSS Grid Builder , a tool that Yahoo! provides for getting your basic grids up and running. This will provide you with an empty HTML page (or with lorem ipsum strings if you so choose) that you can use as the starting point for your work. From there on, it's just decorating the HTML that is there with your own CSS for giving it the look you want. But all the rows, columns and menu bars that you want are there for you to use. Awesome! As the most work of getting a layout up and running is the positioning and general layout. After that it's just adding borders, graphics, and of course your php code for serving the content.

I've now done two sites with YUI grids, and I can't do without it anymore. This site and symfony-framework.nl are running happily on Yahoo!'s grids, and as soon as I start work on a new site, I'll first look at YUI for solving my CSS pain.