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:

45
46
47
48
49
50
51
52
53
<div id="column1" class="span-6 append-2 colborder">
  <h2>span-6 append-2 colborder</h2>
  <p>Lorem ipsum dolor sit amet, ... </p>
</div>
 
<div id="column2" class="span-3 last">
  <h3>span-3 last</h3>
  <p>Lorem ipsum dolor sit amet, ... </p>
</div>

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:

58
59
60
.span-6 {
  width: 460px;
}
106
107
108
.append-2 {
  padding-right: 160px;
}
138
139
140
141
142
.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:

45
46
47
48
49
50
51
52
53
54
55
<div id="column1wrapper" class="span-8 colborder">
  <div id="column1" class="span-6 append-2">
    <h2>span-6 append-2</h2>
    <p>Lorem ipsum dolor sit amet, ... </p>
  </div>
</div>
 
<div id="column2" class="span-3 last">
  <h3>span-3 last</h3>
  <p>Lorem ipsum dolor sit amet, ... </p>
</div>

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:

145
146
147
148
149
.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:

165
166
167
168
169
170
171
/* 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:

45
46
47
48
49
50
51
52
53
<div id="column1" class="span-6 append-2">
  <h2>span-6 colborder</h2>
  <p>Lorem ipsum dolor sit amet, ... </p>
</div>
 
<div id="column2" class="precolborder span-3 last">
  <h3>precolborder span-3 last</h3>
  <p>Lorem ipsum dolor sit amet, ... </p>
</div>

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.