@, and apply one of the @.span-x@ classes to it. For instance, if you want a 3-column setup, with two narrow and one wide column, a header and a footer here's how you do it:

			
  
  	
  		The header
  	

  	
  		The first column
  	
  	
  		The center column
  	
  	
  		The last column
  	
	
  	
  		The footer

In addition to the spans, there are two important classes you need to know about. First of all, every Blueprint site needs to be wrapped in a div with the class @.container@, which is usually placed right after the body tag. Second, the last column in a row (which by default has 24 columns), needs the class @.last@ to remove its left hand margin. Note, however, that each @.span-24@ don't need the @.last@ class, since these always span the entire width of the page. To create basic grids, this is all you need to know. The grid CSS however, provides many more classes for more intricate designs. To see some of them in action, check out the files in @tests/parts/@. These files demonstrate what's possible with the grid in Blueprint. Here's a quick overview of the other classes you can use in to make your grid:

@.append-x@: Appends x number of empty columns after a column.
@.prepend-x@: Preppends x number of empty columns before a column.
@.push-x@: Pushes a column x columns to the left. Can be used to swap columns.
@.pull-x@: Pulls a column x columns to the right. Can be used to swap columns.
@.border@: Applies a border to the right side of the column.
@.colborder@: Appends one empty column, with a border down the middle.
@.clear@: Makes a column drop below a row, regardless of space.
@.showgrid@: Add to container or column to see the grid and baseline.

In this list, @x@ is a number from 1 through 23 for append/prepend and 1 through 24 for push/pull. These numbers will of course change if you set a new number of columns in the settings file. Here's another example where we have four columns of equal width, with a border between the two first and the two last columns, as well as a four column gap in the middle:

				
	
		
			The first column
		
		
			The second column
		
		
			The third column
		
		
			The fourth (last) column

You may also nest columns to achieve the desired layout. Here's a setup where we want four rectangles with two on top and two below on the first half of the page, and one single column spanning the second half of the page:

				
	
		
			
				Top left
			
			
				Top right
			
			
				Bottom left
			
			
				Bottom right
			
		
		
			Second half of page

Try this code in your browser it it's difficult to understand what it would look like. To see more examples on how to use these classes, check out @/tests/parts/grid.html@. h2. The Scripts Blueprint comes with two scripts: one for compressing and customizing the CSS, and one for validating the core CSS files, which is handy if you're making changes to these files. h3. The Validator The validator has a fairly simple job - validate the CSS in the core BP files. The script uses a bundled version of the W3C CSS validator to accomplish this. To run it, you'll need to have Ruby installed on your machine. You can then run the script like so: @$ ruby validate.rb@. Note that there are a few validation errors shipping with Blueprint. These are known, and comes from a few CSS hacks needed to ensure consistent rendering across the vast browser field. h3. The Compressor As the files you'll include in your HTML are the compressed versions of the core CSS files, you'll have to recompress the core if you've made any changes. This is what the compressor script is for. In addition this is where you customize the grid. To customize the grid, a special settings file is used, and the new CSS is generated once you run the compressor. The new compressed files will then reflect your settings file. To recompress, you just have to run the script. This will parse the core CSS files and output new compressed files in the blueprint folder. As with the validator, Ruby has to be installed to use this script. In the @lib@ directory, run: @$ruby compress.rb@ Calling this file by itself will pull files from @blueprint/src@ and concatenate them into three files; @ie.css@, @print.css@, and @screen.css@. However, argument variables can be set to change how this works. Calling @$ruby compress.rb -h@ will reveal basic arguments you can pass to the script. h3. Custom Settings To learn how to use custom settings, read through the documentation within @lib/compress.rb@