The GRID system in CSS is almost everywhere. Most large sites use it to squeeze advertising into blocks that run for miles up the sides. The Grid system was actually a way to harmonize creative site design as the missing connection between website design in Photoshop and other graphic programs and code like CSS and Forms used by Blog software like Textpattern and WordPress. The 960 Grid System, beautiful as it is, promises that it’s so easy and intuitive, webpage makers like me can produce something in record time.
Problem: I overslept and have a few scant hours to design a brand-new series of pages that advertise and link to a payment portal (actually just a link) and so far, I’ve got nothing. Templates are out of the question: I can be inspired by some, but can’t use them directly. It’s 10:00AM
http://960.gs to download the .zip that contains instructions, a Photoshop file and some CSS and HTML to get started.
10:45AM Basic idea of index page laid out. Sub-pages will just bea variation of this. The pink lines are from the 960.gs template that matches grid lines to CSS grids based on the 960 pixel concept. With image blocks and Rhona Mitra’s maw starting where the pink lines start, using those images as backgrounds to blocks of widths that divide evenly into 960 (960 at the top and 3 times 300 with 20px gutters under the top), 960 claims this can’t really go wrong.
12:15PM Hmmm. You can’t tell by looking at the screenshot of my slower-than-expected progress, but my 960 magical stuff immediately and magically became 940. The big banner of lips was designed at 960 and fit in, but re-iterated itself to 20px smaller somewhere along the way. I think it was my misunderstanding of the guides. The document you download for a 960 site is acutally 1080px. With the convention of 20px gutters which are actually 2 10px gutters side-by-side, I must have sized within the outer gutters losing the 20px. sigh.
1:00PM Not a massive amount of changes, but a verified fit centering on monitors larger than 940 in width in all browsers. Big container DIV ruined me since it was far from evenly divisible by so many factors as 960 is: 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. With three columns, 940 kind of sucks because something, somewhere is going to be uneven.
960’s great but not when you’re in a pinch and haven’t gotten more than several hours of sleep! Some may recognize the initial layout as following along with “arts projects #12.” I copied nothing from the disk. So there. Now it’s just a ton of phones calls to check copy and links and re-sort the colors and images. Their homes have been established which is exactly what CSS is good for. You can change tons of layout elements for multiple pages on the fly. The final look after approvals and custom graphics and more CSS placement code:
