Susy: How to expand the content area to cover the grid?

Question

I just started playing with Susie. I have a 12 column grid on which there is a grid. Now I want the title of my page to cover the entire grid, including the grid. What I'm doing right now is calculating the total width and then setting a negative margin in the header. It seems rather hoarse to me ... Is there a cleaner way to do this?

$total-columns : 12; $column-width : 3.5em; $gutter-width : 1.25em; $grid-padding : 2em; $total-width: ( $total-columns * ($column-width + $gutter-width) ) + ( 2 * $grid-padding ) - $gutter-width; header { height: 150px; width: $total-width; margin-left: -$grid-padding; } 

Answer 1

You have two good options. One of them is a simplified version of what you have. Since by default block elements are 100% wide, you can simply exclude the width setting (and all this hacking math).

 header { height: 150px; margin: 0 0 - $grid-padding; } 

Another option is to use multiple containers per page. This requires a change in markup, but sometimes it is a simplification that works well. If you move the title outside the current container and declare it as your own container, this will do the trick.

(as a note: if you need full width, you can just use the columns-width() function (for the inner width, no fill) or container-outer-width() for the full width, including padding.)

UPDATE:

I use this mixin to apply bleeding anywhere I need it:

 @mixin bleed($padding: $grid-padding, $sides: left right) { @if $sides == 'all' { margin: - $padding; padding: $padding; } @else { @each $side in $sides { margin-#{$side}: - $padding; padding-#{$side}: $padding; } } } 

Some examples:

 #header { @include bleed; } #nav { @include bleed($sides: left); } #main { @include bleed($sides: right); } #footer { @include bleed(space(3)); }