Tags: framework



Building Reprieve

The front page of today’s Guardian ran with a story on Binyam Mohamed and his fight to stop evidence of his torture from being destroyed:

The photograph will be destroyed within 30 days of his case being dismissed by the American courts — a decision on which is due to be taken by a judge imminently, Clive Stafford Smith, Mohamed’s British lawyer and director of Reprieve, the legal charity, said today.

Reprieve recently relaunched their website and they chose Clearleft to help them. I was responsible for the front-end build; that’s my usual role. But unusually, I also had to build a CMS.

We don’t normally do back-end work at Clearleft. That’s a conscious decision; we don’t want to tie ourselves to any particular server-side language. Usually we partner up with server-side developers; either those of the client or independent agencies like New Bamboo. In the case of Reprieve, the budget didn’t allow for that option. We were faced with three possibilities:

  1. Write a CMS from scratch, probably using PHP and MySQL—the technologies I’m most comfortable with.
  2. Take an off-the-shelf platform like WordPress or Expression Engine and twist it to make it fit the needs of the client.
  3. Create a CMS using Django which would give us an admin interface for free.

There was a three person team responsible for the project: myself, Cennydd and Paul. We did a little card-sorting exercise, weighing up the pros and cons of each option. Django came out on top.

I had conflicting emotions about this. On the one hand, I was pleased to have the chance to learn a new technology. On the other hand, I was absolutely terrified that I would be completely out of my depth.

I had seen Simon giving a talk on Django just a few weeks previously. I stuck my hand up during the Q and A to ask Is it possible to learn Django without first learning Python? Simon said that a year ago, he would have said No. But given the work of fellow designers like Jeff and Bryan, the answer isn’t so clear cut. Maybe Django could be a really good introduction to Python.

By far the hardest part of building a Django website was the initial set-up. Sure, installing Django was pretty straightforward …once you’ve made sure you’ve installed the right image libraries, the right database bindings, blah, blah, blah. I can deal with programming challenges but I have no desire to become a sysadmin. Setting up my local dev environment on my Mac was a hair-tearing experience. Setting up the live environment, even on a Django-friendly host like WebFaction, was almost as frustrating …no thanks to the worst. screencast. EVER.

But I persevered, I obediently followed the tutorial, and I discovered all the things that make Django such a powerful framework; the excellent separation of concerns, the superb templating system, the lack of so-called front-end “helpers” that cripple other server-side frameworks. I think Gareth was really onto something when he noticed the way that the web standards world appears to be choosing Django.

In the end, Django proved to be absolutely the right choice for Reprieve. It provided enough flexibility for me to build a site tailored to the specific needs of the client while at the same time, giving me plenty of pre-built tools like RSS and, crucially, the admin interface. The client is extremely happy with the power that the admin interface offers.

For my part, it was an honour to work on a project with this mission statement:

We investigate, we litigate and we educate, working on the frontline, providing legal support to prisoners unable to pay for it themselves. We promote the rule of law around the world, and secure each person’s right to a fair trial. And in doing so, we save lives.

The Lessons of CSS Frameworks

Eric Meyer is going to talk about CSS frameworks here at An Event Apart San Francisco.

He did a Google search for “CSS Frameworks” and put together a list of the big players. It’s a list of nine frameworks. Eric wants to know two things: what are they doing the same and what are they doing differently.

Let’s get one question out of the way, the question which one is right for you? Answer… none of the above. It’s like templates. There’s nothing wrong with templates but you don’t put together your client’s site based on a template, right? They can be a good starting point for ideas but you do your own designs. If you’re going to use a framework, it should be yours; one that you’ve created. You can look at existing frameworks for ideas and hack at it. But the professionals in this room are not well served by picking up a framework and using it as-is.

Eric put together a grid of features and which frameworks support those features. Every framework does reset, colours, and fonts. The fact that every framework has a reset is evidence of the frustration we all feel with the inconsistencies between browsers. The rules for colour tend to be much more minimal. Font styling, on the other hand, is more fully-featured generally. Whereas the colour might just be set for the body element, font sizes and faces are specified throughout. Usually that font face is Helvetica. Most frameworks steer away from trying to style form elements. Almost all of them do layout, usually combinations of columns. Four of the nine frameworks included print styles. Three of the nine included hacks.

Font sizes

