For one more week I’m working in a research clinic. One of the things we need to keep track of is who is late in getting us a sample. We need to check for blood and throat samples (which come from swishing some saline around in the mouth). This can be done by hand, but soon the study will grow and the number of participants will make that hard to manage. So I just want to check to see who is late and send out an email to staff to let them know.

This function exists in my Patient controller:

function cron_delinquency() {

	if (!defined('CRON_DISPATCHER')) // make sure the request comes through the cron dispatcher
	{
		$this->redirect('/'); exit('Invalid Request');
	}
	/* this looks up active patients who do not have an patient_id ending in "D". "D" indicates they are a donor and we only need one specimen from them. */
	$active = $this->Patient->find('list', array(
		'conditions' => array(
			'Patient.id LIKE \'T%\' AND Patient.id NOT LIKE \'%D\'',
			'Patient.withdrawn != \'y\'',
			'Patient.active="1"'),
		));
	$in = '\''; /* the patient_id's start with a "T" meaning all the patient_id's need to be enclosed in quotes */

	$in .= implode('\', \'', $active); // implode the list of patient_id's

	$in = $in . '\''; // end it all with a quote

	$blds = $this->Patient->Specimen->find('list', array( // find the blood specimens for this group of patients
		'conditions' => array(
			'Specimen.patient_id IN (' . $in .')',
			'Specimen.type' => array('BLD')
			),
		'fields' => array('patient_id', 'draw_date'),
		'order' => array('patient_id' => 'ASC', 'draw_date' => 'ASC')

		));

	$thrs = $this->Patient->Specimen->find('list', array( // find the throat samples for this group of patients
		'conditions' => array(
			'Specimen.patient_id IN (' . $in .')',
			'Specimen.type' => array('THR')
			),
		'fields' => array('patient_id', 'draw_date'),
		'order' => array('patient_id' => 'ASC', 'draw_date' => 'ASC')

		));

/* My Patient model has a function to filter arrays and return only those that are older than the proved Unix timestamp. */
	$delinquentBlood = $this->Patient->find_delinquent($blds, 2419200); // 2419200 = 4 weeks; 3628800 = 6 weeks
	$delinquentThroat = $this->Patient->find_delinquent($thrs, 3628800);

	if(count($delinquentBlood) > 0 || count($delinquentThroat) > 0) // if we find any who are delinquent
	{

		asort($delinquentBlood); // sort them
		asort($delinquentThroat);

		$data['delinquentBlood'] = $delinquentBlood;
		$data['delinquentThroat'] = $delinquentThroat;
		$data['bloodCounter'] = count($delinquentBlood);
		$data['throatCounter'] = count($delinquentThroat);

		$this->set('data', $data);

		$this->Email->to 	  = $to;
		$this->Email->from		= 'LCIS <xxxxxxx@umn.edu>';
		$this->Email->subject	= 'PPG Delinquency Report: ' . $bloodCounter ." Subjects With Blood Specimens Due; " . $throatCounter . " With Throat Specimens Due.";
		$this->Email->sendAs	= 'html';
		$this->Email->template	= 'viptm_delinquency';
		$this->Email->send();
	}
}

It’s that highlighted bit that was really giving me trouble. Previously I had been setting those variables like so:

$this->set(compact('delinquentBlood', 'delinquentThroat', 'bloodCounter', 'throatCounter'));

Ordinarily this would work with any other view, but the email element I have set up for this function was acting as if they variables weren’t set at all. It wasn’t until I put them in an array called $data, that I could use them in my email element. It was puzzling and it took me about an hour to figure that out, but once I did my email reports came with beautiful data.Similar Posts:

• An Unexpected Problem with CakePHP and Email Elements
• CakePHP: Containable Behavior is Your Friend
• Roll Your Own CakePHP Components
• Use Functions from Other Controllers While Maintaining MVC Architecture in CakePHP
• No Flash Required

I used the Baseline theme as a launching pad for this website. At least for me, it serves as a good starting point when you begin developing a brand new theme.

If you find this useful, you might be interested in checking out Jeff Star’s functions.php template.Similar Posts:

• Baseline WordPress Theme Version 1.0.2
• Baseline Theme Version 1.0.1
• Introducing the Baseline Development WordPress Theme
• Access to Free Music and Emotional Connections
• APML

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
• Blueprint: Taking a Close Look at grid.css
• Introducing the Baseline Development WordPress Theme
• Display Form Fields Based on Selection Using JQuery
• When Using a Grid Layout CSS Framework, Do the Math

First, the form:

