https://github.com/friendsofredaxo/slice_columns
SliceColumns is a REDAXO AddOn. Grid arrangement for REDAXO article slices.
https://github.com/friendsofredaxo/slice_columns
backend frontend grid grid-layout hacktoberfest layout pagebuilder redaxo-addon redaxo5 slices
Last synced: 2 months ago
JSON representation
SliceColumns is a REDAXO AddOn. Grid arrangement for REDAXO article slices.
- Host: GitHub
- URL: https://github.com/friendsofredaxo/slice_columns
- Owner: FriendsOfREDAXO
- License: mit
- Created: 2021-09-01T11:24:56.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2025-03-15T18:14:14.000Z (about 1 year ago)
- Last Synced: 2025-08-11T00:47:25.346Z (10 months ago)
- Topics: backend, frontend, grid, grid-layout, hacktoberfest, layout, pagebuilder, redaxo-addon, redaxo5, slices
- Language: PHP
- Homepage:
- Size: 2.53 MB
- Stars: 22
- Watchers: 5
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# REDAXO-AddOn: SliceColumns
Das REDAXO-AddOn ermöglicht die flexible Darstellung von Slices in responsive Spalten-Layouts. Mit intelligenter Button-Steuerung und nahtloser bloecks-Integration.
Screenshot mit AddOn Backend Tools
## ✨ Features
- **Responsive Spalten**: Flexible Breitenanpassung für Slices (1-12 Spalten)
- **Intelligente Steuerung**: Dynamische Button-Icons je nach Zustand
- **Smart Reset**: Bei maximaler Breite wird der Wrapper automatisch entfernt
- **CSS-Framework-Support**: Kompatibel mit Bootstrap, UIKit, Foundation etc.
- **Modul-/Template-Filter**: Gezielter Ausschluss bestimmter Module oder Templates
- **bloecks-Integration**: Moderne Drag & Drop-Funktionalität
- **Tastenkürzel**: Shift+Breiter = sofort 100%
## 🆕 Was ist neu in Version 2.0.0
### Verbesserungen
- **🎯 Intelligente Button-Steuerung**: Icons ändern sich dynamisch je nach Zustand
- **🔄 Smart Reset**: Bei maximaler Breite wird automatisch der Wrapper entfernt
- **🎨 Bessere UX**: Keine Extra-Buttons mehr, alles über zwei intuitive Buttons
- **🏗️ Backend-Konsistenz**: Reset-Zustand sieht aus wie volle Breite
- **⚡ Optimierte Logik**: Bessere Behandlung von Edge-Cases
### Architektur-Änderungen
- **❌ Drag & Drop entfernt**: Wird jetzt vollständig von bloecks übernommen
- **🔗 bloecks-Abhängigkeit**: bloecks ^5.0 ist jetzt zwingend erforderlich
- **🎯 Fokus auf Spalten**: AddOn konzentriert sich ausschließlich auf Spalten-Management
- **🧹 Code-Bereinigung**: Entfernung von Legacy-Drag&Drop-Code
### Kompatibilität
- **✅ Vollständig kompatibel** mit bloecks für moderne Slice-Verwaltung
- **✅ Backwards-kompatibel** für bestehende CSS-Konfigurationen
- **✅ Framework-agnostisch** - funktioniert mit allen CSS-Frameworks
## 🔧 Voraussetzungen
- **REDAXO**: ^5.12
- **bloecks**: ^5.0 (erforderliche Abhängigkeit - wird automatisch installiert)
- **PHP**: ^7.4
> **Wichtig**: Das bloecks-AddOn ist **zwingend erforderlich** und übernimmt die Drag & Drop-Funktionalität für Slices.
## 🎮 Bedienung im Backend
### Standard-Buttons
Jeder Slice erhält zwei Buttons zur Breitensteuerung:
- **↙ Schmaler** (Compress): Reduziert die Breite um einen Schritt
- **↗ Breiter** (Expand): Erhöht die Breite um einen Schritt
### Intelligente Button-Logik
Die Button-Icons ändern sich dynamisch je nach aktuellem Zustand:
#### Normal-Modus (1-11 Spalten)
- **↙ Schmaler**: Compress-Icon → Spalte schmaler machen
- **↗ Breiter**: Expand-Icon → Spalte breiter machen
#### Maximum erreicht (12 Spalten)
- **↙ Schmaler**: Compress-Icon → Spalte schmaler machen
- **❌ Reset**: Times-Icon → **Wrapper komplett entfernen**
#### Reset-Zustand (0 = kein Wrapper)
- **↙ Zurück**: Compress-Icon → Zur maximalen Breite zurückkehren
- **↗ Zurück**: Expand-Icon → Zur Standard-Breite zurückkehren
### Backend-Darstellung
- **Standard (1-11)**: Entsprechende prozentuale Breite
- **Maximum (12)**: Volle Breite (100%)
- **Reset (0)**: Volle Breite (100%) - *sieht aus wie Maximum*
### Frontend-Ausgabe
- **Standard (1-12)**: `
...`
- **Reset (0)**: **Kein Wrapper** → direkter Slice-Inhalt
- **Ausgeschlossene Module**: **Kein Wrapper** → direkter Slice-Inhalt
## ⚙️ CSS-Mapping Konfiguration
### Grundprinzip
Die Spalten werden über JSON-Definitionen an CSS-Framework-Klassen gemappt. Standardmäßig ist Bootstrap-Support vorkonfiguriert.
### Standard-Konfiguration (Bootstrap)
```json
{
"0": "reset",
"1": "col-sm-1",
"2": "col-sm-2",
"3": "col-sm-3",
"4": "col-sm-4",
"5": "col-sm-5",
"6": "col-sm-6",
"7": "col-sm-7",
"8": "col-sm-8",
"9": "col-sm-9",
"10": "col-sm-10",
"11": "col-sm-11",
"12": "col-sm-12"
}
```
### Reset-Funktion aktivieren
```json
{
"0": "reset", ← Aktiviert die Reset-Funktionalität
"1": "col-sm-1",
...
}
```
**Alternativ auch möglich:**
- `"0": ""` (leerer String)
- `"0": "no-wrapper"`
### Beispiel: UIKit 3.x
```json
{
"0": "reset",
"1": "uk-width-1-12",
"2": "uk-width-1-6",
"3": "uk-width-1-4",
"4": "uk-width-1-3",
"5": "uk-width-5-12",
"6": "uk-width-1-2",
"7": "uk-width-7-12",
"8": "uk-width-2-3",
"9": "uk-width-3-4",
"10": "uk-width-5-6",
"11": "uk-width-11-12",
"12": "uk-width-1-1"
}
```
### Beispiel: Foundation 6
```json
{
"0": "reset",
"1": "small-1 columns",
"2": "small-2 columns",
"3": "small-3 columns",
"4": "small-4 columns",
"5": "small-5 columns",
"6": "small-6 columns",
"7": "small-7 columns",
"8": "small-8 columns",
"9": "small-9 columns",
"10": "small-10 columns",
"11": "small-11 columns",
"12": "small-12 columns"
}
```
> **💡 Tipp**: Definieren Sie alle Spalten von 1 bis zur maximalen Anzahl. Die `"0": "reset"` Definition ist optional, aber empfohlen für maximale Flexibilität.
## 🛠️ Konfigurationsmöglichkeiten
### AddOn-Einstellungen
- **Spalten-Anzahl**: Standard 12 (anpassbar)
- **Schrittweite**: Standard 1 (anpassbar)
- **Minimale Breite**: Standard 1 (anpassbar)
- **Ausgeschlossene Templates**: Komma-getrennte Template-IDs
- **Ausgeschlossene Module**: Komma-getrennte Modul-IDs
### Template-/Modul-Ausschluss
Module oder Templates können vom Spalten-System ausgeschlossen werden:
**Ausgeschlossene Templates:**
- Slices erhalten keine Spalten-Buttons
- Keine Wrapper im Frontend
**Ausgeschlossene Module:**
- Slices erhalten keine Spalten-Buttons
- Keine Wrapper im Frontend
- Ideal für Hero-Bereiche, Full-Width-Content, etc.
## 🎯 Anwendungsfälle
### Standard Content-Layout
```html
Sidebar Content
Main Content
```
### Hero-Bereiche ohne Wrapper
```html
...
```
### Responsive Layouts
```html
Left Column
Right Column
```
## 🆘 Support & Hilfe
- **GitHub Issues**: https://github.com/FriendsOfREDAXO/slice_columns
- **REDAXO Forum**: https://www.redaxo.org/de/forum/
- **Dokumentation**: Diese README + Inline-Hilfe im Backend
## Credits
Ursprüngliche Idee von: Thomas Göllner](https://github.com/tgoellner).
https://github.com/FriendsOfREDAXO/bloecks/tree/previous_alpha/plugins/columns
**Lead:** Andreas Lenhardt https://github.com/andileni
**Testing and further development:** Thomas Skerbis https://github.com/skerbis