Compound grid logic

compound.sass

function compound($c1: 1, $c2: 1, $c3: 1, $c4: 1, $c5: 1, $c6: 1)
  $common-multiple: ($c1 * $c2 * $c3 * $c4 * $c5 * $c6)
  $compound-grid: ()
  $compound-counter: 1
  @for $i from 1 through $common-multiple
    $add-col: false
    @if $c1 !=1
      @if $i / $c1 == round($i / $c1)
        $add-col: true
    @if $c2 !=1
      @if $i / $c2 == round($i / $c2)
        $add-col: true
    @if $c3 !=1
      @if $i / $c3 == round($i / $c3)
        $add-col: true
    @if $c4 !=1
      @if $i / $c4 == round($i / $c4)
        $add-col: true
    @if $c5 !=1
      @if $i / $c5 == round($i / $c5)
        $add-col: true
    @if $c6 !=1
      @if $i / $c6 == round($i / $c6)
        $add-col: true
    @if $add-col
      $compound-grid: join($compound-grid, $compound-counter)
      $compound-counter: 1
    @else
      $compound-counter: $compound-counter + 1
  @return $compound-grid

by compound do you mean columns of varied width, or one grid imposed ontop of another grid, like the Gerstner? http://gridsetapp.com/specs/gerstner.php

One grid on top of another. Varied width is already handled, this writes a list describing the relative widths of the overlaid columns. The grid function can then interpret that.

How it works:

• Find a common resolution for the grid (common multiple). A compound of 3 and 4 columns is a resolution of 12.
• Next it counts through the columns, marking where the columns should fall. (1, 2, 3|, 4|, 5, 6|, 7, 8|, 9|, 10, 11, 12|)
• result: 3, 1, 2, 2, 1, 3 or a more visual representation — |   | |  |  | |   |

There you have it, a compound of a 3 and 4 column grid ready to plug into the $columns variable here: https://github.com/scottkellum/Singularity/blob/grid-refactor/stylesheets/singularity/_grid.sass

Very awesome! After seeing the Gerstner I was going to ask if anyone had thought of doing compound grids....seems you beat me to it :)

How do you call those in your Sass include?

Already merged with the singularity branch. So @import the _grid file in that branch, set $columns: compound(6, 4) or whatever grids you want to compound (up to 6 grids can be compounded).

Now use width: grid-span($span, $start-location) or how ever many columns you want where ever you want it to start.

You can also use the mixin +span-grid($span, $start-location). It has a built in counter if you are going from left to right so you don’t need to use the location at all if you start on the first column and end at the last column.