Cacher is the code snippet organizer for pro developers

<!-- Start: grid_rowTpl_simpleText -->
<div class="[[!grid_classes? &docid=`[[+id]]`]]">
[[+longtitle:notempty=`
<h2>[[+longtitle]]</h2>
`:default=``]]
[[+content]]
</div>
<!-- End: grid_rowTpl_simpleText -->

<!-- Start: grid_rowTpl_image -->
<div class="[[!grid_classes? &docid=`[[+id]]`]]">
    <p>
        <a class="th radius" href="#" data-reveal-id="modal[[+id]]">
            <img src="[[+grid_image]]" alt="[[+pagetitle]]" />
        </a>
    </p>
    [[+pagetitle:notempty=`
        <p class="caption">
            <strong>
                [[+pagetitle]]
                [[+longtitle:notempty=`
                    <small>[[+longtitle]]</small>
                `]]    
            </strong>
        </p>
    `:default=``]]        

</div>
[[!append? &input=`
<div id="modal[[+id]]" class="reveal-modal medium">
        <img src="[[+grid_image]]" alt="[[+pagetitle]]">
        <h1>[[+pagetitle]]</h1>
        <div>[[+description:nl2br]]</div>
        <a class="close-reveal-modal">&#215;</a>
</div>
`]]
<!-- End: grid_rowTpl_image -->

/*
[[grid? &docid=`[[+wf.id]]`]]
*/

$resource = $modx->getObject('modResource',$docid);

$values = array(
 'large'            => $resource->getTVValue(6)
,'large-centered'   => $resource->getTVValue(11)  
,'large-offset'     => $resource->getTVValue(7)

,'small'            => $resource->getTVValue(5)
,'small-centered'   => $resource->getTVValue(12)
,'small-offset'     => $resource->getTVValue(8)

,'pull'             => $resource->getTVValue(10)
,'push'             => $resource->getTVValue(9)
,'tplTV'            => $resource->getTVValue(4)
);

$gridClasses = array();

foreach($values as $key => $value){
    if($value != "0"){
        if($value != 'centered'){
        $gridClasses[] = $key."-".$value;
        }
        else{
        $gridClasses[] = $key;
        }
    }
}

$output = implode(" ", $gridClasses)." columns";

return $output;

<?php
/*
createGrid

Create a foundation grid using the children of a resource as rows and grandchildren as columns.

Usage: [[createGrid? &docid=`` &outerTpl=`` &tplTV=`` &fields=``]]

&outerTpl=`` A standard chunk <div class="row">[[+cols]]</div>
&tplTV=`` Specify the name of a tv. Defaults to "tplTV"
&processTVs=`` Comma delimited list of TVs that have to be processed (every TV with an output function).
*/

$id = $modx->resource->get('id');

$fields     = !empty($fields)       ?   $fields   : 'id,parent,pagetitle,longtitle,content,template,introtext,description';
$tplTV      = !empty($tplTV)        ?   $tplTV    : "tplTV";
$outerTpl   = !empty($outertpl)     ?   $outerTpl : 'grid_outerTpl';
$processTVs = !empty($processTVs)   ?   $processTVs : "";

$processTVs = explode(",", $processTVs);
$fields     = explode(',', $fields);

$output     = "";

$test       = 1;

/* get rows */


$rows = $modx->getChildIds($id,1);

/* get columns */
foreach($rows as $key => $row){

    $cols = "";

    /*
        2do Add sortby:
        http://rtfm.modx.com/display/revolution20/Templating+Your+Snippets
    */
    
    /* first, build the query */
    $c = $modx->newQuery('modResource');

    /* we only want published and undeleted resources */
    $c->where(array(
        'published' => true,
        'deleted' => false,
    ));

    /* get all the children of the current row */
    $children = $modx->getChildIds($row);
    if (count($children) > 0) {
        $c->where(array(
            'id:IN' => $children,
        ));
    }

    /* sort by menuindex ascending */
    $c->sortby('menuindex','ASC');

    /* get the resources as xPDOObjects */
    $resources = $modx->getCollection('modResource',$c);

    foreach($resources as $item) {
        
        //Get fields and tvs of the current resource
      $tvs = array ();

        //Add resource fields
        foreach($fields as $key => $value){
            $tvs[$value] = $item->get($value);
        }
        

	    //Add template variables
	    $templateVars = $item->getMany('TemplateVars');

	    foreach ($templateVars as $tv) {
		    //Get the content of the TV
            if(in_array($tv->get('name'), $processTVs)){
		        $tvContent = $tv->renderOutput($item->get('id'));
            }
            else{
                $tvContent = $tv->getValue($item->get('id'));
            }

		    //add the content to the array for the chunk
		    $tvs [$tv->get('name')] = $tvContent;
	    }
        
        $tpl = !empty($tvs[$tplTV]) ? "grid_rowTpl_".$tvs[$tplTV] : "grid_rowTpl";        

	        //Get the tpl chunk
	        $chunk = $modx->getObject('modChunk',array('name' => $tpl));

	        //Process the chunk to get the output of the current column
	        $cols .= $chunk->process ($tvs);
  
    }

    $columns['cols'] = $cols;
    
        //Get the rowTpl chunk
        $outerChunk = $modx->getObject('modChunk',array('name' => $outerTpl));
    
        //Process the chunk to get the current row including all columns
        $output .= $outerChunk->process ($columns);

}

return $output;

1. Add grid.php and gridclasses.php to your modx snippets.

2. Create templates
--------------------------------------
* grid (for the resource that will be shown on your homepage)
* row (hidden, used as row container. You may use an empty template)
* column (hidden, used as column container. You may use an empty template) 

Note: You may use as many different types of columns templates as you like.

3. Create a TV listing all column types:
-------------------------------------
type: selectlist
option values: default||simple_text||image||...
default value: default

4. Create Number TVs for pull, push, offset-small, offset-large, width-small, width-large:
---------------------------------------------------------------------------------------
type: number
min: 0
max: 12
default value: 0

5. Create radiobuttons for large-centered and small-centered:
----------------------------------------------------------
option values: Yes==centered||No==0
default: 0

(use form customization to move all TVs to a special tab)

6. Create template chunks for each output type:
--------------------------------------------
* grid_rowTpl_default
* grid_rowTpl_simple_text (see below)
* grid_rowTpl_image (see below. Includes a caption and a nice reveal lightbox effect)
...

7. Include your grid snippet in your "grid" template:

  [[createGrid`
    &tplTV=`tplTV`
  ]]

  Note: By default TVs are not processed. Only raw values are used. 
  If you want to use TVs that have to be processed, you have to add them to &processTVs=``

  Note 2: By default id,parent,pagetitle,longtitle,content,template,introtext,description are included in your output. 
  If you need more variables, just use &field to create your own list. 
  Keeping your list as short as possible will save you some execution time.

8. Create a new page, fore example: "about us". This will be our grid resource.

9. Create as many row children below it.

10. Add column resources to those rows. Use tplTV and templates to create individual columns. The result should look like this:

* about us
** row1
*** col1
*** col2
*** col3
** row 2
*** col1
*** col2
*** col3

11. Enjoy.