Grid Layout with Plone and Diazo

When using a grid layout in a Diazo theme, it can get a bit tricky when you can have 1-3 columns. This can be solved using variables and multiple layouts, but this method uses only rules and a single HTML file. This particular example uses the Foundation responsive framework.

In index.html:

<!-- three columns -->
<div class="large-6 push-3 columns mainContent col3"></div>
<div id="leftBar" class="large-3 pull-6 columns col3"></div>
<div class="large-2 right columns panel col3"></div>

<!-- two columns; right portlets -->
<div class="large-9 columns mainContent colr2"></div>
<div class="large-2 right columns panel colr2"></div>

<!-- two columns; left portlets -->
<div class="large-9 push-3 columns mainContent coll2"></div>
<div id="leftBar" class="large-3 pull-9 columns coll2"></div>

<!-- one column -->
<div class="large-12 columns mainContent col1"></div>

The rules:

<rules css:if-content="#portal-column-one">
    <rules css:if-content="#portal-column-two">
        <after css:theme-children=".col3.mainContent"
               css:content="#portal-column-content" />
        <after css:theme-children=".col3#leftBar"
               css:content="#portal-column-one"/>
        <after css:theme-children=".col3.right"
               css:content="#portal-column-two"/>
        <drop css:theme=".colr2, .coll2, .col1"/>
    </rules>
    <rules css:if-not-content="#portal-column-two">
        <after css:theme-children=".coll2.mainContent"
               css:content="#portal-column-content" />
        <after css:theme-children=".coll2#leftBar"
               css:content="#portal-column-one"/>
        <drop css:theme=".col3, .colr2, .col1"/>
    </rules>
</rules>
<rules css:if-content="#portal-column-two">
    <rules css:if-not-content="#portal-column-one">
        <after css:theme-children=".colr2.mainContent"
               css:content="#portal-column-content" />
        <after css:theme-children=".colr2.right"
               css:content="#portal-column-two"/>
        <drop css:theme=".col3, .coll2, .col1"/>
    </rules>
</rules>
<rules css:if-not-content="#portal-column-two">
    <rules css:if-not-content="#portal-column-one">
        <after css:theme-children=".col1.mainContent"
               css:content="#portal-column-content" />
        <drop css:theme=".col3, .coll2, .colr2"/>
    </rules>
</rules>