<form id="ExampleForm" method="post" action="#">
	<fieldset>
		<legend>Questionnaire</legend>
		<div class="input select">
			<label for="select1">Choose 1 to make the next select list appear.</label>
			<select name="select1" id="select1">
				<option value="">(choose one)</option>
				<option value="0">0</option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
			</select>
		</div>
		<div class="hide" id="hide1"><!-- this select box will be hidden at first -->
			<div class="input select">
				<label for="select2">Select "Yes" to make the next option appear.</label>
				<select name="select2" id="select2">
					<option value="">(choose one)</option>
					<option value="1">Yes</option>
					<option value="0">No</option>
					<option value="3">Don&#039;t Know</option>
				</select>
			</div>
		</div>
		<div class="hide" id="hide2"> <!-- this one will also be hidden at first. -->
			<div class="input select">
				<label for="select3">This is the last question.</label>
				<select name="select3" id="select3">
					<option value="">(choose one)</option>
					<option value="0">0</option>
					<option value="1">1</option>
					<option value="2">2 to 5</option>
					<option value="3">6 to 10</option>
					<option value="4">&gt;10</option>
				</select>
			</div>
		</div>
	</fieldset>
	<div class="submit">
		<input type="submit" value="Save Answers" />
	</div>
</form>

Now make sure your “hide” css class is hidden:

.hide
{

	display:none;

}

Now with the wonderful elegance of JQuery, we’ll tell the browser to display the hidden divs based on the user’s selection:

$(document).ready(function(){
	$("#select1").change(function(){

		if ($(this).val() == "1" ) {

			$("#hide1").slideDown("fast"); //Slide Down Effect

		} else {

			$("#hide1").slideUp("fast");	//Slide Up Effect

		}
	});

	$("#select2").change(function(){

		if ($(this).val() == "1" ) {

			$("#hide2").slideDown("fast"); //Slide Down Effect

		} else {

			$("#hide2").slideUp("fast");	//Slide Up Effect

		}
	});
});

Let’s look at what’s happening here. First, we have a form with select boxes with ids “select1″, “select2″ and “select3″. The last two are hidden by enclosing them in a div with our “hide” class. (Incidentally, Blueprint provides a “hide” class for you if you use that framework.)

Next we tell JQuery that as soon as “select1″ is changed, we need to evaluate the new value. In this case, if the new value is “1″, we want to display the div with the id “hide1″ using JQuery’s slideDown effect. We do this with JQuery’s change event.

$("#select1").change(function(){ // when #select1 changes

		if ($(this).val() == "1" ) { // see if the new value is "1"

			$(".hide1").slideDown("fast"); // if it is "1", display the .hide1 div with the slideDown effect

		} else {

			$(".hide1").slideUp("fast");	//otherwise, hide it with the slideUp effect

		}
	});

Once “select2″ is displayed, we can evaluate it to see if we need to display “select3″ which is in a div with a “hide” class and “hide2″ id.

$("#select2").change(function(){ // once select2 is changed

		if ($(this).val() == "1" ) { // see if the new value is "1"

			$(".hide2").slideDown("fast"); // if it is, display the hide2 div using slideDown

		} else {

			$(".hide2").slideUp("fast");	// otherwise hide it using slideUp

		}
	});

Remarkably simple really. Review the working example and code here.

Update (March 15, 2010)

You also could show/hide a single form element by id rather than enclose them in a div. I enclosed them in a div 1.) so I could hide the label and 2.) because in my application where I use this solution, I’m actually hiding a whole group of fields.

Resources

• JQuery change() Event
• JQuery val()
• JQuery slideDown Effect
• JQuery slideUp Effect

Similar Posts:

• Display Form Fields Based on Selection Using JQuery
• Why Use Blueprint and the 960 Grid System in the Baseline Theme?
• Simple Security in CakePHP
• No Flash Required
• Blueprint CSS Tutorial File

In the example below I have the following models:

• Patient
• Specimen
• Result
• ResultType

The associations in the model are:

• Result
  • belongsTo
    • ResultType
      • hasMany
        • Result
    • Patient
      • hasMany
        • Result
        • Specimen
    • Specimen
      • belongsTo
        • Patient
      • hasMany
        • Result

$paginate in the Result Controller

Original version

var $paginate = array(
		'fields' => array(
			'ResultType.type',
			'Specimen.draw_date',
			'Result.id',
			'Result.patient_id',
			'Result.specimen_id',
			'Result.result',
			'Result.created',
			'Result.modified'
			),
		'recursive' => 0,
		'limit' => 50);

The Same Thing Using Containable

