A friend contacted me about using the Baseline WordPress theme, but asked why I included both Blueprint and the 960 Grid System. The short answer is that Blueprint has a number of browser resets that I like to take advantage of and 960 GS offers greater flexibility in terms of the width of columns and their gutter widths. Especially if you want to adhere to the Golden Ratio for design. 960 pixels divides very neatly into 3.

Let’s take a look at what Blueprint does to reset some things to establish a cross-browser baseline. First of all, all browsers have their own default style sheet for styling HTML elements. For example, here is Firefox’s style sheet that defines how the browser will render HTML if you don’t define any styles. Unfortunately, all browser’s default style sheets vary. Blueprint resets everything to level the field. Let’s take a look at src/reset.css in your Blueprint directory.

/* --------------------------------------------------------------

   reset.css
   * Resets default browser CSS.

-------------------------------------------------------------- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

body {
  line-height: 1.5;
}

/* Tables still need 'cellspacing="0"' in the markup. */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
table, td, th { vertical-align: middle; }

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

/* Remove annoying border on linked images. */
a img { border: none; }

I don’t want to spend tons of time going over this except to say that the cascading nature of cascading styles means that no matter what your browser’s default style sheet is, all of the tags above have now been reset.

Just as important is Blueprint’s treatment of type. If we look at src/typography.css, we’ll find that all of the font sizes have been reset. This is very important and saves lots of time getting things to look the same across browsers. First it resets font size for the body and sets the default font families to sans-serif:

/* Default font settings.
   The font-size percentage is of 16px. (0.75 * 16px = 12px) */
body {
  font-size: 75%;
  color: #222;
  background: #fff;
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}

Next the headings are all reset. First the font weight (curiously) is set to “normal” and the color set to #111 (black):

h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #111; }

Then the sizes and bottom margins are set:

h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
h2 { font-size: 2em; margin-bottom: 0.75em; }
h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }
h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }
h6 { font-size: 1em; font-weight: bold; }

After that, margins are removed from any images within headings:

h1 img, h2 img, h3 img,
h4 img, h5 img, h6 img {
  margin: 0;
}

After headings, we come to the p tag. Zero margin on top, left and right with a 1.5 em margin at the bottom of each paragraph:

p           { margin: 0 0 1.5em; }

Next, alignment classes for images with 1.5 em margins and 0 padding:

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

Anchors come after that with a default blue color and black hover and focus pseudoclasses:

