administration mode
Pssst...Ferdy is the creator of JungleDragon, an awesome wildlife community. Visit JungleDragon


Poor man CSS grids »

FERDY CHRISTANT - MAR 4, 2010 (07:08:17 PM)

For JungleDragon,I'm building some fairly rich and diverse screens, for which I organize the CSS rules as follow:

  • Layout (header, columns, footer)
  • General (things like links, h1-h6, fonts, etc)
  • Content classes

Let's talk about content classes. Content classes are named classes that are specific for one purpose, for example:

  • .reputation
  • .imagelist
  • .usercard

For long, I have included positioning rules to these content classes. Things like bottom margins. The problem here is the actual positioning of such an element really depends on the context where it is placed in. If I have a userblock followed by another user block, I want a small bottom margin. If the user block is followed by a paragraph of text, I want a larger bottom margin. I want to position a class instance, not the class itself. Therefore, including positioning rules to reusable content classes is a bad idea.  

So I stripped rules like that from the content classes. But how do you position and space them whilst still being reusable? Let's have a look at a few methods:

Using paragraphs

If the vertical spacing between elements on your site is always the same, let's say 10 pixels, you could do something as simple as this:

p { margin-bottom:10px; }

Next, you wrap p tags around your content blocks. There are several problems with this approach:

  • Quite likely, you need different margins based on different pages and contexts
  • You cannot really nest paragraphs to provide more spacing
  • Paragraphs are funky, you can't wrap them around things like tables correctly
  • Paragraph margins collapse in some browsers when the element below it has a top margin

Paragraph based spacing does not give us enough control and robustness.

Using a grid system

The most sophisticated way to control the positioning of elements is to use a grid system like 960. Systems like this divide the page into a number of rows and columns, each with a numeric indicator. This allows for fine-grained, pixel perfect positioning and balance. Next, all you need to do is place your content blocks in the right "cell".

Still, I'm not a fan of such grid systems. For one, have a look at the source of this site, which is built on the 960 grid system.Throughout the markup, there are a lot of divs and classes only for the sake of positioning. Not only is this verbose, it is also not pure. CSS classes are not supposed to be named after styles, they should be semantic. You do not call a class "red". You call it "error" and then make it red in CSS. Grid systems give the ultimate control, yet it comes with a price.

The poor man's grid system

Given the limitations of paragraph spacing and the overkill of a full grid system, I have opted for a very light grid system. All I'm really interested in is the vertical spacing of blocks, so it really is a row system. Here's how it works:

First, I decided upon the smallest vertical unit of spacing. Let's say 5 pixels. Next, I define a few numbered block classes that use that unit, like so:

  • .b1 { margin-bottom: 5px; }
  • .b2 { margin-bottom: 10px; }
  • .b3 { margin-bottom: 15px; }
  • .b4 { margin-bottom: 20px; }

Now, with all margin rules stripped from the content classes, I can position it like so:

<div class="usercard b2">...</div>

And like this on another page where I want different spacing:

<div class="usercard b1">...</div>

Simple as it is, the usercard content class is now much more reusable, because it does not contain any positioning rules. The position happens as an extra "attribute" depending on the context. We position the instance, not the class. Now, because you will not want to apply a positioning class to every element, you can make some handy shortcuts for generic elements:

p { margin-bottom:10px; }

form p { margin-bottom:5px; }

This leaves for you to only position the actual content classes. I've found this way of vertical positioning to be very simple and flexible. Like the grid system, it is not semantically pure, but I'm finding it to be much less intrusive and much more maintainable.

What do you think?

Share |
Was this document useful to you?
rating Awesome
rating Good
rating Average
rating Poor
rating Useless
required field
required field HTML is not allowed. Hyperlinks will automatically be converted.