• 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
• Blueprint: Taking a Close Look at grid.css
• When to Use CSS content Property
• Why Use Blueprint and the 960 Grid System in the Baseline Theme?

• 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
• Baseline Theme Version 1.1
• Why Use Blueprint and the 960 Grid System in the Baseline Theme?
• Blueprint CSS Tutorial File
• CSS Scaffolding

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
• HuffPost Applies AB Testing to Headlines via (@bigboxcar via @mjkeliher)
• Blueprint CSS Readme File
• Anger Content Management
• Baseline Theme Version 1.1

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
• Display Form Fields Based on Selection Using JQuery

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?
• Blueprint CSS Tutorial File
• CSS Scaffolding
• Blueprint: Taking a Close Look at grid.css

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

I’ve decided to build and release an XHTML 1.0 version and release it as a springboard for others who may want to take advantage of the same sets of tools. The theme isn’t much to look at (that’s the point), but it includes:

• Blueprint CSS framework
• 960 Grid System
• JQuery 1.4.0
• JQuery UI 1.7.1
• Superfish JQuery menu (with HoverIntent.js)
• IE8 JavaScript Library
• Widget-enabled sidebar
• Test Content file from WP-Candy
• Valid XHTML 1.0

More information here.

If you want to use all of these tools, you’re all set. If you want to use a few, it’s just a matter of removing them from header.php.

First off, I really like Blueprint’s browser reset, so I wanted to include that here. I also like the flexibility the 960 Grid System offers in terms of column width. As a result, I’ve included them both.

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

If you don’t wish to use any of these, simply remove them from header.php. Next up is the Superfish CSS:

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

You must keep this if you’re using Superfish. If you’re not going to use Superfish, you should remove these lines too:

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/superfish/js/superfish.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/superfish/js/hoverIntent.js"></script>

<script type="text/javascript">

    $(document).ready(function() {
        $('ul.sf-menu').superfish();
    });

</script>

Next is Blueprint’s Internet Explorer CSS reset:

<!--[if IE]>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/blueprint/ie.css" type="text/css" media="screen, projection" />
<![endif] -->

I’ve also had good luck using the IE8 JavaScript library, so that’s included next:

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->

Then JQuery and JQuery UI libraries:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js" type="text/javascript"></script>

That’s it. All the frameworks and libraries are loaded. If you don’t think you’ll need any one of them, you can just take them out. WARNING: The layout of the columns does rely on the 960 Grid System CSS file. If you take that out of the head the columns won’t work and you’ll break the layout.

Otherwise this should give you a good start that will allow you to take advantage of tons of cool JQuery stuff and leverages a very popular CSS Grid System for laying out columns. It should be easy to modify this theme to fit your own design.

Download the theme here.Similar Posts:

• Introducing the Baseline Development WordPress Theme
• Incorporating Blueprint CSS Into Your New WordPress Theme
• Baseline Theme Version 1.0.1
• Getting Blueprint CSS & JavaScript Libraries Into Your CakePHP Layout
• Blueprint CSS Readme File

Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.

.container

/* A container should group all your columns. */
.container {
width: 950px;
margin: 0 auto;
}

container is where it all begins. This establishes your centered div with a width of 950 pixels. If you've done much CSS, this should look pretty familiar:

margin: 0 auto; /* This is what centers the div */

Not much else to say except all of your other columns should be inside a div with the container class. Let's move on.

.showgrid

.showgrid { background: url(src/grid.png);  }

showgrid is a nice tool to display your columns when you're laying out a page. Simply add it to the container div like so:

<div class="container showgrid">DIV contents</div>

Once you're satisfied with how things are positioned, remove showgrid from your classes.

Let's skip down to line 33 or so.

.span-x

/* Sets up basic grid floating and margin. */
div.span-1, div.span-2, div.span-3, div.span-4, div.span-5,
div.span-6, div.span-7, div.span-8, div.span-9, div.span-10,
div.span-11, div.span-12, div.span-13, div.span-14, div.span-15,
div.span-16, div.span-17, div.span-18, div.span-19, div.span-20,
div.span-21, div.span-22, div.span-23, div.span-24 {
  float: left;
  margin-right: 10px;
}

This just sets up your span-x columns to all float left. It's a bit counter-intuitive, but this makes them all wrap around to the right of each other. It also sets up the 10 pixel margin to the right of each one for a nice gutter. That is, except for last. last is always the last column and forces any div with a span-x class to go below it. It also has no right margin:

div.last { margin-right: 0; }

Next the span-x widths are set:

/* Use these classes to set the width of a column. */
.span-1  { width: 30px; }
.span-2  { width: 70px; }
.span-3  { width: 110px; }
.span-4  { width: 150px; }
.span-5  { width: 190px; }
.span-6  { width: 230px; }
.span-7  { width: 270px; }
.span-8  { width: 310px; }
.span-9  { width: 350px; }
.span-10 { width: 390px; }
.span-11 { width: 430px; }
.span-12 { width: 470px; }
.span-13 { width: 510px; }
.span-14 { width: 550px; }
.span-15 { width: 590px; }
.span-16 { width: 630px; }
.span-17 { width: 670px; }
.span-18 { width: 710px; }
.span-19 { width: 750px; }
.span-20 { width: 790px; }
.span-21 { width: 830px; }
.span-22 { width: 870px; }
.span-23 { width: 910px; }
.span-24, div.span-24 { width: 950px; margin: 0; }

