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 even though we didn’t need it because it was associated in the model. 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
• 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
• Simple Security in CakePHP

<?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
• Using Social Networking Sites for Research

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
• When Using a Grid Layout CSS Framework, Do the Math
• Blueprint CSS Tutorial File
• Why Use Blueprint and the 960 Grid System in the Baseline Theme?
• Blueprint Optional Fancy-Type Plugin

Posted via email from Truetone

Similar Posts:

• Michael Shermer’s TED Talk: Why People Believe Weird Things
• What You See Might Not Be Real
• Awesome
• Via http://shop.neatorama.com/
• 50 Years of Space Exploration

Posted via email from Truetone

Similar Posts:

• Change Into…
• Very Gradual Change (via @keeproductions)
• What You See Might Not Be Real
• Awesome
• Via http://shop.neatorama.com/

Posted via email from Truetone

Similar Posts:

• Very Gradual Change (via @keeproductions)
• Change Into…
• Via http://shop.neatorama.com/
• Every Mission to Mars Ever Planned (via @wiredscience)
• What You See Might Not Be Real