0

I have a 5 column grid from Susy2 and Sass where the header and footer should be 100% the width of the body (for a full bleed effect) but their content should still use the grid's gutters.

Here's some sample markup:

<header>Lorem ipsum dolor sit amet</header>

<div id="main">
  <p>Quia blanditiis ...</p>
  <p>Nostrum iure reprehenderit...</p>
</div>

<div id="sidebar">
  <p>Eveniet, aut, dolorum, adipisci dolor ...</p>
</div>

<footer>Hi mom</footer>

And here's the Sass and Susy that I've written:

@import "susy";

$susy: (
  columns: 5,
  gutters: 1/10,
  output: float,
  gutter-position: split,
  container: auto
);

body { @include container; }

header, footer {
  @include span(5);
  @include bleed();
  color: white;
  background-color: grey;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

#main {
  @include span(3);
  outline: solid red 1px;
}

#sidebar {
  @include span(2);
  outline: solid yellow 1px;
}

Here's a Codepen demo: http://codepen.io/KatieK2/pen/xbdVbJ?editors=110

The problem is that header and footer have a small margin on their right sides, and they don't use any gutter spacing in the inside. How can I get them to be the full width of the container, and include the gutter as padding?

KatieK
  • 13,586
  • 17
  • 76
  • 90

1 Answers1

1

Since you are using split gutters and a full-width container, there is nothing you need to bleed over. Your header and footer will both flow to the edge by default, without any help from Susy. All you need to do is add gutters inside to get the content back on the grid.

header, footer {
  @include gutters(inside);
}

No other Susy code needed. Remove both the span and the bleed.

Miriam Suzanne
  • 13,632
  • 2
  • 38
  • 43
  • Hmmm, if I replace `@include bleed();` with `@include gutters(inside);`, then I get both margin and padding on the left of header and footer. If I include both bleed and gutters(inside), then there's no change. Could you be a little more explicit in the changes I should make? Thanks! – KatieK Jan 20 '15 at 17:30
  • Sorry, you want to remove all other susy code in that block — the `span` as well as the `bleed` mixins. All you want there is the padded gutter. I would generally avoid full-width `span`'s unless theres a real clear need for it. Elements are full-width by default, so why be redundant? :) – Miriam Suzanne Jan 22 '15 at 23:23
  • Ok, cool, that seems to do it. It seems for my example that I also have clear the floating on the footer element. – KatieK Jan 23 '15 at 06:32