Extending colborder in Blueprint CSS

Blueprint

For the last few months, when time has allowed, I’ve been working on a new CSS framework combining my favourite elements from Blueprint CSS framework and 960 Grid System but this week I ran into a problem.

I’m developing the adapted framework to use when I redesign my website later this year. When it’s completed I will also make it publicly available on my website to whoever wants to use it and adapt it.

This is what I want

On Friday night, while testing it, I spotted something about the original Blueprint framework that I hadn’t noticed before.

It was to do with the colborder rule. What if I want to do this:

12 columns of text

That is create two blocks of text, the first spanning six columns with two blank columns appended on the end, then a colborder (which as the name suggests is a border that span an entire column) and finally the second block of text which spans three columns.

Just to be clear, in this example I’m using an adapted Blueprint grid. The default grid uses 24 columns, but in this example I’m using 12 columns as fewer and wider columns make it easier to demonstrate what I’m talking about.

The code, I initially thought, would look like this:

span-6 append-2 colborder

Lorem ipsum dolor sit amet, …

span-3 last

Lorem ipsum dolor sit amet, …

My blank columns have disappeared

But testing this out, what this code actually gives you is this:

Six columns, a line, three columns

Hang on! Where are my two appended columns in the first block, the ones that should appear after the span-6 and before the colborder?

append-x and colborder don’t mix

To answer that I had to take a look at the Blueprint source code. As these three classes are to do with the layout grid these CSS rules span-6, append-2 and colborder are all defined in (my adapted) blueprint\src\grid.css:

.span-6 {
  width: 460px;
}
.append-2 {
  padding-right: 160px;
}
.colborder {
  padding-right: 49px;
  margin-right: 50px;
  border-right: 1px solid #eee;
}

So, in order:

  1. span-6 class is setting the width of the content to 460px.
  2. append-2 class is setting a padding-right of 160px.
  3. colborder is then overwriting padding-right with a width of 49px thereby making our appended two columns effectively disappear.

A new rule is required

I really wanted a solution that didn’t require any extra mark-up. Because I realised that this could be achieved with this code:

span-6 append-2

Lorem ipsum dolor sit amet, …

span-3 last

Lorem ipsum dolor sit amet, …

but that has an extra level of div tags.

After a little pondering, and a little scribbling on a scrap of paper, I realised that the solution lay in writing a new CSS rule that would prepend a colborder before the second block rather than append one after the first block.

In keeping with the append/prepend terminology of Blueprint I decided to call the new rule precolborder. The 12-columns version looks like this:

.precolborder {
  padding-left: 49px;
  margin-left: 29px;
  border-left: 1px solid #eee;
}

The 24-columns version (compatible with the default Blueprint CSS framework) looks like this:

/* Border with more whitespace on left hand side
    of a column, spans one column. */
.precolborder {
  padding-left: 24px;
  margin-left: 15px;
  border-left: 1px solid #eee;
}

and so our HTML now looks like this:

span-6 colborder

Lorem ipsum dolor sit amet, …

precolborder span-3 last

Lorem ipsum dolor sit amet, …

which looks like this on the rendered page:

Text spanning six columns, two blank columns, a border and then text spanning three columns

Which, if I’m not mistaken, is just what I wanted.

Feel free to use it if you like.

WordPress upgrade: filling in the missing pieces

Missing piece

Well, where to start?

I’ve been meaning to blog about life for ages but since Reuben and Joshua were born in November 2008 other things took more of a priority.  Things like attending to twin boys, eating, getting enough sleep, and generally trying to muddle through the days.  I’ll likely write more about that in the future.

Simplifying life

Over the last few months I’ve been working at simplifying life as much as possible, and being a good Getting Things Done / Take Back Your Life disciple and disengaging from projects and tasks that I knew I wouldn’t/couldn’t complete or which were no longer priorities.  It’s felt good.

That’s given me more of a focus on the things that I do want to do.  Sorting out my web server was one of those things.

Server upgrade

I suspect that I would have blogged more about it at the time (and I now wish that I had) but I made a promise to myself that I wouldn’t blog again until I’d upgraded my server.  Of course, that took a good few months longer than I had anticipated (doesn’t everything these days?).

In February I moved from Webfusion to Heart Internet, after an abortive attempt to simply upgrade to a better hosting package at Webfusion.  The killer feature that was missing from the Webfusion package was subdomains; I didn’t want to lose my www.garethjmsaunders.co.uk URL that I’d just had printed onto a custom-made laptop skin.

So far my experience of Heart Internet has been excellent.

Upgrade WordPress

The most pressing reason for moving to a better server was to enable me to upgrade WordPress, the software that manages my blog.  My old host had a bunch of really out-of-date features (MySQL 3.2 and PHP4) which just wasn’t enough to run the latest versions of WordPress.  What a relief to be able to upgrade from WordPress version 2.0.11 to the latest version 2.9.

And wow! there have been quite a few changes to WordPress in the interim: the addition of widgets and tags, as well as critical changes to the main API, a much nicer UI, etc.  So many changes in fact that my old theme broke.  So that had to be fixed.

The upgrade was pretty pain-free thanks to WordPress’s infamous 5-minute install and upgrade script.  (I tested it out first, of course, on my localhost machine using XAMPP.)  The only thing that I missed was matching the database character set encoding.  It was set to ISO-8859-1 (Latin-1) rather than UTF-8 (Unicode) so there are still a few odd character combinations on the blog that I need to track down.

Batch categories

WordPress now has tags.  Back it the day it only supported categories so I, like many other WordPress users, created tens of categories to organise what I was writing about.  I had 88 categories.

I found a tremendous plugin called Batch Categories which let me quickly (by which I mean over the course of two days, rather than weeks if I had to edit each post individually) move groups of posts from one category to another, and also add tags to groups of posts.

So I took the easy route of replacing most of the categories I had with tags and rationalising my categories down to nine:

  1. Books
  2. Computer
  3. Family
  4. General
  5. God Project
  6. Mah Jong
  7. Music
  8. Psion
  9. Web

Next …

I’m really keen to redesign my blog theme but I’m going to hang off on that for the time being.  I’ve got a couple of other things that I want to complete first.

CSS framework

The first thing is to complete work on what started as a plugin for the Blueprint CSS framework and which is now turning out to be a combination of different parts of my favourite CSS frameworks.

Website redesign

Once that’s done I’m going to work on a complete reworking of my main website www.garethjmsaunders.co.uk.  The last time I did any serious work on it was, I think, probably around 2003.  The code has a very serious dose of ‘classitis‘.

One of my biggest drivers is the number of emails and telephone calls that I still get for information about and software for the Psion range of PDAs.  I want to create some space for myself by putting a lot more of that information on my site, in a way that it can be found more easily.