Push/Pull elements from their grid containers

Question

Is it possible to pull elements from their containers, while keeping them aligned with the main grid?

In the image bellow, I have a representation of what im trying to achieve. Lets say all my text, including the smaller details in the first column, are on a container which spans columns 2 and 3. Then, I want the smaller text to pull from that container one column to the left, effectively moving to column 1, while keeping alignment with the lead copy.

The red boxes are the main grid, the blue would be inner container elements.

Is this possible with Singularity?

Answer 1

This is entirely possible with Singularity!

To pull the element out of its container just use a negative margin. But proper width and margin sizes require some tricky math:

<div id=container>
  <div id=a>a</div>
  <div id=b>b</div>
  <div id=c>c</div>
</div>

$grids: 1 2 2
$gutters: .25


#container
  +grid-span(2,2)

#b
  $coefficient: (1 + 2 + 2) / (2 + 2)
  $width: column-span(1, 1) * $coefficient
  $gutter: gutter-span() * $coefficient

  width: $width
  margin-left: 0 - $width - $gutter

  float: left
  clear: both

+layout(2 2)
  #a, #c
    +grid-span(2, 1)

Result:

Demo: http://sassbin.com/gist/6953993/

Note that the width and position of the pulled column do not match the grid perfectly. This might be due to rounding errors in browsers, or my math might be wrong.