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 apadding-right
of 160px.colborder
is then overwritingpadding-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.
so I’ve downloaded your blueprint css pdf version 091 (this is a very very useful guide, Thanks for publishing)
Questions:
can I still use the zip files from http://www.blueprintcss.org and use your pdf as a guide?
or your pdf version is for different types of blueprint css that you’ve edit?
Thanks 😉
My cheatsheet is for use with the default Blueprint CSS files that you download from blueprintcss.org.
I do this constantly in projects. I wish it would get added to the default Blueprint rules. Anyway, glad to see someone else doing this. I was going to blog about it, but your write-up is very well done, so I am just going to link to yours!
Thanks Jason. I’ll get it coded up as a Blueprint plugin and see if Christian will be happy to add it to the site/build. I’m working on a couple of Blueprint plugins just now.
nice trick… it is really helpful… thanks 🙂