a:focus,
a:hover     { color: #000; }
a           { color: #009; text-decoration: underline; }

blockquote get’s a margin, gray color and italics:

blockquote  { margin: 1.5em; color: #666; font-style: italic; }

The strong tag is bold–as it should be:

strong      { font-weight: bold; }

The em and dfn tags are italicized and dfn is bold:

em,dfn      { font-style: italic; }
dfn         { font-weight: bold; }

The sup and sub tags get a line height of zero:

sup, sub    { line-height: 0; }

The abbr and acronym tags are gray and get a dotted bottom border (which I find a little curious):

abbr,
acronym     { border-bottom: 1px dotted #666; }

address tags get the same margin as paragraphs but with italics:

address     { margin: 0 0 1.5em; font-style: italic; }

The del tag (which you should be using instead of strike) gets a gray color:

del         { color:#666; }

Preformatted (pre) tags get at 1.5 em top and bottom margin and a zero right and left margin. Also, pre, code & tt are set to monospace fonts at 1 em with a line-height of 1.5 em:

pre 				{ margin: 1.5em 0; white-space: pre; }
pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; }

After that we move on to lists. Nested lists (ol & ul) get a zero top and bottom margin with a 1.5 em right and left margin:

li ul,
li ol       { margin:0 1.5em; }

All lists get a zero top margin, 1.5 em right margin, 1.5 em bottom margin and a 1.5 em left margin:

ul, ol      { margin: 0 1.5em 1.5em 1.5em; }

Unordered lists default to a disc style and ordered lists are set to decimal for their list style:

ul          { list-style-type: disc; }
ol          { list-style-type: decimal; }

Definition list margins are set. dl and dt tags are set to bold:

dl          { margin: 0 0 1.5em 0; }
dl dt       { font-weight: bold; }
dd          { margin-left: 1.5em;}

Tables are up next. Tables themselves get a 1.4 em bottom margin and 100% width. Table headers (th) are bold with #c3d9ff background color. Table headings, table data (td) and caption get some padding. A table row (tr) “even” class is established with a different background color. Table footers (tfoot) are italicized and finally, caption is given a background color of #eee.

table       { margin-bottom: 1.4em; width:100%; }
th          { font-weight: bold; }
thead th 		{ background: #c3d9ff; }
th,td,caption { padding: 4px 10px 4px 5px; }
tr.even td  { background: #e5ecf9; }
tfoot       { font-style: italic; }
caption     { background: #eee; }

Finally we get to “Miscellaneous Classes”. small, large and hide classes are pretty self explanatory:

.small      { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; }
.large      { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; }
.hide       { display: none; }

Some useful classes are established next with loud, highlight, added and removed. The quiet class is simple set to gray.:

.quiet      { color: #666; }

loud is set to black:

.loud       { color: #000; }

highlight has a yellow background:

.highlight  { background:#ff0; }

added has a green background with white text:

.added      { background:#060; color: #fff; }

And removed has a dark red background with white text:

.removed    { background:#900; color: #fff; }

Finally, there are first, last, top and bottom classes. First just makes sure there is no margin or padding on the left:

.first      { margin-left:0; padding-left:0; }

last does the same, but on the right:

.last       { margin-right:0; padding-right:0; }

top does what first and last did, but on the top (of course):

.top        { margin-top:0; padding-top:0; }

And bottom does what first, last and top did, but does it on the bottom:

.bottom     { margin-bottom:0; padding-bottom:0; }

Finally, we’re going to take a look at what Blueprint offers for forms. Let’s take a look at src/forms.css. The first thing we have is some styling for label, fieldset and legend tags.

Labels are bold, fieldset has a 1.4 em padding and a 1.5 em bottom margin with a gray border. legend is also bold with a 1.2 em font-size:

label       { font-weight: bold; }
fieldset    { padding:1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc; }
legend      { font-weight: bold; font-size:1.2em; }

Next text and title classes are established for input tags and they are given the same formatting as textarea and select tags:

input.text, input.title,
textarea, select {
  margin:0.5em 0;
  border:1px solid #bbb;
}

Next pseudoclasses are formatted for focus on form elements to change the border to black.

input.text:focus, input.title:focus,
textarea:focus, select:focus {
  border:1px solid #666;
}

Next up input text classes are set to 300px wide with 5px padding. The input title class is also given a 1.5 em font size. textarea is a little wider and higher with 5px of padding:

input.text,
input.title   { width: 300px; padding:5px; }
input.title   { font-size:1.5em; }
textarea      { width: 390px; height: 250px; padding:5px; }

Last but absolutely not least are some nice form validation classes you can take advantage of. The notice, success and error classes function for just what their names suggest. By now I’m going to assume you can read the styles so I won’t inventory these one by one except to say that they’re nice, intuitive classes for form validation.

.error,
.notice,
.success    { padding: .8em; margin-bottom: 1em; border: 2px solid #ddd; }

.error      { background: #FBE3E4; color: #8a1f11; border-color: #FBC2C4; }
.notice     { background: #FFF6BF; color: #514721; border-color: #FFD324; }
.success    { background: #E6EFC2; color: #264409; border-color: #C6D880; }
.error a    { color: #8a1f11; }
.notice a   { color: #514721; }
.success a  { color: #264409; }

The point of all of this is that none of these are reset by the 960 grid established in the Baseline theme. Blueprint does a really nice job of resetting your styles and also includes a handful of other useful classes. What it doesn’t offer that the 960 Grid System does is flexibility with design width, column width and gutter width. That’s why I decided to rely on the 960 Grid System for establishing the columns and combine it with Blueprint for it’s wonderful job of resetting the styles.

Plus, I’ve been meaning to document all of these styles in Blueprint for a while now. If you don’t use my Baseline theme, this may also provide useful in terms of documenting what Blueprint is doing for you. Take a look at this page to see what some of the classes like error or success look like.Similar Posts:

• Why Use Blueprint and the 960 Grid System in the Baseline Theme?
• Blueprint Optional Fancy-Type Plugin
• Blueprint: Taking a Close Look at grid.css
• Blueprint CSS Tutorial File
• CSS Scaffolding