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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/strict.dtd\"> <html> <head> <title>960.gs Test Page</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <link type="text/css" href="css/reset.css" rel="stylesheet" media="screen" /> <link type="text/css" href="css/text.css" rel="stylesheet" media="screen" /> <link type="text/css" href="css/960.css" rel="stylesheet" media="screen" /> <link type="text/css" href="css/test960.css" rel="stylesheet" media="screen" /> </head> <body> <div id="status"> <div class="container_12"> <div class="grid_12 clear:after"> <p>This is my status banner!</p> </div><!-- close grid --> </div><!-- close container_12 --> </div><!-- close status --> </body> </html> |
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.
