
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:

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:

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:
span-6
class is setting the width of the content to 460px.
append-2
class is setting a padding-right
of 160px.
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:

Which, if I’m not mistaken, is just what I wanted.
Feel free to use it if you like.