Design
Navigationen, Galerien, Formulare und CSS-Techniken im Contao-Frontend.
-
Tutorial: Eine Masonry Galerie in Contao 5 erstellen
Schritt für Schritt zur responsiven Masonry-Galerie in Contao 5 — mit dem Masonry-Script, ImagesLoaded und etwas SCSS, ganz ohne zusätzliche Erweiterung.
-
Tutorial: Eine mobile Navigation in Contao
In vier Schritten von der horizontalen Hauptnavigation zur mobilen Navigation — mit HTML, CSS und einem kleinen jQuery-Snippet statt einer Erweiterung.
-
Eine Navigation mit zentriertem Logo umsetzen
Wie du mit display: contents eine Navigation mit mittig platziertem Logo baust — ohne CSS-Hacks und ohne das Markup zu manipulieren.
-
Youtube Element in Contao responsive darstellen
Mit aspect-ratio oder dem padding-bottom-Hack passen sich Youtube-Videos in Contao 4 und 5 automatisch an kleine Bildschirme an.
-
Contao Akkordeon geschlossen beim Laden darstellen
Mit einer einzigen Zeile im Akkordeon-Template startet das Contao-Akkordeon geschlossen — je nach Variante für jQuery oder Mootools.
-
Hinweis für ältere Internet Explorer in Contao umsetzen
Mit einer eigenen fe_page und einem Conditional Comment bekommen Besucher:innen mit altem Internet Explorer ein Overlay statt eines zerschossenen Layouts.
Moderne CSS-Techniken
Custom Properties, Layout-Features und Tooling für sauberes CSS
-
display animieren mit transition-behavior und @starting-style
Wie du Übergänge von display: none zu display: block animierst — ohne JavaScript-Workarounds und ohne Kompromisse bei der Tastatur-Navigation.
-
Besseres (S)CSS mit Stylelint
Wie Stylelint SCSS- und CSS-Dateien auf definierte Standards prüft und automatisch korrigiert — mit drei Praxisbeispielen und fertiger Beispiel-Konfiguration.
-
:has(), Subgrid und Responsive Video
Drei Frontend-Neuerungen im Praxiseinsatz: die :has()-Pseudoklasse statt Hilfsklassen, Subgrid für ausgerichtete Produktlisten und echte Responsive Videos.
-
Dark Mode: Mythen und Umsetzung mit Custom Properties
Warum Dark Mode weder automatisch die Augen schont noch immer Akku spart — und warum sich die Umsetzung mit Custom Properties trotzdem lohnt.
-
Ausgewogene Überschriften mit text-wrap: balance
Wie text-wrap: balance unglückliche Zeilenumbrüche in Überschriften verhindert — ohne manuelle Umbrüche oder geschützte Leerzeichen.
-
CSS Scroll Snap: Neue Lösungen für Smartphones und Tablets
Wie du mit Scroll Snap horizontale Scrollbereiche baust, in denen Elemente sauber einrasten — ganz ohne Javascript-Slider.
-
Einführung in Custom Properties
Wie CSS-Variablen funktionieren, was sie gegenüber Sass-Variablen können — und wo sie an ihre Grenzen stoßen.
-
Wenn der Text zu lang ist: object-fit und line-clamp
Wie du Hero- und Card-Elemente so stabil baust, dass auch lange Texte das Layout nicht zerschießen — mit object-fit: cover und line-clamp.
-
display: contents — wenn sich ein Container unsichtbar machen soll
Wie du mit display: contents die Reihenfolge von Logo und Menüpunkten frei bestimmst — ohne Extra-Markup und ohne mehrere Navigationsmodule.
-
Popover-API und color-mix()
Zwei moderne Frontend-Features: das Popover-Attribut für nicht-blockierende Overlays und color-mix() für Farbabstufungen mit Custom Properties.
Formulare & UX
Bedienbare Formulare: Feldwahl, Validierung und Spam-Schutz
-
Warum dein Formular keinen Reset-Button braucht
Was der alte Löschen-Button über Formular-UX lehrt — und wie mehr Abstand zwischen den Feldern ein Formular sofort leichter wirken lässt.
-
Select oder Radio-Buttons?
Wann ein Select-Feld die richtige Wahl ist, wann Radio-Buttons — und wie du die Anrede inklusive dritter Option sauber umsetzt.
-
Placeholder ersetzen keine Label
Warum Placeholder allein die Benutzerfreundlichkeit verschlechtern — und wie du Label und Placeholder nur mit CSS kombinierst.
-
Formular-Validierung mit :user-valid und :user-invalid
Eingabefelder ganz ohne Javascript validieren und kennzeichnen — allein mit HTML und den CSS-Pseudo-Klassen :user-valid und :user-invalid.
-
Tom Select: durchsuchbare Select-Felder
Mit Tom Select machst du Select-Felder mit vielen Optionen durchsuchbar — vom Länder-Dropdown bis zur schnellen Seitensuche in Contao.
-
Minisuche mit Tom Select
Aus der Contao-Quicknavigation und Tom Select wird in vier Schritten eine schnelle Mini-Suche für Leistungen oder Standorte.
-
Spam-Schutz für Formulare (und Chatbots)
Warum Spam-Schutz nicht nur Formulare betrifft, welche Contao-Erweiterungen helfen — und warum es nie ein endgültiger Sieg wird.