Frontend
Ein Design-System aufbauen: Von Tokens zu Komponenten
Design-Tokens, Komponenten-APIs und die organisatorischen Muster, die ein Design-System zu einem Multiplikator statt zu einem Wartungsrisiko machen.
·4 Min. Lesezeit
Tags
css
14 Artikel
Frontend
CSS-Architektur im großen Maßstab: Vom Chaos zur Souveränität
Wie man CSS in großen Anwendungen strukturiert — Design-Tokens, Komponentenmuster, Utility-Klassen und die Prinzipien, die mit der Zeit Stylesheet-Entropie verhindern.
·3 Min. Lesezeit
Frontend
Moderne CSS-Layout-Patterns: Container Queries und Subgrid in der Praxis
Eine praxisnahe Anleitung zum Erstellen responsiver Layouts mit CSS Container Queries und Subgrid – mit Fokus auf komponentenbasierte Reaktionsfähigkeit, Vererbung der Ausrichtung und praktische Muster für Karten-Raster und Dashboards.
·5 Min. Lesezeit
Frontend
Fortgeschrittene CSS-Animationen: Scroll-gesteuerte Effekte ohne JavaScript
Eine praxisnahe Anleitung für performante scroll-gesteuerte Animationen mit nativen CSS-Scroll-Timelines, View Transitions und der Eigenschaft animation-timeline — ganz ohne JavaScript-Abhängigkeiten.
·5 Min. Lesezeit
Frontend
CSS Container Queries: Responsive Komponenten ohne Media Queries
Erstelle wirklich responsive Komponenten mit CSS Container Queries, die sich an der Größe ihres Containers statt am Viewport orientieren und so wiederverwendbare Layouts ermöglichen, die in Seitenleisten, Modals und Hauptinhaltsbereichen ohne Änderungen funktionieren.
·5 Min. Lesezeit
Frontend
CSS Scroll-Driven Animations: Jenseits von JavaScript-Scroll-Handlern
Baue performante scroll-gekoppelte Animationen mit der CSS-API für scrollgesteuerte Animationen – mit praktischen Beispielen für Scroll-Fortschritts-Timelines, View-Timelines, Parallax-Effekte und Sticky-Header-Transformationen, die vollständig abseits des Main Threads laufen.
·4 Min. Lesezeit
Frontend
Fortgeschrittene CSS-Grid-Muster für komplexe Layouts
Beherrsche fortgeschrittene CSS-Grid-Techniken wie Subgrid, benannte Grid-Bereiche mit responsivem Umbruch, Auto-Placement-Algorithmen, intrinsische Größen mit minmax und grid-bewusste Komponentenkomposition für produktive Layouts.
·5 Min. Lesezeit
Frontend
CSS Container Queries: Responsive Komponenten ohne Media Queries
Erfahre, wie CSS Container Queries es dir ermöglichen, wirklich responsive Komponenten zu bauen, die sich an die Größe ihres Elternelements statt an den Viewport anpassen – für portable UI-Module, die in jedem Layout-Kontext funktionieren.
·5 Min. Lesezeit
Frontend
Moderne CSS-Layout-Patterns, die jeder Entwickler kennen sollte
Erlernen Sie praktische CSS-Layout-Patterns mit Grid, Flexbox, Container Queries und logischen Eigenschaften, die reale Herausforderungen im responsiven Design lösen – ganz ohne JavaScript oder komplexe Media-Query-Ketten.
·4 Min. Lesezeit
Frontend
Performance von Web-Animationen: GPU-beschleunigte Techniken für butterweiche 60 fps
Beherrsche GPU-beschleunigte CSS- und JavaScript-Animationstechniken, die konstant 60 fps liefern, ohne Layout Thrashing oder ruckelnde Frame-Einbrüche zu verursachen.
·5 Min. Lesezeit
Frontend
CSS Container Queries: Responsive Komponenten ohne Media Queries
Wie CSS Container Queries es Komponenten ermöglichen, auf die Größe ihres Eltern-Containers statt auf den Viewport zu reagieren — für wirklich wiederverwendbare responsive Komponenten.
·5 Min. Lesezeit
Frontend
Design Tokens: Brücke zwischen Design- und Entwicklungssystemen
Wie Design Tokens eine einzige Quelle der Wahrheit für Farben, Abstände und Typografie über Design-Tools und Code hinweg schaffen – und Drift zwischen Figma und Produktion vermeiden.
·4 Min. Lesezeit
Frontend
Modernes responsives Design: mehr als Media Queries
Container Queries, fließende Typografie, intrinsische Größenanpassung und CSS clamp() — moderne Techniken für responsives Design, die die Abhängigkeit von Media Queries verringern und wirklich flexible Layouts schaffen.
·3 Min. Lesezeit
Frontend
CSS Grid Layout: Ein praktischer Leitfaden zur Meisterschaft
CSS Grid ermöglicht zweidimensionale Layouts, die früher ohne Hacks unmöglich waren — lerne das Grid-Modell, die Platzierungsregeln und die responsiven Muster, die Float-basierte Layouts ersetzen.
·3 Min. Lesezeit