Typo3 Grid FCE

{namespace v=FluidTYPO3\Vhs\ViewHelpers}
{namespace flux=FluidTYPO3\Flux\ViewHelpers}

<f:layout name="Content" />

<f:section name="Configuration">
  {v:variable.typoscript(path: 'plugin.tx_fluidcontentbootstrap.settings') -> v:variable.set(name: 'settings')}
  {f:if(condition: settings.gridColumns, then: settings.gridColumns, else: 12) -> v:variable.set(name: 'numberOfColumns')}
  <v:variable.set name="types" value="{1: 'none', 2: 'Bottom to Top', 3: 'Top to Bottom'}"/>
  <flux:form id="row" label="Grid" options="{icon: '../typo3conf/ext/rm_client/Resources/Public/Icons/', group: 'FCE'}">
    
    <flux:form.sheet name="gridoptions" label="Grid Options">
      <flux:field.checkbox name="settings.fluid" label="fluid Row" />
      <flux:field.checkbox name="settings.wrapper" label="Dont Render Row Wrapper" />
      <flux:form.section name="columns">
        <flux:form.object name="column">
          <flux:field.select name="class" items="{f:render(section: 'Value', arguments: {iteration: iteration})
              -> v:iterator.loop(count: numberOfColumns, iteration: 'iteration', minimum: 1)}" label="Columns: numberOfColumns" />
          <flux:field.checkbox name="addWell" label="add well Class" />
          <flux:field.select name="parallax" label="Parallax Direction" items="{types}">
            <!-- tag content - may be ignored! --> 
          </flux:field.select>
          <flux:field.input name="additionalClass" label="additional Class" />
        </flux:form.object>
      </flux:form.section>
      <flux:grid>
        <flux:grid.row>
          <f:for each="{columns}" as="sectionObject" iteration="iteration">
            <v:variable.set name="width" value="{sectionObject.column.class -> v:format.substring(start: 7)}" />
            <v:variable.set name="percent" value="{width  -> v:math.division(b: numberOfColumns) -> v:math.product(b: 100) -> v:math.round(decimals: 2)}" />
            <flux:grid.column name="column{iteration.cycle}" style="width: {percent}%" label="{percent}%"></flux:grid.column>
            <v:variable.set name="prlxeffect" value="{sectionObject.column.parallax}" />
          </f:for>
        </flux:grid.row>
      </flux:grid>
      </flux:form.sheet>
  </flux:form>
</f:section>

<f:section name="Main">
  <f:if condition="{settings.wrapper}">
    <f:then>
      <f:for each="{columns}" as="sectionObject" iteration="iteration">
        <f:switch expression="{sectionObject.column.prlxeffect}">
          <f:case value="0"><div class="{sectionObject.column.class} {sectionObject.column.additionalClass}"></f:case>
          <f:case value="1"><div class="{sectionObject.column.class} {sectionObject.column.additionalClass} parallax prlx-btt"></f:case>
          <f:case value="2"><div class="{sectionObject.column.class} {sectionObject.column.additionalClass} parallax prlx-ttb"></f:case>
        </f:switch>
          <flux:content.render area="column{iteration.cycle}" />
        </div>
      </f:for>
    </f:then>
    <f:else>
      <div class="row{f:if(condition: settings.fluid, then: '-fluid')}">
        <div class="container">
          <f:for each="{columns}" as="sectionObject" iteration="iteration">
              <f:switch expression="{sectionObject.column.prlxeffect}">
                <f:case value="0"><div class="{sectionObject.column.class} {sectionObject.column.additionalClass}"></f:case>
                <f:case value="1"><div class="{sectionObject.column.class} {sectionObject.column.additionalClass} parallax prlx-btt"></f:case>
                <f:case value="2"><div class="{sectionObject.column.class} {sectionObject.column.additionalClass} parallax prlx-ttb"></f:case>
              </f:switch>
              <flux:content.render area="column{iteration.cycle}" />
            </div>
          </f:for>
        </div>
      </div>
    </f:else>
  </f:if>
</f:section>

<f:section name="Preview">
  <flux:widget.grid />
</f:section>

<f:section name="Value">col-md-{iteration.cycle}{f:if(condition: iteration.isLast, else: ',')}</f:section>