Mistakes of the past: how we systematically replace Gridelements

This is the first part of a small blog series in which we want to show you our switch from Gridelements to containers and custom content elements.

It's not about badmouthing a long proven extension, but about learning from past mistakes when using it.

In the beginning, we will take a self-critical look back at past working methods before presenting our current concept.

As you know, a website consists of a wide variety of content: Text, images, and interactive elements. The TYPO3 core provides some content elements, such as the versatile element "Text & Media".

For often-demanded modules like an Accordion or a Slider/Carousel, you can create custom content elements.

Some TYPO3 projects have existed far longer than the fluid templating we love today. In the days of css_styled_content, frontend rendering was still configured via TypoScript.

For some content, we have always defined custom CTypes, tailored to the specific purpose. For other elements, we extended them with layouts or frame classes.

The Gridelements extension has also served us faithfully for many years. Its feature list is long; but in addition to creating multi-column containers, we also used Gridelements to configure special content elements. And that's where the problems began.

The desired appearance can be achieved in this way. But it also means: the same content element provides completely different output depending on its position in the layout. This behavior is not exactly intuitive for editors.

For us developers, templating via TypoScript is not something we enjoy either. Do I also want to talk about multiple nested elements and flexform settings? I'd rather not.

Of course, the extension is not to blame for our interpretation of Gridelements back then. However, it seems to have been common practice at that time; at least projects that we have taken over testify to that.
With new technical possibilities we have always adapted our way of working. And in the meantime, the time has come for us to replace Gridelements (for various reasons) with other solutions.

One of these solutions is the use of the Container Extension. But it is only a small piece of the puzzle for us.

We create custom content elements as close to the TYPO3 core as possible. This simplifies future upgrades; in addition, the work steps are already familiar to every developer.

a) Content elements

• We use frame classes or custom TCA fields for settings with little impact on the layout, e.g. a background color.
• For the implementation of a special rendering, we define Custom Content Elements, e.g. for a key visual.
• If several structurally similar elements are output in a group, we resort to inline elements (IRRE). Typical examples are Cards or the aforementioned Accordion.
• If the Bootstrap Package is suitable for the project, this already provides us with some common content elements.

b) Page structure

• With backend layouts, we define single and multi-column page layouts.
• If we need variable multi-column layouts, we resort to EXT:container.
• With EXT:content_defender we restrict the use of content elements in both backend layouts and container elements.