Question

I’ve been working with the BluePrint.css framework on a project. It works well.

However, like most of the CSS frameworks I’ve looked at, it appears geared more to a text-heavy newspaper-esque layout. It gets a bit more difficult to use when using it for building web applications that utilize a ‘widget’ metaphor such as SharePoint or iGoogle or the like. The key issue being that in a web app, it’s often standard to create visual containers of information. This introduces a box which needs padding which ends up breaking the grid.

Another way to explain is if your container box spans 8 grid columns, you won’t be able to fit 8 grid columns within it, as the container box has padding.

I’ve found workarounds for this but they all entail adding another layer of CSS that gets a little cumbersome. Before I continue on to the next project, I thought I’d see if anyone else has run into this issue and a) found a grid system that does accomodate this visual requirement or b) found some clever ways to accomodate this in one of the existing CSS frameworks.

Answer 1

@roberkules asked if I ever came up with a solution and we did. Sort of. At least, it served its purpose at the time. I’ve been meaning to make a blog post of it for a long while but never got around to it, so I’ll try and summarize the answer here.

In general, we did two things. 1, we added the ability to create a ‘box’ by giving a `.span-x’ a border without it breaking the grid. 2, we divided the standard 24-column structure into finer detailed by adding the concepts of ‘half’ and ‘quarter’ measurements to the grid system.

To create the bordered container boxes, we added a class called span-border (we kept with the Blueprint span-x syntax as much as we could with our own additions):

NOTE: all examples are based on our grid of 25px wide columns with 15px wide gutters (each span-x being 40px).

div.span-border {
margin-left: -1px;
margin-right: 14px;
border-width: 1px;
border-style: solid;
}

So whenever we wanted to create a container ‘box’ with a border, we could add that class. Example:

<div class="span-8 span-border">our box</div>

That gives us a bordered box spanning 8 columns. The goal was to now allow devs to create elements within there that still use the blueprint grid CSS so that we’re not creating new CSS for every little box on the page.

Let’s say we want two columns inside of that box. One narrower than the other. We could put in a span-3 and a span-5, and they’d fit, but they’d bump right up to the edge of the box and that’d be ugly.

So what we did is added some -half and -quarter styles to stretch things using fractions of the grid.

Example css:

.pad-1 {
padding: 20px;
}

this adds 20px of padding to the div all around, which, horizontally = ‘1’ grid unit of 40px. So let’s re-write our box HTML as such:

<div class="span-7 pad-1 span-border">our box</div>

Our box still takes up 8 blueprint grid units as 7 + 1 = 8. The difference is instead of 8 units of space for content, we now have 7 as one full unit ie being used for padding.

We can now add our columns within:

<div class="span-7 pad-1 span-border">
    <div class="span-3">left column</div>
    <div class="span-4 last">right column</div>
</div>

Voila! We’ve now enabled Blueprint to handle the concept of nested elements.

With this system, you can nest infinitely, if so desired.

Over time, we just tweaked things a bit to accomodate new situations. For example, we ended up needing to sometimes split an element with an odd number of grid columns into two equal columns. For that we added the concept of stretch-x:

.span-1.stretch-half {width:45px;}

.span-1 is normally 25px wide (40px – 15px right margin). We’ve now stretched it by 1/2 of a full grid unit (20px).

We’d do this for all of the existing span-x settings:

.span-2.stretch-half {width:85px;}
.span-3.stretch-half {width:125px;}
.span-4.stretch-half {width:165px;}
...
.span-23.stretch-half {width:925px;}

Now going back to our initial example, we can create two equal nested columns as such:

<div class="span-7 pad-1 span-border">
    <div class="span-3 stretch-half">left column</div>
    <div class="span-3 stretch-half last">right column</div>
</div>

3 + 3 + half + half = 7.

So, that’s what we came up with. It worked well for us over time. It’s a bit of a pain to initially figure out and tweak to your needs, but once built, it makes rapid prototyping REALLY easy and prevents a lot of CSS bloat down the road if you can get everyone on board with the grid concept.

I should add that I’d definitely recommend this approach if the site is being built and maintained by a large group of people. If the site is being built by one person, and there’s no necessarily a huge amount of updates needed to the source HTML over time, then this might be a bit overkill and it might be easier to just write your own custom CSS as needed for that particular site.

Oh! One more thing: DISCLAIMER: None of the above will work with IE6 as IE6 can’t handle CSS that refers to two classes at once. At the time, we had to support IE6. What we did was created a jQuery script only for IE6 that would look for, example, a div with class="span-8 stretch-half" and dynamically replace it with an ugly class just for IE6 of span-8-stretch-half.

IE6 then got an different style sheet that was slightly more bloated with individual classes like that. It was ugly, but worked and we really were supporting IE6 only in protest 😉