schmidtwebmedia/grid-for-gridelements

Add an easy to use grid element with GridElements. It's Framework independent. Prepared for Bootstrap v4.

2.2.0 2021-10-31 11:43 UTC

Requires

• gridelementsteam/gridelements: ^10.0.0
• typo3/cms-core: ^10.4

Replaces

• typo3-ter/grid-for-gridelements: 2.2.0

GPL-2.0-or-later

• Marco Schmidt

• bootstrap
• extension
• grid
• typo3
• Gridelements

README

Version 2.X.X

Version 1.X.X

Description

You can use this extension for adding an easy to use Grid which are Framework independently.

It's pre configured for Bootstrap 4.

Important: The Bootstrap CSS/JS is not included

Features

There are Grid options to choose for an TYPO3 editor. Something like

• 50/50
• 33/66
• 25/75

This work for

• 2 column grid
• 3 column grid
• 4 column grid

Backend

Configuration

Backend View

Frontend

Install

1. Install the extension gridelements.
2. Install the extension grid_for_gridelements
3. Include the static template
4. Be happy with an easy way to use Grids in TYPO3 :)

Composer install:

composer require schmidtwebmedia/grid-for-gridelements

Customizing

You can customize the output in frontend and change the framework or add more options for Grid ratio. And change the path to JSON Config file in extension settings.

Please use following structure of json file:

{
  "cols": [
    {
      "twocol": [
        {
          "label": "auto",
          "class": [
            "col-12 col-md",
            "col-12 col-md"
          ]
        },
        ...
      ],
      "threecol": [
        {
          "label": "auto",
          "class": [
            "col-12 col-md",
            "col-12 col-md",
            "col-12 col-md"
          ]
        },
       ...
      ],
      "fourthcol": [
        {
          "label": "auto",
          "class": [
            "col-12 col-sm-6 col-md",
            "col-12 col-sm-6 col-md",
            "col-12 col-sm-6 col-md",
            "col-12 col-sm-6 col-md"
          ]
        },
        ...
      ]
    }
  ],
  "row": [
    {
      "class": "row"
    }
  ]
}