schmidtwebmedia/grid-for-container

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

Installs: 1 220

Dependents: 0

Suggesters: 0

Security: 0

Stars: 0

Watchers: 1

Forks: 1

Open Issues: 1

Type:typo3-cms-extension

3.0.0 2024-12-04 07:01 UTC

This package is auto-updated.

Last update: 2024-12-19 11:08:13 UTC


README

Latest Stable Version TYPO3 11 TYPO3 12 TYPO3 12 Container

Total Downloads Monthly Downloads

Description

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

It's pre-configured for Bootstrap 3, 4 and 5.

Important: The Bootstrap CSS/JS is not included

Features

There are Grid options to choose for an TYPO3 editor. Something like (e.g. two column)

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

This work for

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

Backend

Backend View

Screenshot Backend

Frontend

Screenshot Frontend Output

Install

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

Composer install:

composer require schmidtwebmedia/grid-for-container

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": [
    {
      "onecol": [
        {
          "label": "",
          "class": [
            "",
            ""
          ]
        }
      ],
      "twocol": [
        {
          "label": "",
          "class": [
            "",
            ""
          ]
        }
      ],
      "threecol": [
        {
          "label": "",
          "class": [
            "",
            "",
            ""
          ]
        }
      ],
      "fourthcol": [
        {
          "label": "",
          "class": [
            "",
            "",
            "",
            ""
          ]
        }

      ]
    }
  ],
  "row": [
    {
      "class": ""
    }
  ]
}