Kindergarten Web Design

| | Comments (0) | TrackBacks (0)

The other day, I bumped into a blog that mentioned a CSS framework called 960 Grid System. I haven't been doing as much Web development in recent years as I used to, but the name caught by eye even though it wasn't clear from the blog post what it was exactly. My teething son woke me up tonight, and I couldn't get back to sleep. So, I thought I'd check it out.

I guess the idea goes back to the kindergarten exercise of copying an original piece of artwork by drawing horizontal and vertical lines through it and replicating the contents of each square to a derived work. Now that we're all grown up though, we do this by starting with a Web design created in Photoshop, enabling a layer that overlays a grid, and marking up the design in HTML and CSS to match the graphic designer's original — one square at a time.

I found this tutorial to be very help in figuring out what this framework and its alternatives are all about. I learned from reading it and other articles, that there are a number of competing CSS-based grid frameworks including

among others. I've used YUI a lot in the past, so I would be inclined to start with that one, but it is purportedly bloated and not as lightweight as some might prefer.

Regardless of which framework is used, just a cursory look shows that making CSS-based layouts is a whole lot easier now than the last time I tried. With these toolkits available nowadays, you can be sure that my next Web site will be laid out using one of them.