Four of the nine frameworks are setting font sizes on the body with pixels. Tripoli uses Richard’s 62.5% rule. Eric points out how using a 76% rule on the body can lead to inconsistent font-sizing between browsers because of the inconsistencies of rounding off font sizes. Only two of the frameworks aren’t using unitless line-heights. Generally you want a line height of 1 to get propagated down the document tree rather than simply the computed value of 1em in pixels. You don’t want a 40 pixel element having a line height of 12 pixels.

Heading sizes

Most of these frameworks, with the exception of YUI, are setting heading sizes in some form or another. The only place where you’ll see a heading size go below 1em is in a browser style sheet. In the frameworks, no heading size, even h6, goes below the size of body text, 1em. Blueprint and Elements set pretty large sizes on h1 and h2. The other frameworks cluster around the same size range, never getting very big or very small. Eric averaged out all the measurements to get the average size for h1 and h2.

Naming conventions

Where frameworks are using IDs or classes, what names are they using? Four of them use psuedo-namespaced class names beginning with grid- or container- or span- (which you would apply to a div!?). You’re supposed put classes in your markup like grid-3 or span-5 or whatever. This seems pretty complicated. Three frameworks use more intuitive names like page, header or main. In fact header, main and footer are universal IDs across the three frameworks.

Style inclusion patterns

Some of the frameworks have a single short style sheet that you point to from your markup, which then links off to separate style sheets for fonts, colours, layout, etc. But most of them use separate style sheets and you must link to each one in your markup. Eric reckons that this is because IE for Windows will cache the first style sheet you point to with a link element but not any subsequent style sheets with @import.

What the hack?

There are two kinds of hacks:

  1. Hacks that point to failings in CSS like self-clearing floated elements and things like pseudo-padding.
  2. Hacks for Internet Explorer 6.

Some cool bits

Some of the frameworks provide compressed versions for production use to keep file size down.

Three of the frameworks had debugging styles that you could “turn on” to say, display the grid in the document.

YAML provides a draft file which is like a template style sheet. The selectors are written out but the declarations are left empty. This could be a handy training tool (fill in the curly braces).

960 provides “sketch” files: PDFs of the grid for you to print out and scribble on.

Thus endeth Eric’s roundup of CSS frameworks.


There’s been a lot of buzz lately around a new CSS framework called Blueprint. It’s basically a collection of resources pulled together from other sources: Khoi’s grids, Richard’s vertical rhythm, Eric’s reset and more.

Some people—including contributors to the CSS—have expressed their reservations about the non-semantic class names used in the framework. That’s a valid concern but, as Simon pointed out in the comments to Mark’s post, you don’t have to restrict yourself to those class names: you can always add your own semantics to the markup.

I don’t see myself using Blueprint. It just seems too restrictive for use in a real-world project. Maybe if I’m building a grid-based layout that’s precisely 960 pixels wide it could save me some time, but I’m mostly reminded of the quote apocryphally attributed to Henry Ford about the Model T:

The customer can have any color he wants so long as it’s black.

Unless I’m creating cookie-cutter sites, I don’t think a CSS framework can help me. That said, I think a framework like Blueprint has its place.

At Clearleft, a lot of our work involves wireframing. Every Information Architect has their own preference for tools and formats for creating wireframes and prototypes: some use Visio, others Omnigraffle. James and Richard usually start with paper and then move on to HTML, CSS and even a dab of JavaScript.

This results in quick wireframes that illustrate hierarchy, are addressable and allow for a good level of interaction. Creating HTML wireframes requires a different mindset to creating documents intended for the Web. You don’t have to worry about cross-browser CSS, bulletproof markup or unobtrusive JavaScript. With those concerns out of the equation, the benefits of using cookie-cutter code really come to the fore.

So while I might have reservations about using a JavaScript library on a production site, I’d have no such qualms when it comes to generating a quick prototype. The same goes for Blueprint. I think it could be ideally suited to HTML wireframes.

I may be a bit of a control freak, but I’d no sooner use a CSS framework for a live site than I’d use clip art for images. I firmly believe that creating good markup is a craft that, like good design, takes time. It may seem unrealistic to some, but I don’t want to compromise that quality without a very good reason.

That’s my hard-nosed attitude when it comes to creating documents for the World Wide Web. If the documents are intended purely as wireframes for internal use, then my attitude softens considerably. Then I think a framework like Blueprint could really shine.