Blueprint CSS is a CSS framework that you can use to cut down and ease your CSS development time. Here’s what the Google Code page says about Blueprint CSS:

[Blueprint CSS] gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing…

Features:

• An easily customizable grid
• Sensible typography
• Relative font-sizes everywhere
• A typographic baseline
• An extendable plugin system
• Perfected CSS reset
• A stylesheet for printing
• Compressed version
• No bloat of any kind

Here are some more features of Blueprint CSS as listed on the blue flavor site:

1. It performs a mass reset of browser default styles.
2. It sets up sensible defaults for typography, including font families, header sizes, paragraph styles, list styles, a baseline grid, and more. It does all of this with relative sizes, so that it scales well in any browser.
3. It gives you a methodology to use for customizable layout grids. Any number of columns and widths you can dream up is easily achievable.
4. It provides a sensible default print stylesheet.
5. It does all of these things in ways that work elegantly in most browsers your visitors are likely to be using, including Internet Explorer 6 and 7.

See these links to get an idea of what Blueprint can do:

Sample page built with Blueprint CSS

Demonstration of the Blueprint CSS grid

Demonstration of the typography

Blueprint CSS tutorials and tools:

Blueprint CSS wiki tutorial – a quick tutorial that introduces the files and capabilities of Blueprint CSS.

Blueprint CSS 101 – a great introductory tutorial that explains the benefits and methodology behind Blueprint CSS.

Blueprint Grid CSS Generator – This tool will help you generate more flexible versions of Blueprint’s grid.css and compressed.css and grid.png files. Whether you prefer 8, 10,16 or 24 columns in your design, this generator now enables you that flexibility.

Deziner Folio has a really useful step-by-step guide to taking your XHTML/CSS layout and converting it to a WordPress theme. They say this whole process can be completed in 30-40 minutes!

Developing a Wordpress Theme

Another option is DevBox’s Wireframe WordPress theme, which is available for download on their site. This is basically a barebones theme that you can use to easily take a XHTML/CSS layout and convert it into a WordPress theme.

Test Theme Wireframe WordPress Theme

In short, passing the test means a browser meets web standards.

If IE8 has passed this test, this may mean the end of annoying hacks and workarounds to get sites to work in IE. An even more exciting result of this could be the end of CSS layouts made with floats etc., and the beginning of the ability to use CSS tables.

SitePoint Blogs » IE8 Passes Acid2 Test, Web Standards Project Dies of Shock

Aside from the free templates, the site has some pretty good stuff on it. First of all, their gallery has some amazing sites in it, which they say they pick themselves. You can browse the gallery according to category or color. They also have some fabulous free wallpaper, which could spice up your desktop, as well as interesting links in their News section.

CSS Creme free CSS templates»

There are a few plugins that can help you with this, but they didn’t work so smoothly. The best solution I have found is one provided by Lorelle on her Taking Your Camera on the Road blog. In her post titled “Different Category – Different Look: Creating Multiple Single Posts Looks for Different Categories,” she gives the following directions:

We began by making two back up copies of the single.php page called single1.php and single.2.php.

Inside of the original single.php, delete everything and replace it with this:

<?php
$post = $wp_query->post;
if ( in_category('9') ) {
include(TEMPLATEPATH . '/single2.php');
} else {
include(TEMPLATEPATH . '/single1.php');
}
?>

In the most simple terms, the PHP code issues a query that says “Check the post. If the post is in category ID number 9, display single2.php. If not in category ID number 9, display single1.php.”

In the in_category(), we set the category ID number to 9, the one that holds all of my web page design articles and experiments.

So basically, your main single.php file becomes a conditional file that tells WordPress which template file to use in certain categories. Lorelle also gives the following code you can put in the single.php file that will allow you to create multiple styles for multiple categories:

<?php
$post = $wp_query->post;
if ( in_category('9') ) {
include(TEMPLATEPATH . '/single9.php');
elseif ( in_category('12') ) {
include(TEMPLATEPATH . '/single12.php');
elseif ( in_category('42') ) {
include(TEMPLATEPATH . '/single42.php');
} else {
include(TEMPLATEPATH . '/single1.php');
}
?>

Now you have to get the styles you want to apply to the correct category. Do the following for every category you want to have a certain style for:

1. Create a new style sheet and call it style-9.css (9 is the category ID, but your category ID will likely differ. You can still call it style-9.css, but this is confusing!) If the changes you are making are minor, like changing certain colors or fonts, you should probably just copy style.css and rename it to style-9.css. In that style sheet, create the styles that you want, so for example if you want all h2 items to be red, make those changes in your new style sheet.
2. Style sheets are called in your header.php file. Which means that we need to create a header file that will call your new style sheet. So copy your header.php and rename the copy header-9.php (or whatever you want).
3. In your new header-9.php file, find the lines that look something like this:
   <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/style.css" type="text/css" media="screen" />
   and change where it says style.css to style-9.css.
4. Then, in your single2.php file, replace the following line (which is probably the first line):
   <?php get_header(); ?>
   with this
   <?php include ('header-hebrew.php'); ?>

Do this for every category. If you have a lot of categories you want to appear with different styles, there’s probably some conditional PHP that you can use. Being of little PHP knowledge, I don’t know what this code would be, but the above works quite nicely for people like me with little-to-no knowledge of PHP and only one or two categories that need modifying.

CSS Design Templates>> 

Free CSS Templates>> 

These are my free XHTML/CSS website templates. They are free to use for any purpose without any limitations or obligations. I kindly ask you to keep the small credit link (the line that says “Design by Andreas Viklund”) since it is a nice way of giving something back to me. But that is only a request, not an obligation.

Andreas Viklund Free website templates>>

Free XHTML/CSS Templates For Web Design>>

Chris over at Pearsonified explains how you can stylize your sitemap by using the WordPress page template system. And for those of you using his Cutline theme, he has an XHTML sitemap that is formatted specifically for that theme.

Use an XHTML Sitemap for Better Indexing>>