Four Sections in Footer

Question

I'm just getting started with the Singularity grid system - slowly getting my head around it.

I'm working in isolation mode, and can set my grid values, using the mobile first approach.

The smallest grid is @include add-grid(2);

I have a footer on the page and inside the footer are four sections.

At the smallest screen size - the footer is set to @include grid-span(2, 1);

I'd like two of sections inside of the footer to appear next to each other in column one and two. And then the next two sections on the next row, over the next two columns.

For the screen size up from that - I'd like all four sections in the footer on the same row.

In pure CSS this would usually be done using a float, and say 25% width.

My question - is whether there is anything Sass, or Singularity can do to make the markup for these four sections a little 'DRY-er'? Or do I have to set the grid positions and grid-span settings for all four section, and for all breakpoints?

For example

footer.section1 {
    @include grid-span(1,1); // 2 columns

    @include breakpoint($break) { // 8 columns
       @include grid-span(2,1);
    }

    @include breakpoint($break1) { // 16 columns
       @include grid-span(4,1);
    }    
}

footer.section2 {
    @include grid-span(2,1); // 2 columns

    @include breakpoint($break) { // 8 columns
       @include grid-span(2,3);
    }

    @include breakpoint($break1) { // 16 columns
       @include grid-span(4,5);
    }    
}

footer.section3 {
    @include grid-span(1,1); // 2 columns - how can I force this onto the next row?

    @include breakpoint($break) { // 8 columns
       @include grid-span(2,5);
    }

    @include breakpoint($break1) { // 16 columns
       @include grid-span(4,9);
    }    
}

footer.section4 {
    @include grid-span(1,2); // 2 columns - how can I force this onto the next row?

    @include breakpoint($break) { // 8 columns
       @include grid-span(2,7);
    }

    @include breakpoint($break1) { // 16 columns
       @include grid-span(4,13);
    }    
}

Answer 1

So your question is a request for some best practices recommendation rather than a description of a specific problem you're trying to solve?

First of all, on the smallest screen size, when you want a block to be full width, you don't need to apply a column span to it. Every block is 100% wide by default.

Secondly, you have to understand what's going on there. The mobile-first approach, recommended Singularity, suggests applying grid-spans using only the min-width media query. This means that styles, applied for a certain breakpoint, will persist for all larger breakpoints, unless you override them.

This allows you to omit spanning code at some breakpoints, if the layout desired at those breakpoints is identical to the layout of corresponding previous breakpoints.

For example, if have a varying number of columns: 2, 4, 6, 12, etc, but your blocks should always share 50%/50% of page width, you can apply spans only once for the smallest breakpoints.

There are two gotchas:

1. If you modify the number of breakpoints usually modifies gutter size, and spans applied at previous breakpoints become inconsistent with current breakpoint's gutters. To work around this, you might want to go for applying spans on every breakpoint, or you could reckon column and gutter sizes for every subsequent breakpoints in such combinations that gutter size relative to container width were consistent across all breakpoints.
2. Sometimes you might require that spans from the previous breakpoint do not apply to the current breakpoint. It is very tedious to cancel out Singularity spans by hand, so i suggest that, when you encounter such a need, you isolate your spans with min-width + max-width media queries, so that they don't pollute subsequent breakpoints.

Thirdly, you can use Breakpoint Slicer to simplify breakpoint management. It does not save you lines of code, but makes it easier to work with media queries.

Fourthly, if you're doing thumbnail grids (as opposed to page layouts), you can program a mixin that leverages loops to generate spans for all columns in all breakpoints with a single mixin call.

You can find demo of such a generated responsive thumbnail grid at the bottom of Breakpoint Slicer's test page. And here's the Sass code used to generate that grid.

That said, there's not much else you can do to reduce scaffolding necessary for responsive layouts. CSS is a very primitive and artless language that assumes lots of repeated statements. With Sass, you can reduce amount of code duplication in two cases:

1. If the repeated code is absolutely identical. Then you can use extends outside media queries or mixins inside media queries (the latter doesn't deduplicate CSS code but at least DRYes your Sass code).
2. If the repeated code has slight variations, but those variations are regular (i. e. follow a rule that can be programmed). Then you can write a looping mixin that generates repeating scaffolding with those regular alterations.

But when repeated scaffolding is supposed to differ irregularly (which is common for responsive page layouts), then you can't but do all the scaffolding by hand.

PS I've described my understanding of the matter. Don't assume that it is an absolute truth. Look for other opinions (that can differ from or extend my opinion) and try to dig into the matter deep enough to obtain your own opinion.

PPS Not directly related to your question, but try using the indented .sass syntax. It saves you a lot of routine with colons and braces, and after getting used to Sass you'll feel that coding .scss is a pain.

You can still use .scss occasionally. For example, it's a nuisance to do maps with the indented syntax, so i keep my maps in .scss partials and do everything else with .sass.