BluePrint Grids

Blueprint operates at three levels. The first two reset the browser's CSS and default typography by changing the CSS of standard HTML elements. The third level consists of the GRID CSS classes, which is how Blueprint enables creation of almost any kind of Grid layout by defining the number and width of a series of columns. Most of the CSS behind the Grid can be customized.

The default Grid is made up of 24 columns, each spanning 30px, with a 10px margin between each column. As there is no margin between the last column and its non-existent neighbour the total width comes to 950px, which is a good width for 1024×768 resolution displays. If you’re interested in a narrower design, see the section on customizing the grid, below. To set up a Grid use the classes provided by Blueprint. Define new areas with a new div and apply one of the .span-x classes to it. For instance, if you want a 3-column setup, with two 25% columns  and one wider, 50% column, here’s how you might do it:

<div class="container"><?php if($this->countModules('atomic-left')) : ?><div class="whatever span-5 append-1"><jdoc:include type="modules" name="atomic-left" />
 </div>
 <?php endif; ?>
<?php if($this->countModules('atomic-centre')) : ?>
 <div class="whatever span-5 append-1"><jdoc:include type="modules" name="atomic-centre" />
 </div>
 <?php endif; ?>
 
 <?php if($this->countModules('atomic-right')) : ?>
 <div class="whatever span-12 last"><jdoc:include type="modules" name="atomic-right" />
 </div>
 <?php endif; ?>
</div>

In addition to the span classes, there are two important classes you need to know about.

1. Every Blueprint site needs to be wrapped in a div with the class .container, which is usually placed right after the body tag.

2. The last column in any row needs the class .last to remove its left hand margin. Note, however, that each .span-24 does not 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. Here are some.

• .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 to 23 for append/prepend and 1 to 24 for push/pull. These numbers will of course change if you set a new number of columns in the settings file. Columns may be nested to achieve the desired layout similar to using nested tables.