The technique involves creating two sets of background images. One standard-sized version and a double-sized version (@2x) for high pixel-density screens like the Retina display or Droid phone display. For the purposes of this example, let’s say I have a default icon that’s 50px X 50px.

#link-id a { background-image:url(images/icon.png); }

The Motorola Droid has a pixel-density of 1.5 so I set that as my baseline.

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (-o-min-device-pixel-ratio: 3/2),
	only screen and (min--moz-device-pixel-ratio: 1.5),
	only screen and (min-device-pixel-ratio: 1.5) {
		#link-id a {
			background-image:url(images/icon@2x.png);
		}
}

Notice the subtle difference in how the ratio is calculated for Opera. Also, Mozilla’s vendor prefix has a slightly different syntax. I’m following Erik Runyon’s advise here and using Apple’s style guidelines by naming the hi-res icon with the same name as my normal-resolution icon, but with @2x appended. In this case, the “@2x” version is 100px X 100px. The next thing you’ll have to do is scale the hi-res icon down.

background-size: 50px 50px;

That’s it. Now high pixel-density devices will render a suitably high-resolution image and normal-resolution devices will get a smaller image.Similar Posts:

• Media Queries for High Pixel-density Devices
• Responsive Images: Keep It Simple; Keep It Small
• One Site
• When to Use CSS content Property
• Getting Blueprint CSS & JavaScript Libraries Into Your CakePHP Layout

The main problem with this was that it messed with my cache. If a mobile browser visited the site, the mobile version was cached and served until the cache expired.

With a little more experience under my belt, it was incredibly simple to handle layout changes with media queries instead. In fact, it’s much simpler than the method I used before.

Admittedly, my layout is fairly simple. There are only a few images to deal with. Almost everything is done w/ CSS. So, all I really wanted to do was get rid of my floats on small screens. First I took the “mobile first” approach and got rid of my floats by default. Then I decided it would render well enough on a tablet at 768 pixels wide, so I set that as my cut-off.

@media only screen and (min-width : 768px) {
   section#content {
       float: left;
       width: 73%;
   }   
   aside {
       clear: none;
       float: left;
       width: 20%;
   }   
}

The media query above displays the category navigation (which I have in an aside element) to the right. Anything smaller and the categories display underneath the list of blog posts.

This is a very simple example, but it gives you an idea of how easy it can be to make your design responsive.

The other bit I added was this:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

This essentially tells high pixel-density devices to render the content like their normal pixel-density counterparts. This meta declaration has been of some interest to me lately. It dates back to 2007 and the first iPhone. You see, Steve Jobs made a decision for you. Steve Jobs decided that the iPhone should deliver a rich web experience like any other computer. So when a page loads in Mobile Safari, it’s scaled down and rendered at a functional width of 980 pixels. That means your page looks tiny unless you instruct it to scale up with the meta content above.

The end result is that adding one meta tag and ten lines of CSS turned my design into a responsive one.
Similar Posts:

• One Site
• Responsive Images: Keep It Simple; Keep It Small
• Media Queries for High Pixel-density Devices
• When Using a Grid Layout CSS Framework, Do the Math
• Blueprint: Taking a Close Look at grid.css

• Substratum: Tiny, Semantic CSS Framework for Creating Columns
• CSS Scaffolding
• When Using a Grid Layout CSS Framework, Do the Math
• Blueprint: Taking a Close Look at grid.css
• Blueprint CSS Tutorial File

Also I’m using less JavaScript than I was before. Instead the hover effects are accomplished using CSS3 transitions.

For instance, here is the CSS for the hover effect on the sidebar nav:

-webkit-transition-property: background, margin-left;
-webkit-transition-duration: 0.5s, 0.5s;
-webkit-transition-timing-function: linear, ease-in;
-moz-transition-property: background margin-left;
-moz-transition-duration: 0.5s, 0.5s;
-moz-transition-timing-function: linear, ease-in;
-o-transition-property: background margin-left;
-o-transition-duration: 0.5s, 0.5s;
-o-transition-timing-function: linear, ease-in;
transition-property: background margin-left;
transition-duration: 0.5s, 0.5s;
transition-timing-function: linear, ease-in;

