Skip to main content

Web: 960 Grid System

I just watched the video for 960 Grid System. What a weird idea: constrain the page to 960 pixels and cut it up into 12 columns. When laying out your page, each piece fits into one or more contiguous columns. It might make more sense if you look at their examples.

Naturally, I knew about YUI Grid, but for some reason, watching the video for 960 Grid System helped me envision how I might actually use it. I've never really been good at super complicated layouts without using tables, but this seems easy enough to use. There's even a version of the CSS that isn't limited to 960 pixels.

Anyway, I'm not saying I'm going to convert all my sites, but I do think it's weird that somehow constraining yourself to fixed numbers like 960 pixels and 12 columns leads to greater flexbiliity. Since I'm a fan of haiku, that kind of makes sense to me.

Comments

metapundit.net said…
If you're getting into grids Blueprint is worth a look too. It's a grid system plus some typography and form styling and it comes with some nice command line tools to store customizations and generate customized versions of the base framework...
jjinux said…
Thanks, Simeon.
Anonymous said…
I like the idea of using grids for layout, which actually long predates the web, originating from the days of hand typesetting. However, while the CSS grid frameworks probably make it a little faster to do the initial layout, I don't like that they depend strongly on mixing the presentation into the HTML.

So, instead of the normal approach of adding semantic classes like "menu-bar" to the elements and styling that class from CSS, your presentation must be specified with classes like "columns-2". That said, it probably does make it a bit quicker to build new layouts, though changes to the layout may require changing more HTML files than a purely CSS-based layout.

What we really need is another layer of abstraction, so that I can say class "menu-bar" should span 2 columns, where columns are defined as .... Stuff like the CSS3 Template Layout are looking kind of interesting, though a meta-CSS language or some crazy Genshi transforms to inject column definitions would be another interesting way to abstract the layout from the HTML.

Interestingly, one of the original authors of Blueprint CSS now dislikes its un-semantic nature and has written a simpler set of CSS stylesheets that are more a "starter-kit" than framework:
http://code.google.com/p/css-boilerplate/
jjinux said…
Thanks, Matt.
jjinux said…
I was looking at http://www.ubuntu.com/getubuntu/download, and I was thinking to myself, "Wow, that looks just like a 960 Grid System layout." It turns out, I was right ;)
jjinux said…
I just looked through css-boilerplate. It does as it promises. It fixes some CSS stuff, but without any builtin grid stuff. I don't see much documentation, however, it looks pretty simple. It resets everything and provides its own default stying.
jjinux said…
Blueprint provides:

* A CSS reset that eliminates the discrepancies across browsers.
* A solid grid that can support the most complex of layouts.
* Typography based on expert principles that predate the web.
* Form styles for great looking user interfaces.
* Print styles for making any webpage ready for paper.
* Plugins for buttons, tabs and sprites.
* Tools, editors, and templates for every step in your workflow.

The web page looks nice, and it looks like they're working on a real community.

I'm not sure I buy the idea that HTML should be 100% semantic and contain no layout. I think that's a laudable goal. However, we still have br tags. We still have div vs. span tags. The order of elements still matters. There are lots of little hints about layout built into the HTML. If you have an HTML page with 5 divs, it's hard to show them in a random order without using absolute positioning.

I think the point of CSS is to keep the HTML as clean as possible. If you strip away the CSS, you should get a plain looking, but functional page.

I agree that using things like class="span-7 colborder" isn't 100% ideal. However, the logic is in a class attribute. It's not permeating the HTML structure itself, like using a table-based layout does.

Using a class in this way doesn't seem very different from my other post http://jjinux.blogspot.com/2009/09/javascript-jquery-event-handling-in.html in which I showed how FriendFeed completely decides which JavaScript event handlers to hook up based on the class. I.e. class="l_expandcomments".

Hence, the purpose of the class attribute is to loosely couple the HTML with the CSS and JavaScript. I guess it's a matter of taste whether something like "span-7" is coupling too tightly. The 7 does signify something about the width. However, it doesn't specify actual pixel values.
jjinux said…
960 Grid System appears to focus entirely on providing a grid system. It's interesting to note what the tutorial says at the end:

