Susy: How to extend content box to cover grid-padding as well?

Question

I just started to play with Susy. I have a 12 column grid that has grid-padding on it. Now i want the header of my page to span the whole grid including the grid-padding. What I'm doing right now is calculating the overall width and then setting a negative margin on the header. That's feels rather hacky to me... Is there a cleaner way to do it?

$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;
}

Lambency

Answer 1

You have two good options. One is a simplified version of what you have. Since block elements are 100% width by default, you can simply eliminate your width setting (and all that hacky math).

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

Your other option is to use multiple containers on the page. That requires a change to the markup, but sometimes it's a simplification that works well. If you move the header outside your current container, and declare it as a container of it's own, that will do the trick.

(as a side note: if you do need the full width ever, you can simply use the columns-width() function (for inner width, without padding) or container-outer-width() for the full width including the padding.)

UPDATE:

I've been using this mixin, to apply bleed 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)); }

Institutionalize

Thanks for the answer. So basically I did the right thing, since container-outer-width() does pretty much the same calculation I did. I have a few elements throughout the page that need to be full width so the container solution is no option here, but would be the cleanest if applicable I guess. Leaving out the width though leaves the right padding of the container blank. – Lambency

A negative right margin should handle the right padding just fine. The problem with container-outer-width is that it isn't percent-based, while the rest of your grid is. I would avoid setting fixed widths inside a Susy grid. – Institutionalize

@EricMeyer I tried using this to get my grid element to bleed left and right, yet it only shifted the whole container left. I used #top-content { @include span-columns(24,24); @include border-radius($radius); @include bleed; background-color: #fff; margin-top: 10px; height: 300px; } And it shifted the box left. – Recidivate

@EricMeyer Actually, I was using new border-box include, that's why. removed that and now it works right, at least in webkit. Will this margin mixin work correctly in IE (7+)? – Recidivate

The Bleed mixin is now in Susy proper: susy.oddbird.net/guides/reference/#ref-bleed – Bankruptcy