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

The other day I wrote about getting the Blueprint CSS framework into your Wordpress theme. If you’re developing in CakePHP, it’s even easier to link multiple style sheets and JavaScript libraries to your layout file.

<?php

$css = array('blueprint/screen', 'blueprint/ie', 'style');
$jslibraries = array('prototype', 'scriptaculous', 'jquery');
echo $html->css('blueprint/print', 'stylesheet', 'media="print"');
echo $html->css($css, 'stylesheet', 'media=”screen, projection”');
echo $javascript->link($jslibraries);
?>

Let’s take these one at a time.

$css = array('blueprint/screen', 'blueprint/ie', 'style');

CakePHP’s html helper will load any css file you specify. First, make sure the css files are in app/webroot/css. Then put any css files you want to link to your layout in an array like I have above. You might have noticed that I didn’t include print in my array. That’s because we want to add an media=”print” as a separate attribute that the other style sheets won’t have.

Once they’re loaded into your array, simply put echo $html->css($css); in the head of your layout. The output will be:
<link rel="stylesheet" type="text/css" href="/app/webroot/css/blueprint/screen.css" />
<link rel="stylesheet" type="text/css" href="/app/webroot/css/blueprint/ie.css" />
<link rel="stylesheet" type="text/css" href="/app/webroot/css/style.css" />

We still haven’t linked our print style sheet. Make sure you link the print style sheet above the others so they override it. We can add media="print" by putting this into our layout head:

echo $html->css('blueprint/print', 'stylesheet', 'media="print"');

So now:

$css = array('blueprint/screen', 'blueprint/ie', 'style');
echo $html->css('blueprint/print', 'stylesheet', 'media="print"');
echo $html->css($css, 'stylesheet', 'media=”screen, projection”');

Results in:

<link rel="stylesheet" type="text/css" href="/cvp-msi/https/app/webroot/css/blueprint/print.css" media="print" />
<link rel="stylesheet" type="text/css" href="/cvp-msi/https/app/webroot/css/blueprint/screen.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="/cvp-msi/https/app/webroot/css/blueprint/ie.css" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="/cvp-msi/https/app/webroot/css/style.css" media="screen, projection" />

Two things to note. In $html->css($path, $attributes), the first argument is the path from app/webroot/css. The second argument is html attributes.

Linking JavaScript libraries is very similar.

$jslibraries = array('prototype', 'scriptaculous', 'jquery');

This will link to prototype.js, scriptaculous.js and jquery.js respectively as long as there in app/webroot/js.

Put echo $javascript->link($jslibraries); into the head of your layout and you’re done. You have all three JavaScript libraries at your disposal.

Other good resources:

• CakePHP Core Helpers
• Developing With CakePHP
• CakePHP API JavaScript link Helper
• CakePHP API CSS link Helper

Similar Posts:

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