"Now that the prototype is finished,to take stock what has been done. You've manage to quickly prototype a design. Grid 960 easily created the grid for us. Where do to go from here? Naturally we would show the client and see what they think. There are a few caveats though. Have you tested this design in IE6 or IE7? No. Should we? No. This is a prototype. This is what it would look like in production. It is natural that any browser quirks would be worked out before production. What if the clients wants to create a more complex design? In this case, you will quickly start to see the limits of the framework. What if the design needs to be liquid or elastic? The framework will no do that. You would need to start from scratch. Remember that CSS Frameworks do not solve all your problems, but they do help with some. Grid 960 as well as others are great for throwing together prototypes. You can just as well use the concepts of Grid 960 in the production code, but it is not recommend sticking with a framework all the way through production. CSS frameworks are just like any tool, they have their uses. With that in mind, go forth and prototype!"
jjinux said…
It's interesting to note that Blueprint uses 23 columns, and 960 System Grid has a nicer looking web page ;) Aside from those two things, I think I like Blueprint more because it provides a bit more. Of course, what the heck do I know?

Popular posts from this blog

Drawing Sierpinski's Triangle in Minecraft Using Python

In his keynote at PyCon, Eben Upton, the Executive Director of the Rasberry Pi Foundation, mentioned that not only has Minecraft been ported to the Rasberry Pi, but you can even control it with Python . Since four of my kids are avid Minecraft fans, I figured this might be a good time to teach them to program using Python. So I started yesterday with the goal of programming something cool for Minecraft and then showing it off at the San Francisco Python Meetup in the evening. The first problem that I faced was that I didn't have a Rasberry Pi. You can't hack Minecraft by just installing the Minecraft client. Speaking of which, I didn't have the Minecraft client installed either ;) My kids always play it on their Nexus 7s. I found an open source Minecraft server called Bukkit that "provides the means to extend the popular Minecraft multiplayer server." Then I found a plugin called RaspberryJuice that implements a subset of the Minecraft Pi modding API for B

Ubuntu 20.04 on a 2015 15" MacBook Pro

I decided to give Ubuntu 20.04 a try on my 2015 15" MacBook Pro. I didn't actually install it; I just live booted from a USB thumb drive which was enough to try out everything I wanted. In summary, it's not perfect, and issues with my camera would prevent me from switching, but given the right hardware, I think it's a really viable option. The first thing I wanted to try was what would happen if I plugged in a non-HiDPI screen given that my laptop has a HiDPI screen. Without sub-pixel scaling, whatever scale rate I picked for one screen would apply to the other. However, once I turned on sub-pixel scaling, I was able to pick different scale rates for the internal and external displays. That looked ok. I tried plugging in and unplugging multiple times, and it didn't crash. I doubt it'd work with my Thunderbolt display at work, but it worked fine for my HDMI displays at home. I even plugged it into my TV, and it stuck to the 100% scaling I picked for the othe

Creating Windows 10 Boot Media for a Lenovo Thinkpad T410 Using Only a Mac and a Linux Machine

TL;DR: Giovanni and I struggled trying to get Windows 10 installed on the Lenovo Thinkpad T410. We struggled a lot trying to create the installation media because we only had a Mac and a Linux machine to work with. Everytime we tried to boot the USB thumb drive, it just showed us a blinking cursor. At the end, we finally realized that Windows 10 wasn't supported on this laptop :-/ I've heard that it took Thomas Edison 100 tries to figure out the right material to use as a lightbulb filament. Well, I'm no Thomas Edison, but I thought it might be noteworthy to document our attempts at getting it to boot off a USB thumb drive: Download the ISO. Attempt 1: Use Etcher. Etcher says it doesn't work for Windows. Attempt 2: Use Boot Camp Assistant. It doesn't have that feature anymore. Attempt 3: Use Disk Utility on a Mac. Erase a USB thumb drive: Format: ExFAT Scheme: GUID Partition Map Mount the ISO. Copy everything from