Differences between Blueprint CSS 0.9.1 and 1.0

Blueprint CSS

I know I’m a bit behind the times posting this given that the Blueprint CSS framework was updated to version 1.0 (from 0.9.1) on Wednesday 29 September 2010 but I’m in the process of updating my cheatsheet and I thought that someone might find the following interesting/useful.

Changelog

The official changelog file included in Blueprint CSS version 1.0 gives the following brief overview of changes:

  • Added detailed explanations to core uncompressed CSS files [CMM]
  • Added .info and .alert classes to forms.css [CMM]
  • Fixed numerous bugs in forms, including the fieldset padding bug in IE6-8 [CMM]
  • Fixed specificity problems in typography.css and grid.css [CMM]
  • See Lighthouse for more bug fixes

Comparing the files for version 0.9.1 with version 1.0, however, I’ve noted the following changes in detail.


reset.css

1. NEW body background

A new declaration has been added to the body rule “background: white;”.

2. NEW caption, th, td float rule

New declaration has been added to the ‘caption,th, td’ rule to prevent these elements from floating.

3. NEW :focus pseudo-class

New pseudo class to remove outlines from on-focus links.

4. CHANGE html element

The ‘html’ element has now been separated from the main reset group. ‘html’ now no longer inherits the font and vertical-align rules along with ‘div, span, object, etc.’

5. ENHANCEMENT code style

Code style on table rules has been made consistent with declarations above it, on separate lines rather than inline.

6. ENHANCEMENT comments

Three rules now have new comments.

  1. The ‘article, aside, dialog, etc.’ rule is now prefixed with a comment to explain that “this helps to make newer HTML5 elements behave like DIVs in older browers”
  2. The ‘body’ rule is now prefixed with a comment to explain that “line-height should always be unitless.”
  3. The ‘caption, th, td’ rule is now prefixed with a comment to explain that “float:none prevents the span-x classes from breaking table-cell display”.

typography.css

7. NEW classes

New .left and .right classes which can be used on any element. These replace the p img.left and p img.right groupings.

8. NEW table-striping

New rules to enable table-striping, in both new and old browsers.

9. CHANGE colours

  1. Colour for ‘a:focus’ and ‘a:hover’ pseudo-selectors have changed from #000 (black) to #09f (bright blue).
  2. Colour for ‘a’ element has changed from #009 (dark blue) to #06c (bright blue).

10. ENHANCEMENT dfn

The ‘dfn’ rule has been merged with the ‘strong’ rule as they both had only one declaration: ‘font-weight: bold’.

11. CHANGE lists

The ‘padding-left’ declaration on ‘ul’ and ‘ol’ elements is now 1.5em rather than 3.333em.

12. ENHANCEMENT comments

  1. New comment to prefix the .left/.right rules to explain that “these can be used to pull an image at the start of a paragraph, so that the text flows around it (usage: <p><img class=”left”>Text</p>)”
  2. New comment to prefix the tables rules to explain that “because of the need for padding on TH and TD, the vertical rhythm on table cells has to be 27px, instead of the standard 18px or 36px of other elements.”
  3. New comment to prefix the new rules for table-striping: “You can zebra-stripe your tables in outdated browsers by adding the class “even” to every other table row.”

forms.css

13. NEW IE8 hack for fieldset and legend

IE8 has a bug whereby it doesn’t apply padding correctly on fieldsets. This hack fixes it.

14. NEW .alert and .info classes

There are now two new coloured box classes to join ‘success’, ‘error’ and ‘notice’ called ‘alert’ and ‘info’. ‘alert’ shares the same colours as ‘error’ (red) and so can be used where ‘error’ is semantically the wrong term to use. ‘info’ is blue.

15. ENHANCEMENT select rule

The ‘select’ rule has now been separated from the ‘input’ rules, presumably for semantic reasons and to make way for the new HTML5 input attributes.

16. CHANGE input rules

