Singularity Grid layout with header and footer width 100%

Question

I am using Singularity Grid System version 1.1.2, my variables for the 12 column grid are $grids: 12, $gutters: 1/3. The grid layout is working fine. Now I want to give the top Headergroup, middle section and the footer background color that covers the full browser width. All the content are centered and spans 90% of the total width.

Answer 1

Creating full color bleeds is an unfortunately ugly task all around, but it's fairly easy to do. You're going to want to do something like the following:

<div class="full-stripe header">
  <header class="container"></header>
</div>
<div class="full-stripe main">
  <main class="container"></main>
</div>
<div class="full-stripe footer">
  <footer class="container"></footer>
</div>

What you need to do is wrap each section of your site in a div that will stretch the whole width of your page, while keeping the contained content pieces within it sharing a similar class. Your CSS would then look something like the following:

.full-stripe {
  width: 100%;
  @include clearfix;
  &.header {
    background: red;
  }
  &.main {
    background: green;
  }
  &.footer {
    background: blue;
  }
}
.container {
  margin: 0 auto;
  padding: 0;
  max-width: 68.5em;
  @include clearfix;
}

I've created a CodePen to demonstrate the point. The container has a little bit of extra styling to make it stand out and help visualize what's going on:

• Code
• Full

Answer 2

You may find the nested context mixin in toolkit useful. It finds the context of percentage containers so @include nested-context(90%, center) on your hgroup will make it full width.