Notice above that span-24 takes up the full width with no right margin. Want a wider gutter than the pre-established 10 pixels? No problem.

.append-x

/* Add these to a column to append empty cols. */
.append-1  { padding-right: 40px; }
.append-2  { padding-right: 80px; }
.append-3  { padding-right: 120px; }
.append-4  { padding-right: 160px; }
.append-5  { padding-right: 200px; }
.append-6  { padding-right: 240px; }
.append-7  { padding-right: 280px; }
.append-8  { padding-right: 320px; }
.append-9  { padding-right: 360px; }
.append-10 { padding-right: 400px; }
.append-11 { padding-right: 440px; }
.append-12 { padding-right: 480px; }
.append-13 { padding-right: 520px; }
.append-14 { padding-right: 560px; }
.append-15 { padding-right: 600px; }
.append-16 { padding-right: 640px; }
.append-17 { padding-right: 680px; }
.append-18 { padding-right: 720px; }
.append-19 { padding-right: 760px; }
.append-20 { padding-right: 800px; }
.append-21 { padding-right: 840px; }
.append-22 { padding-right: 880px; }
.append-23 { padding-right: 920px; } 

Remember, each of the span-x columns are 30 pixels wide with a 10-pixel right margin. Likewise the above append-x classes will add an additional column to the right. Just do the math. span-1 adds 40 pixels. span-2, 80 pixels and so on. We can add columns to the left with the prepend classes in the same way.

.prepend-x

/* Add these to a column to prepend empty cols. */
.prepend-1  { padding-left: 40px; }
.prepend-2  { padding-left: 80px; }
.prepend-3  { padding-left: 120px; }
.prepend-4  { padding-left: 160px; }
.prepend-5  { padding-left: 200px; }
.prepend-6  { padding-left: 240px; }
.prepend-7  { padding-left: 280px; }
.prepend-8  { padding-left: 320px; }
.prepend-9  { padding-left: 360px; }
.prepend-10 { padding-left: 400px; }
.prepend-11 { padding-left: 440px; }
.prepend-12 { padding-left: 480px; }
.prepend-13 { padding-left: 520px; }
.prepend-14 { padding-left: 560px; }
.prepend-15 { padding-left: 600px; }
.prepend-16 { padding-left: 640px; }
.prepend-17 { padding-left: 680px; }
.prepend-18 { padding-left: 720px; }
.prepend-19 { padding-left: 760px; }
.prepend-20 { padding-left: 800px; }
.prepend-21 { padding-left: 840px; }
.prepend-22 { padding-left: 880px; }
.prepend-23 { padding-left: 920px; } 

prepend-1 adds 40 pixels to the left of a column. prepend-2 adds 80 pixels and so on. As long as we're talking about positioning, let's skip ahead a little bit.

.push-x & .pull-x

/* Use these classes on an element to push it into the
   next column, or to pull it into the previous column.  */

.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;
}

.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;
}

pull-x and push-x function in a similar way to append-x and prepend-x, except they'll actually push columns into one another instead of creating a wider gutter. push-1 pushes the page element over to the right by one, 40-pixel column. pull-1 pulls the page element over to the left by one 40-pixel column.

We skipped over some stuff. Let's go back to it:

.border

/* Border on right hand side of a column. */
div.border {
  padding-right: 4px;
  margin-right: 5px;
  border-right: 1px solid #eee;
}

border adds a right-border to any page element. Notice the right padding, margin and 1-pixel border all add up to 10 pixels to maintain the standard 10-pixel gutter.

.colborder

colborder does the same except the right margin spans an entire column:

/* Border with more whitespace, spans one column. */
div.colborder {
  padding-right: 24px;
  margin-right: 25px;
  border-right: 1px solid #eee;
}

The right padding, margin and 1-pixel border add up to 50 pixels this time.

.box

box creates a padded box inside a column.

.box {
  padding: 1.5em;
  margin-bottom: 1.5em;
  background: #E5ECF9;
}

hr

hr gets a nice default setting to make sure it crosses your column:

hr {
  background: #ddd;
  color: #ddd;
  clear: both;
  float: none;
  width: 100%;
  height: .1em;
  margin: 0 0 1.45em;
  border: none;
}
hr.space {
  background: #fff;
  color: #fff;
}

I'm actually going to skip to the end because the clearfix classes seem a bit outmoded after reading the article they are based on. Read this article instead.

.clear

clear simply forces a column to go beneath the column before it.

.clear { clear:both; }

That's it. Hopefully reading this will give you a good sense of what positioning classes are available in Blueprint and how to use them. Please leave a comment if anything needs clarification.Similar Posts:

• Blueprint: Taking a Close Look at grid.css
• CSS Scaffolding
• Blueprint CSS Tutorial File
• When Using a Grid Layout CSS Framework, Do the Math
• Why Use Blueprint and the 960 Grid System in the Baseline Theme?