As we saw in Task 33, ​Jazzing Up Layouts with Columns​, we can use Compass to generate columns in our HTML. However, with Blueprint, there’s an even easier way. Blueprint controls more of the column layout than Compass, but it still lets you have a say over the widths.

First we need to define the number of columns and the width of each column. Here we’re using six columns of 65px width. Once we’ve done that, we can @import "blueprint".

As we start adding to the .two-col class, we must first include the container. We can also set the background and set other box-wide things here. Then it’s on to the columns.

With our header, we want it to span the whole width of the item, and the same goes for the footer. So we’ll apply the whole six columns to this bit using @include column(6).

For the links column and the main text area, we need to divide up the six columns between them—say two columns’ worth for the links and the remaining four columns’ worth for the main text. Simply add the number of columns you want each section to have to the @include column.

We need to add true to any column (or column set) that appears after another—this ensures the next column follows on from the previous column.

• Define the number and width of columns, then import Blueprint.

  ​	$​blueprint_grid_columns​: 6;
  ​	$​blueprint_grid_width​: 65px;
  ​
  ​	​@import​ ​"blueprint"​;

• Columnize your text!

  blueprint/twocolumn.scss
  ​	.two-col {
  ​	​@include​ container;
  ​	background-color: #9ab3cc;
  ​	#header, #footer {
  ​	​@include​ column(6); }
  ​	#links {
  ​	​@include​ column(2); }
  ​	#main_text {
  ​	​@include​ column(4, true); } }

  

Related Tasks

• Task 33, ​Jazzing Up Layouts with Columns​