Creating multiple grids

[jstoller]

I'm not sure if this a functionality issue or a documentation issue, but I started upgrading a website from Singularity 1.1.2 to 1.4.0 and immediately hit a wall when it came to using multiple grids in the same style sheets. I have five different grids on this site and I don't see any intuitive way of implementing that in the new version.

Previously I was able to variables for each of the grids and gutters, like so...

$page-grids: 2;
$page-grids: add-grid(3 at $breakpoint-xs-min);
$page-grids: add-grid(4 at $breakpoint-s-min);
$page-grids: add-grid(5 at $breakpoint-l-min);
$page-gutters: 0;

$copy-grids: 2;
$copy-grids: add-grid(4 at $breakpoint-xs-min, $copy-grids);
$copy-grids: add-grid(6 at $breakpoint-l-min, $copy-grids);
$copy-gutters: $gutter-width;

$front-grids: 1;
$front-grids: add-grid(2 at $breakpoint-2up-min, $front-grids);
$front-grids: add-grid(3 at $breakpoint-3up-min, $front-grids);
$front-grids: add-grid(4 at $breakpoint-4up-min, $front-grids);
$front-gutters: breakpoint-to-base-em($front-gutter-width);

...

But now this approach doesn't seem possible. The new add-grid() and add-gutter() mixins save their configuration to singular 'grids' and 'gutters' settings. These mixins do not take an optional variable, or setting name. I'm currently finding myself writing custom mixins of my own to accomplish the task, but that just feels like the wrong approach to me. This does not seem like an obscure use-case, so I assume I'm just missing something.

If there is an existing best practice method for defining multiple grids in the same file, then some documentation would be infinitely useful. If not, then I would strongly encourage you to add this functionality. I would be happy to help, to the best of my ability.

[Snugug]

I'm curious how you went about actually using this, as responsive grids were only ever suppose to work with the previously defined $grids variable. This functionality was never (intentionally) programmed into Singularity.

Either way, the recommendation is using layout mixin as outlined in the quickstart guide. We're working on a helper function to provide this type of functionality using layout and a custom map, but that's not finished yet.

[Snugug]

In the future, as per our Getting Help with Singularity section, questions should be posted on Stack Overflow, not here. The issue queue is reserved for bug reports and feature requests. I'm allowing this to stand as it (inadvertently) provides a place to track progress on said feature.

[jstoller]

I had a feeling that this was a feature request, rather than a help request, but I was allowing for the very really possibility that I just have no idea what I'm doing. :-)

In the case of my site as it currently stands, I had created custom mixins, using the layout() function, which replaced the standard grid-span() function. For instance:

@mixin front-layout {
  @include layout($front-grids, $front-gutters) {
    $gutter-styles: 'split' 'fixed';
    // All the things!
    @content;
  }
}
@mixin front-grid-span($span, $location) {
  @include front-layout {
    @include grid-span($span, $location);
  }
}

This lets me add some secret sauce into the layouts for the different grids, as needed, and makes them easier to use. Then in my layout I can do something like this...

#block-bean-front-page-message {
  margin-bottom: $front-gutters;
  @include breakpoint-1up() {
    width: 100%;
    padding: 0 $front-gutters/2;
  }
  @include breakpoint-2up-to-4up() {
    @include front-grid-span(1, 2);
  }
  @include breakpoint-4up(true) {
    @include front-grid-span(3, 2);
  }
}

I'm also using custom wrapper mixins for the breakpoints here, but you get the idea.

It looks like the layout() function works similarly, but before I had variables I could pass to layout() that contained the grid and gutter settings. Now that the way these settings are saved has changed, I'm not sure how to make layout() work anymore.

I can post the question of how to do this in v1.4 on Stack Overflow (if it's even possible), but at least this gives you a real-world use case when you're working on the new feature. Hopefully that helps.

[jstoller]

It looks like I'm able to achieve what I'm after by overriding the add-grid(), add-gutter(), and add-gutter-style() mixins like so:

@mixin add-grid($grid-definition, $grid-key: 'grids') {
  $Grid-Map: ();
  @if sgs-has($grid-key) {
    $Grid-Map: sgs-get($grid-key);
  }
  @else {
    $New-Map: sgs-set($grid-key, $Grid-Map)
  }
  $Add-Grid: add-grid($grid-definition, $Grid-Map);
  $HOLDER: sgs-set($grid-key, $Add-Grid);
}

@mixin add-gutter($gutter-definition, $gutter-key: 'gutters') {
  $Gutter-Map: ();
  @if sgs-has($gutter-key) {
    $Gutter-Map: sgs-get($gutter-key);
  }
  @else {
    $New-Map: sgs-set($gutter-key, $Gutter-Map)
  }
  $Add-Gutter: add-gutter($gutter-definition, $Gutter-Map);
  $HOLDER: sgs-set($gutter-key, $Add-Gutter);
}

@mixin add-gutter-style($gutter-style-definition, $gutter-style-key: 'gutter styles') {
  $Gutter-Style-Map: ();
  @if sgs-has($gutter-style-key) {
    $Gutter-Style-Map: sgs-get($gutter-style-key);
  }
  @else {
    $New-Map: sgs-set($gutter-style-key, $Gutter-Style-Map)
  }
  $Add-Gutter-Style: add-gutter-style($gutter-style-definition, $Gutter-Style-Map);
  $HOLDER: sgs-set($gutter-style-key, $Add-Gutter-Style);
}

Then I can define my grids like this...

@include add-grid(2, 'copy grids');
@include add-grid(4 at $breakpoint-xs-min, 'copy grids');
@include add-grid(6 at $breakpoint-l-min, 'copy grids');
$copy-grids: sgs-get('copy grids');
@include add-gutter($gutter-width, 'copy gutters');
$copy-gutters: sgs-get('copy gutters');

@include add-grid(2, 'front grids');
@include add-grid(2 at $breakpoint-2up-min, 'front grids');
@include add-grid(3 at $breakpoint-3up-min, 'front grids');
@include add-grid(4 at $breakpoint-4up-min, 'front grids');
$front-grids: sgs-get('front grids');
@include add-gutter($front-gutter-width-em, 'front gutters');
$front-gutters: sgs-get('front gutters');
$front-gutter-styles: 'split' 'fixed';

...giving me variables which I can pass into the layout function. Right now everything seems to be working, except for the gutter styles, which don't seem to have any effect on output, but I suppose that's a different issue.

Would you be open to incorporating these changes to the mixins into Singularity? It provides significant additional functionality without breaking backward compatibility.

[Snugug]

If you could issue a pull request and make sure none of our tests break while adding this, and add tests to cover this functionality as well, that would be fantastic.