960 Grid System

JJ — Mon, 11 Jan 2010 01:13:36 +0000

I’m a developer. Specifically these days, I’m a web developer. I enjoy spending time creating solutions (read applications) for the web. A key part of building a good web application is an effective layout. When I started my new project I went looking for something to help simplify the process of getting a good web 2.0 layout. What I found was the 960 Grid System. This clean and elegant CSS Framework developed by Nathan Smith is both easy and fun to use.

960, as its name suggests, is intended to produce grid layouts that are 960 pixels wide. You can choose between 12 and 16 column layouts. 960 also comes with a browser reset style sheet and a text style sheet that provides a reasonable starting point that spans both Windows and Linux browsers effectively. There is an overview written by Nathan that is helpful in getting started. There is also a tutorial and video on net tuts+ that were helpful when I started using 960.

One problem that I ran into quickly was wanting to get my background colors to extend to both edges of the browser while keeping the layout at 960 pixels. I knew it could be accomplished since many of the demo pages for the framework were designed this way. I found the answer here, but I decided to post a more simplified version that might be helpful to others.

 
 
	 
		960.gs Test Page 
		 
		 
		 
		 
		 
	 
	 
		
			
				
					This is my status banner!

Then all you need to do is provide your own custom CSS found in test960.css.

1	#status { background-color: #f0f0f0; height: 20px; margin: 0; padding: 0; overflow: hidden; }

That’s all there is to it. As you can see the style is applied to the containing DIV tag and the 960 container and grid classes are applied to nested DIVs. I admit it’s a trivial example, but hopefully one that you find helpful.

960 won’t solve all your problems when it comes to web layout. It also won’t help if you need a flexible layout (although there is a variant that will). What it does do is give you a great starting point for a fixed width design. In fact, I was so inspired by how easy it made the process that I considered creating a new WordPress theme for my blog. I’m still considering it. Stay tuned.

Rabbit Holes

JJ — Mon, 21 Dec 2009 02:24:17 +0000

It’s funny how the web works. I started off reading about how to set up a new project in Kohana v3 PHP Framework. A link there took me to the source code of a site by shadowhand, one of the Kohana v3 core developers. That lead me to the site of w.ings consulting which is the web development business of Woody Gilk (aka shadowhand). From there I went to the BlueTrip CSS Framework page which was pretty cool and which I will for sure try on my new project. BlueTrip was created by Mike Crittenden so I checked out his blog. Turns out that Mike’s blog is powered by Chyrp blogging software, which is written in PHP and which I have never encountered before. Not that I need another blogging software (WordPress), but it’s always fun to find new things.

There is nothing remarkable about all of this. It’s a classic example of how anyone who is a techno geek (or not) goes about searching the web. What is remarkable is the amount of information that I obtained in a matter of 10 minutes of clicking and reading. The world has changed, but how do we process it all? We are still trying to make sense out of too much information. Everyone is working hard to turn Information into Knowledge. The real trick is turning Knowledge into Wisdom. It just seems like we are running at full speed trying to solve the wrong problem. I’ll put that one on my todo list for tomorrow. Wish me luck.

A Path Less Taken » css framework

960 Grid System

Rabbit Holes