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 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:
jjinux said…
Thanks, Matt.
jjinux said…
I was looking at, 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 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 Bukkit s…

Apple: iPad and Emacs

Someone asked my boss's buddy Art Medlar if he was going to buy an iPad. He said, "I figure as soon as it runs Emacs, that will be the sign to buy." I think he was just trying to be funny, but his statement is actually fairly profound.

It's well known that submitting iPhone and iPad applications for sale on Apple's store is a huge pain--even if they're free and open source. Apple is acting as a gatekeeper for what is and isn't allowed on your device. I heard that Apple would never allow a scripting language to be installed on your iPad because it would allow end users to run code that they hadn't verified. (I don't have a reference for this, but if you do, please post it below.) Emacs is mostly written in Emacs Lisp. Per Apple's policy, I don't think it'll ever be possible to run Emacs on the iPad.

Emacs was written by Richard Stallman, and it practically defines the Free Software movement (in a manner of speaking at least). Stal…

JavaScript: Porting from react-css-modules to babel-plugin-react-css-modules (with Less)

I recently found a bug in react-css-modules that prevented me from upgrading react-mobx which prevented us from upgrading to React 16. Then, I found out that react-css-modules is "no longer actively maintained". Hence, whether I wanted to or not, I was kind of forced into moving from react-css-modules to babel-plugin-react-css-modules. Doing the port is mostly straightforward. Once I switched libraries, the rest of the port was basically:
Get ESLint to pass now that react-css-modules is no longer available.Get babel-plugin-react-css-modules working with Less.Get my Karma tests to at least build.Get the Karma tests to pass.Test things thoroughly.Fight off merge conflicts from the rest of engineering every 10 minutes ;) There were a few things that resulted in difficult code changes. That's what the rest of this blog post is about. I don't think you can fix all of these things ahead of time. Just read through them and keep them in mind as you follow the approach above.…