Then I simply redefine the background, right and left margins for the hover state:

background: #0D7B15;
margin-left: -1em;

The browser then just takes 0.5 seconds to transition from the default state to the hover state.

I also added some other transitions as well. For instance, you can delay when the transition starts. See if you can spot this one:

-webkit-transition-property: top, left;
-webkit-transition-duration: 5s, 5s;
-webkit-transition-timing-function: linear, linear;
-webkit-transition-delay: 32s, 32s;
-moz-transition-property: top, left;
-moz-transition-delay: 32s, 32s;
-moz-transition-duration: 5s, 5s;
-moz-transition-timing-function: linear, linear;transition-property: top, left;
transition-duration: 5s, 5s;
transition-delay: 32s, 32s;
transition-timing-function: linear, ease-in-out;

This effect is attached to an ‘animate’ class that is triggered by JQuery when the page loads. There’s a 32 second delay and then the transition between states begins. It’s pretty fun stuff.

Caveat: Transitions are only supported in Firefox 4+, but they’ve been supported in WebKit browsers for a long time. Internet Explorer will not support them until version 10.Similar Posts:

• New Theme
• No Flash Required
• Using Impress.js
• Fun With JQuery Tubular
• Blueprint: Taking a Close Look at grid.css

• ez-50 (ez-css)
• container_12 (960GS)
• grid_1 (960GS)
• span-4 (Blueprint)

After years of adopting standards that keep presentation separate from the markup, frameworks like these (and others) put it right back into the code. Not only is that a bad practice, but it removes one of the chief benefits of CSS: the ability to change your presentation without touching the markup.

The most common problem these frameworks solve is laying out columns. So I came up with a handful of CSS classes that solve the same problem, but do so in a way that will allow you to alter the appearance of the pages without altering the markup.

These classes are applicable in a general way (i.e., within the content), so it’s useful to keep them named as they are for that purpose. You can also copy these same styles to your ids to get the desired widths and column layout. I encourage you to write these styles into page ids whenever possible as that will make your page markup more semantic. You should think of these classes more like scaffolding than a framework. You can get started quickly, then modify them to meet your needs. The minified file is only 412 bytes.

/* anthonygthomas.com/
   v1.0 | 20110417
   License: none (public domain)
*/

/******

 # Table of Contents #

## Define columns
### Last column
## Narrow column
### Last narrow column
## Wide column
## First column
## Column clearfix

 *******/

/* Define columns */
/* apply this to any block element */
.column {
    display: inline-block;
    float:left;
    margin-right: 2%;
    width: 48%;
}
    /* Last column */
    /* apply this to the last column */
    .column.last {
	margin-left: 2%;
	margin-right: 0;
	width: 48%;
    }

/* Narrow column */
.column.narrow {
    margin-right: 5%;
    width: 30%;
}
    /* Last narrow column */
    .column.narrow.last {
	margin-left: 0;
	margin-right: 0;
    }

/* Wide column */
.column.wide {
    margin-right: 4%;
    width: 66%;
}

/* First column */
.first {
    clear:left;
}

/* Column clearfix */
/* perishablepress.com/press/2009/12/06/new-clearfix-hack/ */
.column:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .column             { zoom: 1; } /* IE6 */
*:first-child+html .column { zoom: 1; } /* IE7 */

Here is a demo page.

The Classes

The column Class

/* apply this to any block element */
.column {
    display: inline-block;
    float:left;
    margin-right: 2%;
    width: 48%;
}

This creates a 50% column for any block element. By default columns float left, so the next consecutive element with the same class will end up on the right side of the preceding element. To get rid of the 2% margin in the right column and add a 2% gutter to the left of the second column (for a total of a 4% gutter) use the .last class:

/* apply this to the last column */
    .column.last {
	margin-left: 2%;
	margin-right: 0;
	width: 48%;
    }

The narrow Class (three columns)

This creates a 30% width column with a 5% right margin. To make the third column work correctly, you need to add a last class.

/* Narrow column */
.column.narrow {
    margin-right: 5%;
    width: 30%;
}
    /* Last narrow column */
    .column.narrow.last {
	margin-left: 0;
	margin-right: 0;
    }

The wide Class

/* Wide column */
.column.wide {
    margin-right: 4%;
    width: 66%;
}

