// 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
  +container
#header, #footer
  +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)
  +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
  +column($content-columns, true)