bk2k / autogrids
Installs: 824
Dependents: 0
Suggesters: 0
Security: 0
Stars: 10
Watchers: 9
Forks: 1
Open Issues: 3
Type:typo3-cms-extension
Requires
- php: >=7.0.0
- gridelementsteam/gridelements: ^9.0
- typo3/cms-backend: ^9.5
- typo3/cms-core: ^9.5
- typo3/cms-frontend: ^9.5
Requires (Dev)
- friendsofphp/php-cs-fixer: ^2.3.1
Replaces
- autogrids: 1.0.2
- typo3-ter/autogrids: 1.0.2
README
This is a configuration extension for Grid Elements. It provides a clean configuration for Grid Elements to be compliant with TYPO3 Core Best-Practices.
Installation
composer require bk2k/autogrids
.- Install Extension in Extension Manager.
- Remove
EXT:gridelements
Static Template! - Include
EXT:autogrids
Static Template.
What does it do?
- It respects your
lib.contentElement
configuration. - It gives you the freedom to define the behaviour yourself.
- It delivers streamlined markup.
- It delivers easy to understand templates.
What does it not do?
- It does not deliver responsive grids out of the box!
What does it generate?
Grid-Elements TsConfig Configuration
tx_gridelements.setup {
twocolumns {
title = LLL:EXT:autogrids/Resources/Private/Language/locallang_be.xlf:layout.twocolumns.title
description = LLL:EXT:autogrids/Resources/Private/Language/locallang_be.xlf:layout.twocolumns.description
topLevelLayout = 0
config {
colCount = 2
rowCount = 1
rows {
1 {
columns {
1 {
name = LLL:EXT:autogrids/Resources/Private/Language/locallang_be.xlf:column.1
colPos = 101
}
2 {
name = LLL:EXT:autogrids/Resources/Private/Language/locallang_be.xlf:column.2
colPos = 102
}
}
}
}
}
}
}
HTML
<div class="grid-container grid-container-{layout | twocolumns}">
<div class="grid-row grid-row-{number | 1}">
<div class="grid-column grid-column-{colPos | 101}">
<elements />
...
</div>
<div class="grid-column grid-column-{colPos | 102}">
<elements />
...
</div>
</div>
</div>
How does it work?
The only css added to the instance is a simple flexbox container and a column config that ensures that all elements are rendered with the same with.
.grid-row {
display: flex;
}
.grid-column {
flex-grow: 1;
flex-basis: 0;
}
How do i make the grid responsive?
You just add the css that makes the grid behave as you want it to.
Unset default CSS
page.includeCSSLibs.autogrids >
Example CSS
.grid-row {
display: flex;
flex-wrap: wrap;
margin-right: -20px;
margin-left: -20px;
}
.grid-column {
width: 100%;
padding-right: 20px;
padding-left: 20px;
}
@media (min-width: 576px) {
.grid-container-fourcolumns > .grid-row > .grid-column {
width: calc(100% / 2);
}
}
@media (min-width: 992px) {
.grid-container-fourcolumns > .grid-row > .grid-column {
width: calc(100% / 4);
}
}