{"id":21330573,"url":"https://github.com/friendsofredaxo/slice_columns","last_synced_at":"2026-03-27T03:10:16.871Z","repository":{"id":45002314,"uuid":"402035016","full_name":"FriendsOfREDAXO/slice_columns","owner":"FriendsOfREDAXO","description":"SliceColumns is a REDAXO AddOn. Grid arrangement for REDAXO article slices. ","archived":false,"fork":false,"pushed_at":"2025-03-15T18:14:14.000Z","size":2650,"stargazers_count":22,"open_issues_count":1,"forks_count":2,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-08-11T00:47:25.346Z","etag":null,"topics":["backend","frontend","grid","grid-layout","hacktoberfest","layout","pagebuilder","redaxo-addon","redaxo5","slices"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FriendsOfREDAXO.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-09-01T11:24:56.000Z","updated_at":"2025-03-15T17:51:00.000Z","dependencies_parsed_at":"2025-03-14T09:29:55.969Z","dependency_job_id":"573596dc-4105-4dcd-8a35-eb26bf45835d","html_url":"https://github.com/FriendsOfREDAXO/slice_columns","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/FriendsOfREDAXO/slice_columns","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FriendsOfREDAXO%2Fslice_columns","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FriendsOfREDAXO%2Fslice_columns/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FriendsOfREDAXO%2Fslice_columns/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FriendsOfREDAXO%2Fslice_columns/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FriendsOfREDAXO","download_url":"https://codeload.github.com/FriendsOfREDAXO/slice_columns/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FriendsOfREDAXO%2Fslice_columns/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31013961,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-27T02:58:54.984Z","status":"ssl_error","status_checked_at":"2026-03-27T02:58:46.993Z","response_time":164,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["backend","frontend","grid","grid-layout","hacktoberfest","layout","pagebuilder","redaxo-addon","redaxo5","slices"],"created_at":"2024-11-21T22:22:06.656Z","updated_at":"2026-03-27T03:10:16.865Z","avatar_url":"https://github.com/FriendsOfREDAXO.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# REDAXO-AddOn: SliceColumns\n\nDas REDAXO-AddOn ermöglicht die flexible Darstellung von Slices in responsive Spalten-Layouts. Mit intelligenter Button-Steuerung und nahtloser bloecks-Integration.\n\n![Screenshot](https://github.com/FriendsOfREDAXO/slice_columns/blob/assets/screenshot.png)\nScreenshot mit AddOn Backend Tools \n\n## ✨ Features\n\n- **Responsive Spalten**: Flexible Breitenanpassung für Slices (1-12 Spalten)\n- **Intelligente Steuerung**: Dynamische Button-Icons je nach Zustand\n- **Smart Reset**: Bei maximaler Breite wird der Wrapper automatisch entfernt\n- **CSS-Framework-Support**: Kompatibel mit Bootstrap, UIKit, Foundation etc.\n- **Modul-/Template-Filter**: Gezielter Ausschluss bestimmter Module oder Templates\n- **bloecks-Integration**: Moderne Drag \u0026 Drop-Funktionalität\n- **Tastenkürzel**: Shift+Breiter = sofort 100% \n\n## 🆕 Was ist neu in Version 2.0.0\n\n### Verbesserungen\n- **🎯 Intelligente Button-Steuerung**: Icons ändern sich dynamisch je nach Zustand\n- **🔄 Smart Reset**: Bei maximaler Breite wird automatisch der Wrapper entfernt  \n- **🎨 Bessere UX**: Keine Extra-Buttons mehr, alles über zwei intuitive Buttons\n- **🏗️ Backend-Konsistenz**: Reset-Zustand sieht aus wie volle Breite\n- **⚡ Optimierte Logik**: Bessere Behandlung von Edge-Cases\n\n### Architektur-Änderungen\n- **❌ Drag \u0026 Drop entfernt**: Wird jetzt vollständig von bloecks übernommen\n- **🔗 bloecks-Abhängigkeit**: bloecks ^5.0 ist jetzt zwingend erforderlich  \n- **🎯 Fokus auf Spalten**: AddOn konzentriert sich ausschließlich auf Spalten-Management\n- **🧹 Code-Bereinigung**: Entfernung von Legacy-Drag\u0026Drop-Code\n\n### Kompatibilität\n- **✅ Vollständig kompatibel** mit bloecks für moderne Slice-Verwaltung\n- **✅ Backwards-kompatibel** für bestehende CSS-Konfigurationen\n- **✅ Framework-agnostisch** - funktioniert mit allen CSS-Frameworks\n\n\n## 🔧 Voraussetzungen\n\n- **REDAXO**: ^5.12\n- **bloecks**: ^5.0 (erforderliche Abhängigkeit - wird automatisch installiert)\n- **PHP**: ^7.4\n\n\u003e **Wichtig**: Das bloecks-AddOn ist **zwingend erforderlich** und übernimmt die Drag \u0026 Drop-Funktionalität für Slices.\n\n## 🎮 Bedienung im Backend\n\n### Standard-Buttons\nJeder Slice erhält zwei Buttons zur Breitensteuerung:\n\n- **↙ Schmaler** (Compress): Reduziert die Breite um einen Schritt\n- **↗ Breiter** (Expand): Erhöht die Breite um einen Schritt\n\n### Intelligente Button-Logik\n\nDie Button-Icons ändern sich dynamisch je nach aktuellem Zustand:\n\n#### Normal-Modus (1-11 Spalten)\n- **↙ Schmaler**: Compress-Icon → Spalte schmaler machen\n- **↗ Breiter**: Expand-Icon → Spalte breiter machen\n\n#### Maximum erreicht (12 Spalten) \n- **↙ Schmaler**: Compress-Icon → Spalte schmaler machen\n- **❌ Reset**: Times-Icon → **Wrapper komplett entfernen**\n\n#### Reset-Zustand (0 = kein Wrapper)\n- **↙ Zurück**: Compress-Icon → Zur maximalen Breite zurückkehren\n- **↗ Zurück**: Expand-Icon → Zur Standard-Breite zurückkehren\n\n### Backend-Darstellung\n- **Standard (1-11)**: Entsprechende prozentuale Breite\n- **Maximum (12)**: Volle Breite (100%)\n- **Reset (0)**: Volle Breite (100%) - *sieht aus wie Maximum*\n\n### Frontend-Ausgabe\n- **Standard (1-12)**: `\u003cdiv class=\"col-sm-X\"\u003e...\u003c/div\u003e`\n- **Reset (0)**: **Kein Wrapper** → direkter Slice-Inhalt\n- **Ausgeschlossene Module**: **Kein Wrapper** → direkter Slice-Inhalt \n\n## ⚙️ CSS-Mapping Konfiguration\n\n### Grundprinzip\nDie Spalten werden über JSON-Definitionen an CSS-Framework-Klassen gemappt. Standardmäßig ist Bootstrap-Support vorkonfiguriert.\n\n### Standard-Konfiguration (Bootstrap)\n```json\n{\n  \"0\": \"reset\",\n  \"1\": \"col-sm-1\",\n  \"2\": \"col-sm-2\",\n  \"3\": \"col-sm-3\",\n  \"4\": \"col-sm-4\",\n  \"5\": \"col-sm-5\",\n  \"6\": \"col-sm-6\",\n  \"7\": \"col-sm-7\",\n  \"8\": \"col-sm-8\",\n  \"9\": \"col-sm-9\",\n  \"10\": \"col-sm-10\",\n  \"11\": \"col-sm-11\",\n  \"12\": \"col-sm-12\"\n}\n```\n\n### Reset-Funktion aktivieren\n```json\n{\n  \"0\": \"reset\",  ← Aktiviert die Reset-Funktionalität\n  \"1\": \"col-sm-1\",\n  ...\n}\n```\n\n**Alternativ auch möglich:**\n- `\"0\": \"\"` (leerer String)\n- `\"0\": \"no-wrapper\"`\n\n### Beispiel: UIKit 3.x\n```json\n{\n  \"0\": \"reset\",\n  \"1\": \"uk-width-1-12\",\n  \"2\": \"uk-width-1-6\", \n  \"3\": \"uk-width-1-4\",\n  \"4\": \"uk-width-1-3\",\n  \"5\": \"uk-width-5-12\",\n  \"6\": \"uk-width-1-2\",\n  \"7\": \"uk-width-7-12\",\n  \"8\": \"uk-width-2-3\",\n  \"9\": \"uk-width-3-4\",\n  \"10\": \"uk-width-5-6\",\n  \"11\": \"uk-width-11-12\",\n  \"12\": \"uk-width-1-1\"\n}\n```\n\n### Beispiel: Foundation 6\n```json\n{\n  \"0\": \"reset\",\n  \"1\": \"small-1 columns\",\n  \"2\": \"small-2 columns\",\n  \"3\": \"small-3 columns\",\n  \"4\": \"small-4 columns\",\n  \"5\": \"small-5 columns\",\n  \"6\": \"small-6 columns\",\n  \"7\": \"small-7 columns\", \n  \"8\": \"small-8 columns\",\n  \"9\": \"small-9 columns\",\n  \"10\": \"small-10 columns\",\n  \"11\": \"small-11 columns\",\n  \"12\": \"small-12 columns\"\n}\n```\n\n\u003e **💡 Tipp**: Definieren Sie alle Spalten von 1 bis zur maximalen Anzahl. Die `\"0\": \"reset\"` Definition ist optional, aber empfohlen für maximale Flexibilität. \n\n\n## 🛠️ Konfigurationsmöglichkeiten\n\n### AddOn-Einstellungen\n- **Spalten-Anzahl**: Standard 12 (anpassbar)\n- **Schrittweite**: Standard 1 (anpassbar)\n- **Minimale Breite**: Standard 1 (anpassbar)\n- **Ausgeschlossene Templates**: Komma-getrennte Template-IDs\n- **Ausgeschlossene Module**: Komma-getrennte Modul-IDs\n\n### Template-/Modul-Ausschluss\nModule oder Templates können vom Spalten-System ausgeschlossen werden:\n\n**Ausgeschlossene Templates:**\n- Slices erhalten keine Spalten-Buttons\n- Keine Wrapper im Frontend\n\n**Ausgeschlossene Module:**\n- Slices erhalten keine Spalten-Buttons  \n- Keine Wrapper im Frontend\n- Ideal für Hero-Bereiche, Full-Width-Content, etc.\n\n## 🎯 Anwendungsfälle\n\n### Standard Content-Layout\n```html\n\u003c!-- Backend: 4-8-Spalten Layout --\u003e\n\u003cdiv class=\"col-sm-4\"\u003eSidebar Content\u003c/div\u003e\n\u003cdiv class=\"col-sm-8\"\u003eMain Content\u003c/div\u003e\n```\n\n### Hero-Bereiche ohne Wrapper\n```html\n\u003c!-- Backend: Reset-Button geklickt --\u003e\n\u003c!-- Frontend: Kein Wrapper --\u003e\n\u003csection class=\"hero-area\"\u003e...\u003c/section\u003e\n```\n\n### Responsive Layouts\n```html\n\u003c!-- Backend: 6-6-Spalten Layout --\u003e\n\u003cdiv class=\"col-sm-6\"\u003eLeft Column\u003c/div\u003e\n\u003cdiv class=\"col-sm-6\"\u003eRight Column\u003c/div\u003e\n```\n\n\n\n## 🆘 Support \u0026 Hilfe\n\n- **GitHub Issues**: https://github.com/FriendsOfREDAXO/slice_columns\n- **REDAXO Forum**: https://www.redaxo.org/de/forum/\n- **Dokumentation**: Diese README + Inline-Hilfe im Backend\n\n## Credits\nUrsprüngliche Idee von: Thomas Göllner](https://github.com/tgoellner). \n\nhttps://github.com/FriendsOfREDAXO/bloecks/tree/previous_alpha/plugins/columns\n\n**Lead:** Andreas Lenhardt https://github.com/andileni\n\n**Testing and further development:** Thomas Skerbis https://github.com/skerbis\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffriendsofredaxo%2Fslice_columns","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffriendsofredaxo%2Fslice_columns","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffriendsofredaxo%2Fslice_columns/lists"}