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.”