schmidtwebmedia/grid-for-gridelements

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

2.0.1 2020-11-13 17:15 UTC

This package is auto-updated.

Last update: 2020-11-13 17:18:50 UTC


README

Version 2.X.X

TYPO3 GridElements

Version 1.X.X

TYPO3 GridElements

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

Screenshot Backend Configuration

Backend View

Screenshot Backend

Frontend

Screenshot Frontend Output

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"
    }
  ]
}