Fixing Blueprint CSS 0.7.1

Blueprint CSS

Note: Updated Tuesday 24 March 2009 @ 10:00

Blueprint CSS is a CSS framework. The latest version is v.0.8 but a lot of people are still using version 0.7.1, even though there are a number of irregularities in it.

So, this evening I’ve been sifting through the Blueprint CSS version 0.7.1 code and making a few corrections. The bulk of irregularities can be found in the source code (within the /blueprint/src/ folder) and not in the release code (/blueprint/screen.css) but these source files can be very useful so should really be fixed. There is also one error in the ie.css file in both the source and release code.

There may well be other edits, corrections or enhancements that could be made, but these are the obvious ones that I’ve spotted. Note that all line numbers refer to the original, unedited code’s line numbers, i.e. the code in version 0.7.1.

Copy everything

Rather than making changes to the original code, I created a copy of the Blueprint CSS 0.7.1 folder and imaginatively called it Blueprint CSS 0.7.2.

Edit #1: /blueprint/src/grid.css

The problem: a number of classes have been omitted. You simply have to do a compare between the code in grid.css and screen.css to see that .pull-6 to .pull-24 are missing from grid.css.

The solution: Replace the following lines of code:

with this code:

Edit #2: /blueprint/src/grid.css

The problem: a number of classes have been omitted. You simply have to do a compare between the code in grid.css and screen.css to see that .push-6 to .push-24 are missing from grid.css.

The solution: Replace the following lines of code:

with this code:

Edit #3: /blueprint/src/typography.css

The problem: the .left class has been omitted, which can cause unexpected results.

The solution: Replace the following lines of code:

with this code:

Edit #4: /blueprint/screen.css

The problem: As above, the .left class has been omitted, which can cause unexpected results. Do exactly the same in the release code, i.e.

The solution: Replace the following lines of code:

with this code:

Edit #5: /blueprint/src/typography.css

The problem: the h4 tag has an incorrect height declaration, which breaks things if the h4 line wraps a line. (Thanks to Steve Yorkstone for spotting this one.)

The solution: Replace the following lines of code:

with this code:

Edit #6: /blueprint/screen.css

The problem: As above, the h4 tag has an incorrect height declaration, which breaks things if the h4 line wraps a line.

The solution: Replace the following lines of code:

with this code:

Edit #7: /blueprint/src/ie.css

The problem: Legacy code from version 0.6 has been left in. It needs to be replaced with the current way of defining the grid, namely a div.span-x for each column.

The solution: Replace the following lines of code:

with this code:

Edit #8: /blueprint/ie.css

The problem: As above, legacy code from version 0.6 has been left in. It needs to be replaced with the current way of defining the grid, namely a div.span-x for each column. Do exactly the same with the release code, i.e.:

The solution: Replace the following lines of code:

with this code:

Changelog

The last thing I do is update the changelog file to record the edits made, and change the version number in screen.css to 0.7.2 so that I know that this is my updated version.

I hope that helps someone.

Updates to version 0.8

I’ll blog later about things I’ve spotted need fixing in version 0.8.

Published by

Gareth Saunders

I’m Gareth J M Saunders, 46 years old, 6′ 4″, father of 3 boys (including twins). Latterly, web architect and agile project manager at the University of St Andrews and warden at Agnes Blackadder Hall. Currently on sabbatical. I am a priest in the Scottish Episcopal Church, and I sing with the NYCGB alumni choir.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.