How to properly define containers in Singularity over different viewports

Question

I gave Singularity a spin for a new project. So far i was using Susy. Normally i prefer to post the questions individually but in the present case the questions are connected dealing with one central point. The setting is the following.

My main page is a header with a background image and a footer with a gradient and the container with the content should be flanked by margins. The main markup skeleton looks like the following:

<div class="mainwrap">
  <header class="container"></header>
  <div class="container"></div>
</div>
<div class="footwrap">
  <footer class="container">
</div>

The basic styling of the wraps and containers looks like:

%wrap {
    width:100%;
    @extend %clearfix;
}

.mainwrap {
    @extend %wrap;
    background: image-url('texturetastic_gray.png') repeat top left;
    @include box-shadow(black 0.2em 0.2em 0.5em);
    margin-bottom:1em;
}
.footwrap {
    @extend %wrap;
    background-color: #484d51;
    @include background-image(linear-gradient(left, rgb(72, 77, 81), rgb(22, 25, 28)));
    @include filter-gradient(rgb(72, 77, 81), rgb(22, 25, 28), horizontal);
}

.container {
    @include background-grid;
    max-width:900px;
    margin: 0 auto;
    @extend %clearfix;
}

Now i have two issues:

1) There are two gaps on the page

The first one is fixable with overflow-x: hidden; on %wrap or .mainwrap. But the second gap between .mainwrap and .footwrap isn't fixable with that. The desired look at the border between .mainwrap and .footwrap should look like the following. The footer visually underneath the mainwrap and the mainwrap has a visible dropshadow:

But with the described html and css setup i get always the gap like already seen above:

Any ideas why? :(

2) The setting of the container That is the most uncertain part i have most of my issues with and ask myself what the best practice to handle might be. My basic settings are:

$grids: 4;
$grids: add-grid(6 at 550px);
$grids: add-grid(9 at 750px);
$grids: add-grid(12 at 900px);
$grids: add-grid(16 at 1200px);
$grids: add-grid(18 at 1400px);

$gutters:0.25;
$gutters: add-gutter(.20 at 900px);
$gutters: add-gutter(.15 at 1200px);

and for the .container i have added:

padding-left: gutter-span();
padding-right: gutter-span();

like suggested in one of the forum threads for Singularity on Github. But i am still uncertain what the best practice might be. Basically i would have a minimum padding which switches over to margin: 0 auto; when the defined maximum width for a container is reached. Is the way with the padding-left/right and gutter-span as well as the max-width the appropriate way?

Would that imply you have to define a basic column number and a max width for the container. When that max width is reached you change the max-width up and redefine the active grid setting with add-grid() and adjust the padding. You go on with that up until the maximum width of lets say 1400 or 1600px for the container is reacher. And on breakpoints for broader viewports you have to use multiples of gutter-span. Summed up it would look like e.g. that?

$grids: 4;
$grids: add-grid(8 at 600px);
$grids: add-grid(12 at 900px);
$grids: add-grid(16 at 1400px);

$gutters:0.25;
$gutters: add-gutter(.20 at 600px);
$gutters: add-gutter(.15 at 900px);
$gutters: add-gutter(.10 at 1400px);

.container {
    @include background-grid;
    max-width:600px;
    @include breakpoint(600px) {
        max-width: 900px;
    }
    @include breakpoint(900px) {
        max-width: 1400px;
    }
    @include breakpoint(1400px) {
        max-width: 1600px;
    }

    margin: 0 auto;
    padding-left: gutter-span();
    padding-right: gutter-span();
    @include breakpoint(600px) {
        padding-left: gutter-span(2);
        padding-right: gutter-span(2);
    }
    @include breakpoint(900px) {
        padding-left: gutter-span(3);
        padding-right: gutter-span(3);
    }
    @include breakpoint(600px) {
        padding-left: gutter-span(4);
        padding-right: gutter-span(4);
    }
    @extend %clearfix;
}

But basically that would lead to quite a few breakpoints if you wanna control things in a fine grained way on the container? Or is there a more elegant solution somehow?

Best regards Ralf

Answer 1

the second gap between .mainwrap and .footwrap isn't fixable with that. The desired look at the border between .mainwrap and .footwrap should look like the following. The footer visually underneath the mainwrap and the mainwrap has a visible dropshadow:

You've got margin-bottom: 1em applied to .mainwrap. Comment it out and you're good to go.

---

i am still uncertain what the best practice might be. Basically i would have a minimum padding which switches over to margin: 0 auto; when the defined maximum width for a container is reached.

1. Why are you duplicating media queries? You could write both max-width and padding styles within the same breakpoint calls. But the matter is that you don't need to change the max-width. Set the max-width statically ONLY to the biggest maximum value.
2. You can have max-width, padding and margin 0 auto applied at the same time. No need to apply them selectively. Just be careful with which elements you apply those styles to.
3. If you're fine with static padding, e. g. padding: 0 1em, then you don't even need any breakpoints. If you need padding relative to the grid size, then don't hesitate to use breakpoints. If you feel they're bulky, create a mixin.