O'Reilly logo

Pragmatic Guide to Sass by Michael Lintorn Catlin, Hampton Catlin

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

35Producing More Two-Column Layouts

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. ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required