The input rules have been changed.  Gone are the input.checkbox and input.radio classes. There are now two HTML5 attributes: input[type=text], input[type=password].

17. ENHANCEMENT comments

  1. New comment to prefix the label, fieldset and legend rules to introduce a new IE8 hack: “A special hack is included for IE8 since it does not apply padding correctly on fieldsets”
  2. New comment to prefix input elements with new HTML5 attributes: “Attribute selectors are used to differentiate the different types of input elements, but to support old browsers, you will have to add classes for each one. “.title” simply creates a large text field, this is purely for looks.”
  3. New comment to prefix ‘form.inline’ rules: “This is to be used on forms where a variety of elements are placed side-by-side. Use the p tag to denote a line.”

grid.css

18. ENHANCEMENT !important declarations

‘!important’ declarations have been placed after every ‘input-span-x’ rule (where x = 1-24).

19. CHANGE change of border color

The border colour on both ‘.border’ and ‘.colborder’ classes has changed from #eee (light grey) to #ddd (mid-grey).

20. FIX .push class float

The float declaration on all the .push-x (where x = 1-24) rules has been changed from ‘float: right;’ to ‘float: left;’

21. ENHANCEMENT .prepend-top and .append-bottom

‘div.prepend-top’ and ‘div.append-bottom’ selectors have been added to the ‘.prepend-top’ and ‘.append-bottom’ selectors, presumably to make these rules more specific.

22. CHANGE height of hr element

The height of the horizontal rule (‘hr’) element has been changed from .1em to 1px.


ie.css

23. FIX legend

There is a new ‘legend’ selector that fixes issues with margins on legends within fieldsets in IE.

24. FIX label

There is a new ‘label’ selector which corrects how labels behave in IE6 and IE7.

25. DELETED form.inline label

The rule for ‘form.inline label’ has now been deleted in light of the new ‘label’ fix (above).


print.css

26. ENHANCEMENT comment

There is now a comment to prefix the ‘:link:after, a:visited:after’ selectors which explains “This has been the source of many questions in the past. This snippet of CSS appends the URL of each link within the text. The idea is that users printing your webpage will want to know the URLs they go to. If you want to remove this functionality, comment out this snippet and make sure to re-compress your files.”

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:

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:

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:

.span-6 {
  width: 460px;
}
.append-2 {
  padding-right: 160px;
}
.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:

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:

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.

WordPress upgrade: filling in the missing pieces

Missing piece

Well, where to start?

I’ve been meaning to blog about life for ages but since Reuben and Joshua were born in November 2008 other things took more of a priority.  Things like attending to twin boys, eating, getting enough sleep, and generally trying to muddle through the days.  I’ll likely write more about that in the future.

Simplifying life

Over the last few months I’ve been working at simplifying life as much as possible, and being a good Getting Things Done / Take Back Your Life disciple and disengaging from projects and tasks that I knew I wouldn’t/couldn’t complete or which were no longer priorities.  It’s felt good.

That’s given me more of a focus on the things that I do want to do.  Sorting out my web server was one of those things.

Server upgrade

I suspect that I would have blogged more about it at the time (and I now wish that I had) but I made a promise to myself that I wouldn’t blog again until I’d upgraded my server.  Of course, that took a good few months longer than I had anticipated (doesn’t everything these days?).

In February I moved from Webfusion to Heart Internet, after an abortive attempt to simply upgrade to a better hosting package at Webfusion.  The killer feature that was missing from the Webfusion package was subdomains; I didn’t want to lose my www.garethjmsaunders.co.uk URL that I’d just had printed onto a custom-made laptop skin.

So far my experience of Heart Internet has been excellent.

Upgrade WordPress

The most pressing reason for moving to a better server was to enable me to upgrade WordPress, the software that manages my blog.  My old host had a bunch of really out-of-date features (MySQL 3.2 and PHP4) which just wasn’t enough to run the latest versions of WordPress.  What a relief to be able to upgrade from WordPress version 2.0.11 to the latest version 2.9.

