TYPO3 Gridelements, configuration by files without any database involvement

Gridelements Configuration

# Page TSConfig:
tx_gridelements.setup {
	# Identifier
	2col {
	title = 2 Spalten
	config {
		colCount = 2
		rowCount = 1
		rows {
		1 {
			columns {
			1 {
				name = Links
				colPos = 401
			}
			2 {
				name = Rechts
				colPos = 402
			}
			}
		}
		}
	}
	flexformDS = FILE:typo3conf/ext/theme/Configuration/TypoScript/_Base/Setup/Plugin/gridelements/gridelements_2col_flexform.xml
	}
}

gridelements_2col_flexform.xml

<T3DataStructure>
    <sheets>
        <sDEF>
            <ROOT>
                <TCEforms>
                    <sheetTitle>
                        Einstellungen
                    </sheetTitle>
                </TCEforms>
                <type>array</type>
                <el>
                    <columnType>
                        <TCEforms>
                            <label>Spaltenvarianten</label>
                            <config>
                                <type>select</type>
                                <renderType>selectSingle</renderType>
                                <items>
                                    <numIndex index="1">
                                        <numIndex index="0">1:1</numIndex>
                                        <numIndex index="1">cols-1-1</numIndex>
                                    </numIndex>
                                    <numIndex index="2">
                                        <numIndex index="0">1:2</numIndex>
                                        <numIndex index="1">cols-1-2</numIndex>
                                    </numIndex>
                                    <numIndex index="3">
                                        <numIndex index="0">2:1</numIndex>
                                        <numIndex index="1">cols-2-1</numIndex>
                                    </numIndex>
                                    <numIndex index="4">
                                        <numIndex index="0">1:3</numIndex>
                                        <numIndex index="1">cols-1-3</numIndex>
                                    </numIndex>
                                    <numIndex index="5">
                                        <numIndex index="0">3:1</numIndex>
                                        <numIndex index="1">cols-3-1</numIndex>
                                    </numIndex>
                                </items>
                            </config>
                        </TCEforms>
                    </columnType>
                    <color>
                        <TCEforms>
                            <label>Farbe der Section</label>
                            <config>
                                <type>select</type>
                                <renderType>selectSingle</renderType>
                                <items>
                                    <numIndex index="1">
                                        <numIndex index="0"></numIndex>
                                        <numIndex index="1"></numIndex>
                                    </numIndex>
                                    <numIndex index="2">
                                        <numIndex index="0">Grau</numIndex>
                                        <numIndex index="1">grey</numIndex>
                                    </numIndex>
                                    <numIndex index="3">
                                        <numIndex index="0">Grau medium</numIndex>
                                        <numIndex index="1">grey-medium</numIndex>
                                    </numIndex>
                                    <numIndex index="4">
                                        <numIndex index="0">Grau dunkel</numIndex>
                                        <numIndex index="1">grey-dark</numIndex>
                                    </numIndex>
                                    <numIndex index="5">
                                        <numIndex index="0">Braun dunkel</numIndex>
                                        <numIndex index="1">brown-dark</numIndex>
                                    </numIndex>
                                    <numIndex index="6">
                                        <numIndex index="0">Braun hell</numIndex>
                                        <numIndex index="1">brown-light</numIndex>
                                    </numIndex>
                                    <numIndex index="7">
                                        <numIndex index="0">creme</numIndex>
                                        <numIndex index="1">creme</numIndex>
                                    </numIndex>
                                    <numIndex index="8">
                                        <numIndex index="0">orange</numIndex>
                                        <numIndex index="1">orange</numIndex>
                                    </numIndex>
                                    <numIndex index="9">
                                        <numIndex index="0">rot</numIndex>
                                        <numIndex index="1">red</numIndex>
                                    </numIndex>
                                </items>
                            </config>
                        </TCEforms>
                    </color>
                </el>
            </ROOT>
        </sDEF>
    </sheets>
</T3DataStructure>

TypoScript.ts

# TypoScript for rendering in frontend

<INCLUDE_TYPOSCRIPT: source="FILE:EXT:gridelements/Configuration/TypoScript/setup.ts">

tt_content.gridelements_pi1.20.10.setup {
    # same identifier as in tsconfig
    2col < lib.gridelements.defaultGridSetup
    2col {
        columns {
            401 < .default
            401 {
                preCObject = CASE
                preCObject {
                    key.field = flexform_columnType
                    cols-1-2 = TEXT
                    cols-1-2 {
                        value = <div class="col-md-4">
                    }

                    cols-2-1 = TEXT
                    cols-2-1 {
                        value = <div class="col-md-8">
                    }

                    cols-1-3 = TEXT
                    cols-1-3 {
                        value = <div class="col-md-3">
                    }

                    cols-3-1 = TEXT
                    cols-3-1 {
                        value = <div class="col-md-9">
                    }

                    default = TEXT
                    default {
                        value = <div class="col-md-6">
                    }
                }

                wrap = |</div>
            }

            402 < .default
            402 {
                preCObject = CASE
                preCObject {
                    key.field = flexform_columnType
                    cols-1-2 = TEXT
                    cols-1-2 {
                        value = <div class="col-md-8">
                    }

                    cols-2-1 = TEXT
                    cols-2-1 {
                        value = <div class="col-md-4">
                    }

                    cols-1-3 = TEXT
                    cols-1-3 {
                        value = <div class="col-md-9">
                    }

                    cols-3-1 = TEXT
                    cols-3-1 {
                        value = <div class="col-md-3">
                    }

                    default = TEXT
                    default {
                        value = <div class="col-md-6">
                    }
                }

                wrap = |</div>
            }
        }

        # wrap some <section> and <div> and classes
        stdWrap.wrap.cObject = COA
        stdWrap.wrap.cObject {
            10 = COA
            10 {
                stdWrap.noTrimWrap = |<section class="section | section--padTopMedium section--padBottomMedium">|
                10 = CASE
                10 {
                    key.field = flexform_color
                    grey = TEXT
                    grey.value = section--grey-dark
                    grey-medium = TEXT
                    grey-medium.value = section--grey-medium
                    grey-dark = TEXT
                    grey-dark.value = section--grey-dark
                    brown-dark = TEXT
                    brown-dark.value = section--brown-dark
                    brown-light = TEXT
                    brown-light.value = section--brown-light
                    creme = TEXT
                    creme.value = section--creme
                    orange = TEXT
                    orange.value = section--orange
                    red = TEXT
                    red.value = section--red
                }
            }

            20 = TEXT
            20.value = <div class="container-fluid container-centered">

            # Render header of gridelements itself inside
            25 =<lib.stdheader

            30 = TEXT
            30.value = |</div></section>
        }
    }
}

Für neuere Versionen:
TypoScript.ts
<INCLUDE_TYPOSCRIPT: source="FILE:EXT:gridelements/Configuration/TypoScript/setup.typoscript">