FluidTYPO3 one-pager with sections

Sections.html

<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
	xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
	xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
	xmlns:flux="http://typo3.org/ns/FluidTYPO3/Flux/ViewHelpers">

	<f:layout name="Page" />

	<f:section name="Configuration">

		<!-- Make this page type configurable -->
		<flux:form id="sections">
			<flux:form.sheet name="sections">
				<flux:form.section name="sections">
					<flux:form.object name="section" label="{sectionTitle}">
						<flux:field.input name="sectionTitle" label="Section title" />
						<flux:field.checkbox name="fullWidth" label="Full-width" />
						<flux:field.checkbox name="fullWidthBackground" label="Full-width background" />
						<flux:field.input name="backgroundColor" label="Background color" >
							<flux:wizard.colorPicker />
						</flux:field.input>
					</flux:form.object>
				</flux:form.section>
			</flux:form.sheet>
		</flux:form>

		<!-- Define the backend layout -->
		<flux:grid>
			<!-- We have one fixed defined column on top -->
			<flux:grid.row>
				<flux:grid.column name="Slider" colPos="222" />
			</flux:grid.row>
			<!-- If we have sections in use -->
			<f:if condition="{sections -> f:count()} > 0">
				<f:for each="{sections}" as="section" iteration="iteration">
					<!-- Every section that has been configured in the sheet above will be output as a column in the backend layout -->
					<flux:grid.row>
						<flux:grid.column name="content.{iteration.index}" colPos="{iteration.index}" label="{f:if(condition: section.section.title, then: section.section.title, else: 'Content, section {iteration.cycle}')}" />
					</flux:grid.row>
				</f:for>
			</f:if>
		</flux:grid>
	</f:section>

	<f:section name="Main">
		<h1>The always present slider column</h1>
		<v:content.render column="222" />

		<f:for each="{sections}" as="sectionObject" iteration="iteration">
			<!-- We don't want to write sectionObject.section everytime, so we assign it to a temporary variable-->
			<v:variable.set name="section" value="{sectionObject.section}" />

			<f:if condition="{section.fullWidth}">
				<f:then>
					<div class="container-fluid" {f:if(condition: section.fullWidthBackground, then:'style="background-color: {section.backgroundColor};"')}>
						<h1 class="text-center">{section.sectionTitle} (colPos: {iteration.index})</h1>
						<v:content.render column="{iteration.index}" />
					</div>
				</f:then>
				<f:else>
					<div class="container" {f:if(condition: section.backgroundColor, then:'style="background-color: {section.backgroundColor};"')}>
						<h1 class="text-center">{section.sectionTitle} (colPos: {iteration.index})</h1>
						<v:content.render column="{iteration.index}" />
					</div>
				</f:else>
			</f:if>

		</f:for>
	</f:section>

</div>