tl;dr: bei Variablen denken viele an Mathematik oder Programmieren. Hier im Webdesign sollte man einfach an Platzhalter denken. Du stellst Farben oder Größen einmal ein, gibst der Einstellung einen Namen und kannst diese dann beliebig oft verwenden – und mit einem Klick wieder ändern. Und mit min(), max() und clamp() geht es endlich den Viewport-Orgien an den Kragen.
Bei der Gestaltung von Websites benötigt man die selben Werte immer wieder. So wird eine Farbe einerseits als Schriftfarbe, an einer anderen Stelle aber als Farbe eines Hintergrundes oder eine Linie benötigt. Damit man diese Farbe nur an einer einzigen Stelle definieren muss gibt es Custom Properties - eben CSS Variablen. Diese kann man einfach in ein CSS-File schreiben, oder das jeweilige System wie Bricks, Elementor etc. übernimmt das.
Die Farbe akzentfarbe wird als RGB-Wert definiert. Dann wird für die Tag H1 dieser Wert verwendet, für den Tag H2 wird eine Berechnung durchgeführt, der Wert wird mit einem Transparenzwert von 0,5 berechnet.
Man kann also nicht nur Werte einfach einsetzen, man kann damit auch Dinge tun. Das geht so weit, dass man statt JavaScript mit reinem CSS die lustigsten Dinge anstellen kann.
Die Umsetzung in Bricks
Bricks hat ein einfaches Konzept für die Umsetzung gefunden: man definiert einfach die Paare Namen und Wert. Diese kann man in frei zu definierenden Kategorien sortieren, dh man kann eine Kategorie Farben, eine andere für Abstände oder Schriftgrößen erstellen. Das ist wichtig, weil man dann beim Arbeiten schneller daruf zugreifen kann.
Sinn macht das Ganze wohl für Schriften und Dimensionen, andere Builder wie Elementor 4 packen noch Schriftarten als Variablentyp dazu, verlangen aber vorher eine Festlegung. In Bricks sind wir selber dafür verantwortlich, dass wir keinen Farbwert als Schriftgröße einstellen.
Im Bereich Variablen im Style-Manager wurden einige Farben definiert.
In der Tat ist Bricks völlig egal, was wir für Werte eintragen, ob das sinnvolle und gültige Begriffe sind oder nicht. Dafür spendiert uns das Interface einen Papierkorb, in dem man Werte verschieben kann. Das kann recht hilfreich sein, wenn man aufräumt etc.
Anmerkung: in Bricks gibt es einen eigenen Color-Manager. Dieser kann viel mehr als nur ein paar Farbwerte verwalten, mehr darüber in Variable Farben in Bricks.
Anwendung der Werte
Das CSS3 Icon steht als Symbol für die Auswahlmöglichkeit aus den angelegten Variablen.
Zusätzlich gibt es auch die Farbpalette (Color-Manager), Dynamische Daten und einen klassischen Farbwähler. Wer den verwendet definiert nur an dieser einen Stelle eine Farbe, die sonst nirgends auftaucht.
4 Quellen: neben der Farbpalette und Dynamischen Daten auch das Colorsystem von Bricks und eben die Auswahl für Variablen.
Alle Kategorien werden angezeigt und die entsprechende Variable ausgewählt werden.
Die Variablen können innerhalb ihrer Kategorien frei umsortiert werden, man kann also die am häufigsten benötigten nach oben legen etc. Das alles ist recht intuitiv erfassbar und benötigt wohl keine tieferen Erklärungen.
CSS Pixel und Gerätepixel
Ich verwende (beruflich, eh klar) 3 Geräteklassen: Desktop, Handy und auch ein Tablet. Jetzt (August 2026) wo sogar der Blockeditor mit WP 7.1 anfängt diese Geräteklassen zu unterstützen (ohne händisches CSS, was für ein Fortschritt) sollte man sich vielleicht nochmal kurz die Funktionsweise von Breakpoints in Erinnerung rufen:
Desktop: Unsere Ausgangslage für alles. Der Desktop ist unser default Breakpont. Wir treffen die Entscheidung ob breit (also Bildschirmbreite) oder boxed (also eine definierte Inhaltsbreite). Brix kennt eine minimale Bildschirmbreite von (default) 360 und eine maximale von 1440 px.
Tablet: <992 px Mobil landscape: < 768 px Mobil Portrait: < 478 px
Das sind die Voreinstellungen, es gibt also von Haus aus 4 Breiten. Zusätzliche Breakpoints können eingestellt bzw. verwaltet werden:
Aber: mein 13″ iPad Air hat eine Pixelauflösung von 2732 x 2048 px. Dh. im Fullscreen-Mode wird dort die Desktop-Variante ausgespielt, auch wenn es ein Tablet ist. Umgekehrt kann man durch verkleinern des Browsefensters die Tablet-Variante auch am Desktop ansehen.
Trotzdem: so ganz logisch ist das alles nicht. Es gibt nämlich nicht nur physiche Pixel sondern auch „device-independent pixels“, eben CSS Pixel, die über eine Device Pixel Ratio eine Umrechnung erzwingen. Bei meinem iPad ist dieser Wert 2, dh 2 physiche Pixel entsprechen 2 CSS-Pixeln. Womit btw. die Idee, das ein Pixel ein Bildpunkt ist und nicht geteilt werden kann obsolet ist. Danke Fortschritt.
Der <meta name=“viewport“ content=“width=device-width“>-Tag sorgt dafür, dass der Browser die logische Breite (also die CSS-Pixel-Breite) als Bezugsgröße für Media Queries nimmt – nicht die physische. Das ist historisch bedingt: Als Retina-Displays aufkamen, hätten sonst plötzlich alle Websites auf hochauflösenden Geräten winzig klein dargestellt werden müssen, weil ein „1024px Breakpoint“ auf einmal bei 2048 physischen Pixeln gegriffen hätte.
min(), max() und clamp()
Wir haben gelernt: Breakpoints sind verhandelbar, werden bei jedem Theme, bei jedem Pagebuilder anders definiert und überhaupt, das ist alles sehr verwirrend. Und viel Arbeit. Denn worum geht es eigentlich wirklich? Schriftengrößen und Abstände sollten sich je nach Gerätetyp (=Breakpoint) möglichst so verhalten, dass wenn weniger Platz ist die Darstellung kleiner erfolgt und wenn ganz viel Platz ist, die Darstellung auch nicht zu groß erfolgt. Sonst könnten wir ja eingach vw/vh einsetzen für die Schriftgrößen. Blöde Idee.
Oder man legt für jeden Breakpoint eigene Schrifftgrößen und Abstände fest. Nur: welche und wie viele? 3 in Gutenberg und Elementor? Oder 7 in Elementor wenn alle Breakpoints aktiv sind oder wie viele in Bricks (4 default), wenn ich eigene Custom Breakpoints erfinde?
Gut, dass uns CSS3 hier einen Ausweg bietet. Die gute Nachricht: wenn man Bricks installiert und die default-Einstellungen belässt, gibt es schon sehr gute Einstellungen Out-Of-The-Box. Damit man diese einsetzen kann sollte man sie verstehen, und das versuchen wir hier.
min ()
width: min(50%, 300px);
Hier sehen wir eine einfache Anwendung: statt eines Wertes bei width wird die CSS-Funktion min(), verwendet. Diese funktioniert so, dass innerhalb der Klammern eine durch , getrennte Liste von Werten steht. Verwendet wird der kleinste zutreffende Wert.
In diesem Beispiel würde das bedeuten: mach das Ding 300px breit, ausser dein Viewport ist kleiner als 600px (300 px = 50% von 600px). In diesem Fall mach das ding halb so breit wie den Viewport. Ein weiteres Beispiel wäre:
width: min(100%, 500px);
Hier ist ein Element 500px breit, am Mobilgerät, das ja schmäler als 500px ist, wäre das Element aber 100%, also volle Breite breit.
Diese Funktion hat nun 3 Werte (vlnr): einen Minimumwert, einen bevorzugten Wert und einen Maximumwert, der vom viewport abhängt. Das kann zB. so aussehen:
font-size: clamp(1.5rem, 5vw, 3rem);
Liegt der bevorzugte Wert zwischen dem Min- und Max-Wert, wird der bevorzugte Wert verwendet.
Wenn der bevorzugte Wert kleiner als der Mindestwert ist, wird der Mindestwert verwendet.
Wenn der bevorzugte Wert größer als der Maximalwert ist, wird der Maximalwert verwendet.
Damit können wir als in einer einzigen Anweisungen Dimensionen setzen die kleiner am Handy, aber nicht übergross am Widescreen werden, ohne extra Angaben zum Viewport zu machen. Das ist sehr spannend, besonders, wenn man es wie in den Bricks-Grundeinstellungen so einsetzt, dass nicht feste Werte sondern berechnete Werte die Limits werden:
Das ist schon sehr clever. besonders wenn man weiss, dass die default-Einstellung bei Bricks eine HTML-Schriftgröße von 62,5% ist wodurch 1rem=10px sind (und nicht 16 wie sonst üblich). Wir haben als eine Mindestgrösse von 1,6 rem (also mit dem 62,5%-Trick 1,6 *10 = 16 px), eine Maximalgröße von 2 rem (also hier 20 px). Bevorzugt wird aber eine Schriftgröße dazwischen, die zur Mindestgröße noch etwa 4 ‰ der Viewportbreite addiert.
Ist das ein wenig Detailverliebt? Durchaus. Aber wenn man das durchzieht ergibt sich ein sehr präzises Werkzeug für die Gestaltung.
Bricks nennt diese Idee Skalen und bietet ein einfaches Interface, um diese Skalen zu erstellen. Das Ergebnis sind dann Variablenwerte für Schriftgrößen und Abstände und andere Größen.
Fazit
Variablen sind gut, automtisch erstellte Variablen sind noch besser. Bricks demonstriert hier wie man die Gestaltung über Variablen so steuert, dass ein konsistentes Bild entsteht. Natürlich muss man es auch konsequent benutzen. Das gelingt am besten, indem man versteht welche Idee hinter dem Interface steckt.
Veröffentlicht am: 21. August 2026 Letztes Update am: 21. August 2026
Sie sehen gerade einen Platzhalterinhalt von Google Maps. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Sie sehen gerade einen Platzhalterinhalt von OpenStreetMap. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Sie sehen gerade einen Platzhalterinhalt von Facebook. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Sie sehen gerade einen Platzhalterinhalt von reCAPTCHA. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
