CSS Layout & positioning using the Blueprint Framework
The KU Template is setup using the the Blueprint CSS grid framework. It is setup "transparently", so it is your choice if you want to take advantage of its layout rules for your site. Blueprint makes it easy to properly position the different columns and boxes on your site so that every major browser will interpret the positioning correctly.
Numerous tutorials & resources are available for Blueprint CSS at http://wiki.github.com/joshuaclayton/blueprint-css. A brief overview is presented below.
Grid-based layout
Blueprint uses a grid-based layout system. For the KU Template, it is set to be 900px wide, with 24 columns and 12 pixel margins. Positioning is achieved by deciding the number of columns you want a specific block to span. To see the column layout of this page, click the "Show Grid" link in the top left of this page. You will see columns in the background.
Looking at the left navigation, you will see that it covers five grey columns, and four white columns. The grey columns are the blueprint columns, and the white ones are the blueprint margins. Since the left navigation is covering five columns, its class looks like this:
<div class="span-5">
...navigation code goes here
</div>
With the main text block (where this text is contained), you will see that it covers 19 columns. In addition, since it is the last column for this page, we include the tag "last". It looks like this:
...text goes here
</div>
Typically you will work with the 19 columns of the main area.
How to take advantage of blueprint
While you are not required to use blueprint for your layout & positioning, it can be a quick and relatively easy way to setup different columns and boxes on your site. Consider the below:
This is the first column
My content goes here. This column has class "span-6".This is the second column
Content goes here. This column has class "span-7".This is the third column
Content goes here. This column has class "span-6 last". The last gets rid of the margin.The above was accomplished relatively easily without tables, and without having to manually setup floats, etc. The code for the above can be simplified as:
<div class="span-19 last"> <div class="span-6">column 1 stuff</div> <div class="span-7">column 2 stuff</div> <div class="span-6 last">column 3 stuff</div> </div>
As you can see, there are a lot of choices with blueprint. One thing to remember...blueprint does NOT take care of top or bottom margins, you will need to defined those yourself.
If you are interested in learning more, please visit the blueprint website at http://blueprintcss.org/
top
