Layout de grade com Plone e Diazo

Ao usar um layout de grade em um tema Diazo, pode ser um pouco complicado quando você pode ter de 1 a 3 colunas. Isso pode ser resolvido usando variáveis ​​e vários layouts, mas esse método usa apenas regras e um único arquivo HTML. Este exemplo específico usa a estrutura responsiva Foundation.

Em 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>

As regras:

<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>