And wow! there have been quite a few changes to WordPress in the interim: the addition of widgets and tags, as well as critical changes to the main API, a much nicer UI, etc.  So many changes in fact that my old theme broke.  So that had to be fixed.

The upgrade was pretty pain-free thanks to WordPress’s infamous 5-minute install and upgrade script.  (I tested it out first, of course, on my localhost machine using XAMPP.)  The only thing that I missed was matching the database character set encoding.  It was set to ISO-8859-1 (Latin-1) rather than UTF-8 (Unicode) so there are still a few odd character combinations on the blog that I need to track down.

Batch categories

WordPress now has tags.  Back it the day it only supported categories so I, like many other WordPress users, created tens of categories to organise what I was writing about.  I had 88 categories.

I found a tremendous plugin called Batch Categories which let me quickly (by which I mean over the course of two days, rather than weeks if I had to edit each post individually) move groups of posts from one category to another, and also add tags to groups of posts.

So I took the easy route of replacing most of the categories I had with tags and rationalising my categories down to nine:

  1. Books
  2. Computer
  3. Family
  4. General
  5. God Project
  6. Mah Jong
  7. Music
  8. Psion
  9. Web

Next …

I’m really keen to redesign my blog theme but I’m going to hang off on that for the time being.  I’ve got a couple of other things that I want to complete first.

CSS framework

The first thing is to complete work on what started as a plugin for the Blueprint CSS framework and which is now turning out to be a combination of different parts of my favourite CSS frameworks.

Website redesign

Once that’s done I’m going to work on a complete reworking of my main website www.garethjmsaunders.co.uk.  The last time I did any serious work on it was, I think, probably around 2003.  The code has a very serious dose of ‘classitis‘.

One of my biggest drivers is the number of emails and telephone calls that I still get for information about and software for the Psion range of PDAs.  I want to create some space for myself by putting a lot more of that information on my site, in a way that it can be found more easily.

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:

.pull-1 { margin-left: -40px; }
.pull-2 { margin-left: -80px; }
.pull-3 { margin-left: -120px; }
.pull-4 { margin-left: -160px; }
.pull-5 { margin-left: -200px; }

.pull-1, .pull-2, .pull-3,
.pull-4, .pull-5, .pull-5 {
  float:left;
  position:relative;
}

with this code:

.pull-1 {margin-left:-40px;}
.pull-2 {margin-left:-80px;}
.pull-3 {margin-left:-120px;}
.pull-4 {margin-left:-160px;}
.pull-5 {margin-left:-200px;}
.pull-6 {margin-left:-240px;}
.pull-7 {margin-left:-280px;}
.pull-8 {margin-left:-320px;}
.pull-9 {margin-left:-360px;}
.pull-10 {margin-left:-400px;}
.pull-11 {margin-left:-440px;}
.pull-12 {margin-left:-480px;}
.pull-13 {margin-left:-520px;}
.pull-14 {margin-left:-560px;}
.pull-15 {margin-left:-600px;}
.pull-16 {margin-left:-640px;}
.pull-17 {margin-left:-680px;}
.pull-18 {margin-left:-720px;}
.pull-19 {margin-left:-760px;}
.pull-20 {margin-left:-800px;}
.pull-21 {margin-left:-840px;}
.pull-22 {margin-left:-880px;}
.pull-23 {margin-left:-920px;}
.pull-24 {margin-left:-960px;}

.pull-1, .pull-2, .pull-3,
.pull-4, .pull-5, .pull-6,
.pull-7, .pull-8, .pull-9,
.pull-10, .pull-11, .pull-12,
.pull-13, .pull-14, .pull-15,
.pull-16, .pull-17, .pull-18,
.pull-19, .pull-20, .pull-21,
.pull-22, .pull-23, .pull-24 {
  float:left;
  position:relative;
 }

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:

.push-1 { margin: 0 -40px 1.5em 40px; }
.push-2 { margin: 0 -80px 1.5em 80px; }
.push-3 { margin: 0 -120px 1.5em 120px; }
.push-4 { margin: 0 -160px 1.5em 160px; }
.push-5 { margin: 0 -200px 1.5em 200px; }