The first Class

/* First column */
.first {
    clear:left;
}

Apply this to the first column to force the element to wrap below it’s preceding element.

The clearfix

This is a common “clearfix” method. You can find variations on this all over the web. This one is from Perisable Press. Rather than selectively apply the class, I wrote into a class that I knew needed clearing.

/* Column clearfix */
/* perishablepress.com/press/2009/12/06/new-clearfix-hack/ */
.column:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .column             { zoom: 1; } /* IE6 */
*:first-child+html .column { zoom: 1; } /* IE7 */

This is not a completely tested framework. I make no guarantees that it will work in all old browsers.

The thing I encourage you to take away is that CSS frameworks–if used as-is–are not semantic. It’s not hard to come up with your own, more semantic framework. Instead of thinking of these as grid systems, you should think of them as scaffolding. This is a good place to start. Take it from here and modify it to fit your own needs.Similar Posts:

• CSS Scaffolding
• Blueprint: Taking a Close Look at grid.css
• When Using a Grid Layout CSS Framework, Do the Math
• Blueprint CSS Tutorial File
• New Theme

Proper document structure in HTML 4 and XHTML. (http://cssglobe.com/post/1213/how-to-use-headings-in-html)

This has changed in HTML5. HTML5 has “outlining elements” that essentially reset the page hierarchy. This is a little tough to get your head around if you’ve spent as many years as I have using the page structure in the figure above. A diagram of an HTML5 document might look like this:

A demonstration of HTML5 "sectioning" elements.

Notice the difference? It’s fairly subtle, but most recognizable in the section element. In (X)HTML, the headings in the article section would be subject to the same hierarchy as the rest of the document so article headings would have to start with h3 or maybe even h4. In HTML5, nav, section, article and aside are “sectioning” elements, so they can have their own hierarchy of headings. Notice that the header HTML5 tag is not a sectioning element, so it’s h1 still rules the page.

Note: No browsers support this outlining algorithm. (I know.) It’s coming, so I think it’s important to get our heads around it now.Similar Posts:

• HTML5 Document Structure
• Using Impress.js
• Baseline Theme Version 1.1
• Why Use Blueprint and the 960 Grid System in the Baseline Theme?
• Blueprint CSS Tutorial File

content: 'Add this.';

The code above will append “Add this.” to the element, id or class of our CSS declaration. The problem with this is that we’re putting content into our presentation code. Also, this content is not accessible by screen readers or search engine crawlers. A good rule of thumb is to use this property as a means of progressive enhancement. Generally speaking, I like to use it for presentation that enhances the site, but contributes nothing semantically.

Here’s an example:

Let’s say we want to use this icon to denote links that are external to our site:

Use the content property:

a.external:after {
    content: url(path/to/external.png);
}

The image itself provides no semantic value to the document. It’s merely an enhancement and would be ignored by screen readers anyway. We can safely use content in this case. Another good use is this tutorial for creating CSS-only arrows.Similar Posts:

• When to Use CSS content Property
• Media Queries for High Pixel-density Devices
• HuffPost Applies AB Testing to Headlines via (@bigboxcar via @mjkeliher)
• Using Impress.js
• One Site

I just updated the theme of this site so:

1. It uses even less JavaScript (all animations and transformations are done w/ CSS3 tranforms)
2. It’s HTML5

More on both those points in a post soon. The upshot is that this post refers to a past theme and may be confusing.

I just added a pretty sweet bit of eye candy to my nav menu using strictly CSS & JQuery. The method is here. The code is here.

You do need to have a either a webKit or Mozilla browser for it to work properly. The point is that there are fewer and fewer things that Flash can do that can’t be done with HTML, JavaScript and CSS. In fact, just about every single bit of animation I’ve had done in Flash over the last couple of years could be recreated with JQuery & CSS3.

UPDATE

Since I couldn’t get the z-index to function properly in Internet Explorer, I used JQuery’s .browser property so the function only runs in supported browsers–namely, Mozilla or WebKit. The function actually degraded fairly well, except for Internet Explorer’s buggy handling of z-index. For reference, I’ve included my version of the plug-in because it has this and other subtle variations.

(function($) {
	if ($.browser.webkit || $.browser.mozilla) {

		$.fn.spasticNav = function(options) {

			options = $.extend({
				overlap : 2,
				speed : 500,
				reset : 1500,
				color : '#BDD2FF',
				easing : 'easeOutExpo'
			}, options);

			return this.each(function() {

			 	var nav = $(this),
			 		currentPageItem = $('.current_page_item', nav),
			 		blob,
			 		reset;

			 	$('<li id="blob"></li>').css({
			 		width : currentPageItem.outerWidth(),
			 		height : currentPageItem.outerHeight() + options.overlap,
			 		left : currentPageItem.position().left,
			 		top : currentPageItem.position().top - options.overlap / 2,
			 		backgroundColor : options.color
			 	}).appendTo(this);

				$('.current_page_item a').css('z-index', 1000);

			 	blob = $('#blob', nav);

				$('li:not(#blob)', nav).hover(function() {
					// mouse over
					clearTimeout(reset);
					blob.animate(
						{
							left : $(this).position().left,
							width : $(this).width()
						},
						{
							duration : options.speed,
							easing : options.easing,
							queue : false
						}
					);
				}, function() {
					// mouse out
					reset = setTimeout(function() {
						blob.animate({
							width : currentPageItem.outerWidth(),
							left : currentPageItem.position().left
						}, options.speed)
					}, options.reset);

				});

			}); // end each

		};

	}

})(jQuery);

Similar Posts:

• No Flash Required
• New Theme
• Baseline Theme Version 1.1
• Blueprint: Taking a Close Look at grid.css
• Fun With JQuery Tubular

First of all, to link it in just add this to header.php:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/blueprint/plugins/fancy-type/screen.css" type="text/css" media="screen, projection" />

The first thing this will do for you is indent your paragraphs:

/* Indentation instead of line shifts for sibling paragraphs. */
   p + p { text-indent:2em; margin-top:-1.5em; }
   form p + p  { text-indent: 0; } /* Don't want this in forms. */

Next up is the alt class for some fancy type:

/* For great looking type, use this code instead of asdf:
   <span class="alt">asdf</span>
   Best used on prepositions and ampersands. */

.alt {
  color: #666;
  font-family: "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", Georgia, serif;
  font-style: italic;
  font-weight: normal;
}

You also get a class for fancy quote marks:

/* For great looking quote marks in titles, replace "asdf" with:
   <span class="dquo">&#8220;</span>asdf&#8221;
   (That is, when the title starts with a quote mark).
   (You may have to change this value depending on your font size). */

.dquo { margin-left: -.5em; } 

Reduced size type with incremental leading:

/* Reduced size type with incremental leading
   (http://www.markboulton.co.uk/journal/comments/incremental_leading/)

   This could be used for side notes. For smaller type, you don't necessarily want to
   follow the 1.5x vertical rhythm -- the line-height is too much.

   Using this class, it reduces your font size and line-height so that for
   every four lines of normal sized type, there is five lines of the sidenote. eg:

   New type size in em's:
     10px (wanted side note size) / 12px (existing base size) = 0.8333 (new type size in ems)

   New line-height value:
     12px x 1.5 = 18px (old line-height)
     18px x 4 = 72px
     72px / 5 = 14.4px (new line height)
     14.4px / 10px = 1.44 (new line height in em's) */

p.incr, .incr p {
	font-size: 10px;
	line-height: 1.44em;
	margin-bottom: 1.5em;
}

And finally the caps class:

/* Surround uppercase words and abbreviations with this class.
   Based on work by Jørgen Arnor Gårdsø Lom [http://twistedintellect.com/] */

.caps {
  font-variant: small-caps;
  letter-spacing: 1px;
  text-transform: lowercase;
  font-size:1.2em;
  line-height:1%;
  font-weight:bold;
  padding:0 2px;
}

Go here to take a look at what these classes do in practice.Similar Posts:

• Blueprint Optional Fancy-Type Plugin
• Why Use Blueprint and the 960 Grid System in the Baseline Theme?
• Fun With JQuery Tubular
• Blueprint CSS Tutorial File
• CSS Scaffolding

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
• Fun With JQuery Tubular
• Blueprint CSS Tutorial File