Suggestion: high-level #block function

[jayf]

I'm starting to work with GGS, and I wanted a simpler way to define the width of blocks in relation to the grid. So, rather than thinking about the margins on a block, and rather than thinking about the low-level 18 columns, I wanted to be able to declare: make a block that is 8 columns wide for the 8 column grid.

Here's what I came up with, using Less:

#block (@left_col, @span, @colcnt: 4) {
    @fold: 16/@colcnt;
    margin-left: @column + ((@left_col - 1) * @fold * @column);
    margin-right: @column + (16/@fold - (@left_col - 1) - (@span)) * @fold * @column;

}

@4cols: 4;
@8cols: 8;
@16cols: 16;

Then, it's used like:

/* @media screen and (min-width: 1200px) */
@media screen and (min-width: 75em) {

    header {
        #block(1,8,@8cols); // an 8 column wide block for the 8 column grid
    }
}

/* @media screen and (min-width: 1872px) */
@media screen and (min-width: 117em) {

    header {
        #block(4,8,@16cols); // an 8 column wide block for the 16 column grid
    }
}

Note the first parameter sets on which column the block starts (assuming it clears to a new row--I haven't really thought this through relative to floating blocks yet).

I wanted to find some way to not have to reference the @8cols, etc., in each rule. It seems like the ideal would be that, based on the context in the CSS, the mixin would "know" if the rule was in the context of a 4, 8, or 16 column grid. Less does support scoping in the media queries, which I played with. But, using the global @4cols, @8cols, and @16cols seemed clearer and easier to maintain, albeit a bit less elegant.

What do you think about adding something like this to GGS?

I'd appreciate any feedback about the semantics of how this mixin and parameters are named vs what it's meant to do. And, also if there are any Less tricks that might make this more streamlined.

Thanks!

[jayf]

Having slept on this, I've forked and am going to create several mixins to add 2-3 higher levels of abstraction for defining how chunks sit as rows or columns on each 4/8/16 grid. I'd like to see if I can create and use a very high, design-oriented, level of abstraction, like "guides" and/or "zones," but know I'll also need some not quite as high-level mixins for rows and columns, too.

So, not sure yet if these are going to be anywhere near boilerplate-worthy, or just specific to how I work!