var $paginate = array(
		'fields' => array(
			'id',
			'patient_id',
			'specimen_id',
			'result',
			'created',
			'modified'
			),
		'limit' => 50,
		'contain' => array(
			'ResultType' => array(
				'fields' => array(
					'ResultType.type',
					'ResultType.id'
					)
				),
			'Specimen' => array(
				'fields' => array(
					'Specimen.id',
					'Specimen.draw_date'
					)
				)
			)
		);

The SQL

SQL Generated from the Original $paginate var

SELECT COUNT(*) AS `count`
FROM `results` AS `Result`
LEFT JOIN `result_types` AS `ResultType`
ON (`Result`.`result_type_id` = `ResultType`.`id`)
LEFT JOIN `specimens` AS `Specimen`
ON (`Result`.`specimen_id` = `Specimen`.`id`)
LEFT JOIN `patients` AS `Patient`
ON (`Result`.`patient_id` = `Patient`.`id`)
WHERE 1 = 1

/* 1879 milliseconds */

SELECT `ResultType`.`type`, `Specimen`.`draw_date`, `Result`.`id`, `Result`.`patient_id`, `Result`.`specimen_id`, `Result`.`result`, `Result`.`created`, `Result`.`modified`
FROM `results` AS `Result`
LEFT JOIN `result_types` AS `ResultType`
ON (`Result`.`result_type_id` = `ResultType`.`id`)
LEFT JOIN `specimens` AS `Specimen`
ON (`Result`.`specimen_id` = `Specimen`.`id`)
LEFT JOIN `patients` AS `Patient`
ON (`Result`.`patient_id` = `Patient`.`id`)
WHERE 1 = 1
ORDER BY `Result`.`created` desc
LIMIT 50

/* 2106 milliseconds */

SQL Generated Using Containable Behavior

SELECT COUNT(*) AS `count`
FROM `results` AS `Result`
LEFT JOIN `result_types` AS `ResultType`
ON (`Result`.`result_type_id` = `ResultType`.`id`)
LEFT JOIN `specimens` AS `Specimen`
ON (`Result`.`specimen_id` = `Specimen`.`id`)
WHERE 1 = 1

/* 10 milliseconds */

SELECT `Result`.`id`, `Result`.`patient_id`, `Result`.`specimen_id`, `Result`.`result`, `Result`.`created`, `Result`.`modified`, `ResultType`.`type`, `ResultType`.`id`, `Specimen`.`id`, `Specimen`.`draw_date`
FROM `results` AS `Result`
LEFT JOIN `result_types` AS `ResultType`
ON (`Result`.`result_type_id` = `ResultType`.`id`)
LEFT JOIN `specimens` AS `Specimen`
ON (`Result`.`specimen_id` = `Specimen`.`id`)
WHERE 1 = 1
ORDER BY `Result`.`created` desc
LIMIT 50

/* 19 milliseconds */

The Difference

The first set of queries took nearly 4 seconds. The second: 29 milliseconds. Containable just gives you so much more control over what’s selected in your query. Using recursive => 0 still joined the patients table both times because it was associated in the model–even though in this case we didn’t need it. Using the Containable Behavior in the second example removed the patients table from the queries altogether.

This is one of the key pitfalls of using a framework like CakePHP; You can get things running quickly, but you have to go back and optimize. Otherwise you can build a heavy load on the server.

Resources

• CakePHP
• The Containable Behavior
• The Recursive Model Attribute

Similar Posts:

• CakePHP: Containable Behavior is Your Friend
• An Unexpected Problem with CakePHP and Email Elements
• Use Functions from Other Controllers While Maintaining MVC Architecture in CakePHP
• Getting Blueprint CSS & JavaScript Libraries Into Your CakePHP Layout
• Roll Your Own CakePHP Components

<?php

/*

Add this to the HTML below if you want to use Blueprint's IE reset style sheet. The IE8 JavaScript should
fix the same things so you shouldn't need both. This is here if you'd rather use it than the JavaScript.

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

*/

?>

<!-- Remove this JavaScript link if you decide to use Blueprint's CSS reset instead. I recommend using this instead. -->

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

You can download the theme here.Similar Posts:

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

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

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
• When Using a Grid Layout CSS Framework, Do the Math

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

Most folks who have done much work with relational databases won’t need a mind map for simple relationships like the example above where tables are simple has-many or belongs-to relationships. But, it can come in very handy for getting your head around has-and-belongs-to-many relationships where join tables are involved.

• Mindmeister
• FreeMind

Similar Posts:

• Using Mind Mapping Software to Develop Data Models
• Use Functions from Other Controllers While Maintaining MVC Architecture in CakePHP
• CakePHP: Containable Behavior is Your Friend
• Simple Security in CakePHP
• An Unexpected Problem with CakePHP and Email Elements