Overlapping Grids with Singularitygs

Question

I was wondering if there was a way to do overlapping grids with Singularity.gs, like in Grid Set App?

I'd like to overlay two 2-column grids based on the golden ratio.

e.g.

$grids: 1.618 1

and

$grids: 1 1.618

Answer 1

We do have a compound grid function in the singularity-extras plugin. This only works with overlapping uniform columns though, not non-uniform columns.

That said, $grids: 1 .382 1; should get you what you are looking for. The golden section is pretty fun to divide things with because every part is still on the same scale making this calculation a little easier.

If you wish to write a function to make any of this easier please do. It’s as easy as writing a function that spits out a list of numbers.

Answer 2

Or you can just redefine $grids.

For such a basic usage this looks kinda hackish, but when you have to combine very different grids on a single page (e. g. golden ratio with large gutters + a thumbnail grid with small gutters), i find this approach invaluable:

<section id=left>
    <div class=column>Foo</div>
    <div class=column>Bar</div>
</section>

<section id=right>
    <div class=column>Foo</div>
    <div class=column>Bar</div>
</section>

 

@import compass
@import singularitygs

.column
  background-color: pink
  margin-bottom: 1em

section
  +pie-clearfix



.column

  #left &
    $grids: 1.612 1

    &:nth-child(1)
      +grid-span(1, 1)
    &:nth-child(2)
      +grid-span(1, 2)

  #right &
    $grids: 1 1.612

    &:nth-child(1)
      +grid-span(1, 1)
    &:nth-child(2)
      +grid-span(1, 2)

Demo: http://sassbin.lolma.us/gist/5663129/