Having to re-declare global context?

Question

I'm sure I've missed something obvious... it seems like I'm having to re-declare my context for some elements. I have the following declared in global variables:

// General breakpoints
$bp1: 500px;
$bp2: 700px;
$bp3: 900px;
$bp4: 1100px;

// Grids and gutters
$grids: 3;
$grids: add-grid(6 at $bp1);
$grids: add-grid(12 at $bp3);

When I try to position an element within my footer, it won't work unless I declare the optional context variable, eg.

footer .block-webform {
    @include grid-span(8, 5, 12);
}

Without the last value, the element doesn't show where I've put it on the global grid. (This is at >900px width, of course.) I thought I'd only need to specify context if I'm trying to change it from the global.

Have I missed something in my global context declaration?

Thanks in advance for your help!

ST

Answer 1

If the footer is using a different context (total number of grids) from the one preceding it, you have to state the new context (number of grids). So you have to tell it number of grids, starting at which grid, and total grids, as you are doing.

Answer 2

i struggled (and still am struggling a bit) with this question, since i was wondering the same thing (i.e. why do i have to keep passing around the global grid context?) when making nested grids. what i have discovered is that when using only grid-span, you need to always keep track and pass in the grid context for sub grids. check out this example:

Singularity nested columns using grid-span

it only uses grid-span to create containers and nested grids, and since i have nested grids/contexts i have to continually pass in as the third argument to grid-span the current number of grids to indicate which container/context i am in. this seems like what you already discovered.

however, as discussed in the Singularity wiki (which i cannot post a link to since i do not have enough reputation points, but it can be found under the sub-heading "Context Overrides") there is a layout mixin which i believe helps with this. now see the same example as above but using the layout mixin to create nested grids:

Singularity nested columns using layout+grid-span

in this example i use the layout mixin to create a new grid context when i want a nested grid/sub grid/etc.. inside the layout mixin the grid-span mixins will use whatever layout sets, thus eliminating the need to keep track of the number of grids and pass it as the third argument to grid-span.

hopefully this helps, as i struggled awhile with this myself and only recently was able to replicate nested grids using the layout mixin. of course, i am pretty new to Singularity/SASS/etc. so i would not recommend these examples as a best practice or anything. perhaps an expert can chime in with additional details?

good luck.