I posted a month ago asking if anyone has any templates to share that work with the wizard. Would still love to see some examples of how people have leveraged the wizard templating system. Original post.

Update

My struggle has been to figure out how to reference in my design the elements in single column and multi-column sections. Nothing seemed to work right. Since the documentation is pretty light on what the wizard outputs as code for the email I went ahead and created the most basic wizard template I could:

<div class="structure-dropzone">
    <div class="dropzone">
    </div>
</div

Creating a new communication, using that template, I was able to see what code gets output and discovered why I was having such a difficult time targeting elements for visual styling and layout. If anyone else is trying to do this, you'll need to convert the base64 that Rock creates (https://www.base64decode.org/).

What I found

The two column (and I presume 3 column and sidebar) elements are laid out in a table with a class of "row" with the grid classes according to the appropriate columns:

<td class="dropzone columns large-6 small-12 first width="50%" valign="top">

More or less, that's what I expected to see. Bu the single column section doesn't do this. This has caused me some headache as I'm trying to build a template that can rely solely on the editor without having to add tables surrounding the dropzones which would add extra space and possibly cause issues with responsiveness and ultimately not be removable by the end users (who are not technical or code savvy at all).

So what?

I'm curious if this was done on purpose? I think semantically that if the multi-column sections include the table class="row" then the single column section should include it as well. Is it possible to edit what the section buttons generate? I'd assume it's part of the compiled code in the core of Rock. 

I'd love it to output the following for single column sections. This would result in wide compatibility with designs, and fit with the other multi-column sections.

<div class="component component-section" data-state="component">
    <table class="row" width="100%">
        <tbody>
            <tr>
                <th class="dropzone columns large-12 small-12 first last" width="100%">
                    <!-- component text, image, divider, or button -->
                </td>
            </tr>
        </tbody>
    </table>
</div>

Something else that tripped me up is that the Zurb Foundation styling relies on <th> for defining columns. It appears Rock generates columns using <td> in the wizard template. It's easy to correct in the CSS, but may trip up any table in an email that's not meant for layout. It also adds an extra step in templating. 

If I'm wrong in my understandings about how this is supposed to work, please correct me. My goal is to create some templates that are easily re-brandable that can be either packaged with Rock or shared here or on the Rock shop.