// Page layout can be done using mixins applied to your semantic classes and IDs
// For instance this layout defines a two column layout on pages with
// a body class of "two-col".
//
// The markup would look like:
//    <div id="container">
//      <div id="header"></div>
//      <div id="sidebar"></div>
//      <div id="content"></div>
//      <div id="footer"></div>
//    </div>
//
// and the layout would look like:
//    +------------------------+
//    |        #header         |
//    +--------+---------------+
//    |        |               |
//    |#sidebar|    #content   |
//    |        |               |
//    +------------------------+
//    |        #footer         |
//    +--------+---------------+

body.two-col {
  #container {
    @include container; }
  #header, #footer {
    @include column($blueprint-grid-columns); }
  #sidebar {
    // One third of the grid columns, rounding down. With 24 cols, this is 8.
    $sidebar-columns: floor($blueprint-grid-columns / 3);
    @include column($sidebar-columns); }
  #content {
    // Two thirds of the grid columns, rounding up.
    // With 24 cols, this is 16.
    $content-columns: ceil(2 * $blueprint-grid-columns / 3);
    // true means it's the last column in the row
    @include column($content-columns, true); } }