Multiple grid definitions with Singularity - singularitygs

Question

I've looked at the documentation for Singularity and it seems the recommended way of having multiple grids is to use the layout mixin, but I have been doing it differently.
when I say multiple grids I'm referring to a page that has different number of columns for different page sections, withing the same media query.
My question is, I have been reusing #include add-grid() in my containers to use multiple grids, is that an acceptable way to use sngularitygs? I have found no examples of using it this way, but it seems to work quite well.
.container {
#include add-grid(16);
}
I'm only seeing the add-grid used to set the global grid, is it unwise to use it for adding another grid inside a container as above?
also I have turning on the bg grid in containers to visualize the nested grids.
.container {
#include sgs-change('debug', true);
#include add-grid(16);
#include background-grid();
}
It seems to work great for visualizing the grid in containers, but I see no usage of these mixins in this way in the docs, any reason this is wrong or is there a better way?
thanks.

Answer 1

Singularity stores grid properties in some internal variable.
Whenever you use add-grid(), this variable is updated with new grid properties.
If you use add-grid() once, all Singularity spanning mixins called below will use that definition.
What happens when you use add-grid() again? It will not affect the code above. But the code below will use the new definition of the grid.
Thus, there are two strategies of using add-grid():
Use it once to set one definition all the time.
If you need different grids, use add-grid() every time before calling a Singularity spanning mixin. This will ensure that each mixin uses an appropriate grid definition.
The latter is probably not an intended way of doing things, but if you've got multiple grids to work with, you've got no other option.
I'm using this approach extensively on the good old Singularity 1.1. But it's much simpler there: the variable that stores grid properties is exposed and can be easily and transparently overridden. I'm not sure about the drawbacks of this with the modern version of Singularity. Grid definitions for specific media-queries may stay unresetted and cause trouble. Gotta dig deeper.
UPD1 2014-06-18
Okay, i seem to have figured it out.
How Singularity stores its settings
Singularity 1.2 stores its settings in the $singularity map. It uses the sgs-get() and sgs-set() functions to access those settings. The funny thing with functions is that you can't use them withough assigning a value somewhere, so you can't do:
sgs-set('foo', 'bar')
You have to assign the result of the function to a dummy variable, even if you're not going to reuse that anywhere:
$dummy: sgs-set('foo', 'bar')
How to manually reassign grid definitions
Grids and gutters are stored under 'grids' and 'gutters' keys of the $singularity map. So in order to mix multiple grids on the same page you have to reset those.
Luckily, there is sgs-reset() that exists both in function and mixin forms.
So before declaring a different grid, you have to reset existing grid:
+sgs-reset(grids)
+sgs-reset(gutters)
+add-grid(2 4 2)
+add-gutter(0.2)
A custom mixin to quickly reassign grids
That is a fair amount of work. You can make it easier with a custom mixin:
=reset-grid($grid: 2, $gutter: 0.1)
+sgs-reset(grids)
+sgs-reset(gutters)
+add-grid($grid)
+add-gutter($gutter)
Here's a usage example:
.container-1
+reset-grid()
#foo
+grid-span(1,1)
#bar
+grid-span(1,2)
.container-2
+reset-grid(1 3 2, 0.2)
#baz
+grid-span(1,1)
#quux
+grid-span(2,2)
Resulting CSS: http://sassmeister.com/gist/21249a9dabf745f892cb
Note that if you use the approach of resetting your grids once in your project, you HAVE to use it everywhere in your project. If you don't apply reset prior to every spanning, you might have unpredictable results.
That's because you no longer have a standard site-wide grid and you have to tell Singularity which grid you mean to use every time you ask Singularity to span anything.
Manually using that mixin inside media queries instead of maintaining a complex grid definition
On the other hand, once you're resetting your grids all the time, you no longer need to define media query-aware grids. I find this to be a relief. Managing the consitency of a complex grids hierarchy can be a nuisance.
.container-1
+reset-grid()
#foo
+grid-span(1,1)
#bar
+grid-span(1,2)
+breakpoint(700px)
+reset-grid(3, 0.2)
#foo
+grid-span(2,1)
#bar
+grid-span(1,2)
Resulting CSS: http://sassmeister.com/gist/19f8ad9dab904cfcabba
A custom mixin to quickly span a thumbnail grid
You can save yourself even more time if you're doing a lot of thumbnail grids, as opposed to page layouts. Here's a mixin that generates a thumbnail grid for a given number of columns (works with symmetrical grids only):
=quick-span($cols, $guts: 0.1, $pseudoclass: child, $center-last-row: 20, $proportional-margins: true)
+reset-grid($cols, $guts)
#for $i from 1 through $cols
&:nth-#{$pseudoclass}(#{$cols}n+#{$i})
+float-span(1, $i)
#if $i == 1
clear: both
#if $proportional-margins
&:nth-last-#{$pseudoclass}(#{$i})
margin-bottom: 0
#if $proportional-margins
margin-bottom: $guts / ( $cols + ($cols - 1) * $guts) * 100%
// Centering the last row
#if $center-last-row and $cols < $center-last-row
#for $i from 1 through $center-last-row
$remainder: $i % $cols
&:nth-#{$pseudoclass}(#{$i - $remainder + 1}):nth-last-child(#{$remainder})
margin-left: grid-span(1, 1) * ($cols - $remainder) / 2
Demo: http://sassmeister.com/gist/62f44e02a2fbb3bd4296
A custom mixin to set up a responsive thumbnail grid with a snap of fingers
Finally, you can put this looping mixin in a one more loop to generate responsive thumbnail grids. Here's an example leveraging Breakpoint Slicer, a syntactic sugar for Breakpoint:
=responsive-span($start-cols: 1, $start-slice: 1, $guts: 0.1)
#for $i from 1 through (total-slices() - $start-slice + 1)
$slice: $start-slice + $i - 1
$cols: $start-cols + $i - 1
+at($slice)
+quick-span($cols, $guts)
A single call of this mixin results in a full-fledged responsive thumbnail grid!
.column
+responsive-span
Demo: http://sassmeister.com/gist/acef490deb922535ef19