38 lines
1.3 KiB
SCSS
38 lines
1.3 KiB
SCSS
// 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); } }
|