39 lines
1.2 KiB
Sass
39 lines
1.2 KiB
Sass
// 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)
|