.push-0, .push-1, .push-2,
.push-3, .push-4, .push-5 {
  float: right;
    position:relative;
}

with this code:

.push-1 { margin: 0 -40px 1.5em 40px; }
.push-2 { margin: 0 -80px 1.5em 80px; }
.push-3 { margin: 0 -120px 1.5em 120px; }
.push-4 { margin: 0 -160px 1.5em 160px; }
.push-5 { margin: 0 -200px 1.5em 200px; }
.push-6 {margin:0 -240px 1.5em 240px;}
.push-7 {margin:0 -280px 1.5em 280px;}
.push-8 {margin:0 -320px 1.5em 320px;}
.push-9 {margin:0 -360px 1.5em 360px;}
.push-10 {margin:0 -400px 1.5em 400px;}
.push-11 {margin:0 -440px 1.5em 440px;}
.push-12 {margin:0 -480px 1.5em 480px;}
.push-13 {margin:0 -520px 1.5em 520px;}
.push-14 {margin:0 -560px 1.5em 560px;}
.push-15 {margin:0 -600px 1.5em 600px;}
.push-16 {margin:0 -640px 1.5em 640px;}
.push-17 {margin:0 -680px 1.5em 680px;}
.push-18 {margin:0 -720px 1.5em 720px;}
.push-19 {margin:0 -760px 1.5em 760px;}
.push-20 {margin:0 -800px 1.5em 800px;}
.push-21 {margin:0 -840px 1.5em 840px;}
.push-22 {margin:0 -880px 1.5em 880px;}
.push-23 {margin:0 -920px 1.5em 920px;}
.push-24 {margin:0 -960px 1.5em 960px;}

.push-1, .push-2, .push-3,
.push-4, .push-5, .push-6,
.push-7, .push-8, .push-9,
.push-10, .push-11, .push-12,
.push-13, .push-14, .push-15,
.push-16, .push-17, .push-18,
.push-19, .push-20, .push-21,
.push-22, .push-23, .push-24 {
  float:right;
  position:relative;
}

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:

p img { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }

with this code:

p img.left { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }

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:

p img { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }

with this code:

p img.left { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }

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:

h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; height: 1.25em; }

with this code:

h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em;}

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:

h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;height:1.25em;}

with this code:

h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;}

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:

* html .column { overflow-x: hidden; }

with this code:

* html div.span-1, * html div.span-2,
* html div.span-3, * html div.span-4,
* html div.span-5, * html div.span-6,
* html div.span-7, * html div.span-8,
* html div.span-9, * html div.span-10,
* html div.span-11, * html div.span-12,
* html div.span-13, * html div.span-14,
* html div.span-15, * html div.span-16,
* html div.span-17, * html div.span-18,
* html div.span-19, * html div.span-20,
* html div.span-21, * html div.span-22,
* html div.span-23, * html div.span-24 {
  overflow-x:hidden;
}

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:

* html .column { overflow-x: hidden; }

with this code:

* html div.span-1, * html div.span-2,
* html div.span-3, * html div.span-4,
* html div.span-5, * html div.span-6,
* html div.span-7, * html div.span-8,
* html div.span-9, * html div.span-10,
* html div.span-11, * html div.span-12,
* html div.span-13, * html div.span-14,
* html div.span-15, * html div.span-16,
* html div.span-17, * html div.span-18,
* html div.span-19, * html div.span-20,
* html div.span-21, * html div.span-22,
* html div.span-23, * html div.span-24 {
  overflow-x:hidden;
}

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.

Blueprint CSS framework v.0.8 cheatsheet

Blueprint CSS cheatsheet

I’ve updated my cheatsheet for the Blueprint CSS framework (version 0.7.1) as well as create a new one for the latest version of the Blueprint CSS framework (version 0.8). They can both be downloaded from Scribd.com: