1

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.

thinkinggorilla
  • 31
  • 6

2 Answers2

4

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:

Snugug
  • 2,358
  • 1
  • 16
  • 18
  • Thanks for the prompt response, it solved my issue. But I want to know, is there a better way of achieving it without the extra
    's, something using pure css. Not touching the structure of the document for pure styling purpose.
     – thinkinggorilla Aug 18 '13 at 21:47
  • Sure, there are other ways to do it, but none of them work reliably cross-browser, many require JavaScript, and none are as easy to implement as the above. While I would normally agree with you that I'd prefer not to add purely styling divs, in this case they have a clear functional purpose as well and it's both the easiest and most robust solution to the problem at hand. AKA, this is the better way. – Snugug Aug 19 '13 at 04:03
  • If you feel one of these answers solves your problem, please remember to mark it as your chosen answer (same goes for all future questions you ask on Stack Overflow). When you hover over the plus/minus arrows, there should be a green checkmark below. – Snugug Aug 19 '13 at 14:36
  • I am really sorry for the delay actually I had to test it manually across the whole site and it works as expected. Thanks for the Grid and help. Thanks . – thinkinggorilla Aug 19 '13 at 19:05
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.

scottkellum
  • 590
  • 2
  • 5
  • Here is a quick example: http://codepen.io/scottkellum/pen/205a49eb3a04ad3cc6d032c0912f2424 scroll to the bottom of the SCSS editor to see how it is used. – scottkellum Aug 19 '13 at 15:12