Sollten für neue oder anzupassende Elemente neue CSS-Klassen benötigt werden, sind folgende Guidelines zu beachten.
Die Elemente des Baukastens bestehen aus CSS (Cascading Style Sheet) Klassen. CSS-Stylesheet ist, wie der Name schon sagt, in Cascaden (Stufen) aufgebaut.
Stufe 1: Einem Button wird die Klasse c-button zugeteilt. Dadurch erhält er das Standard-Styling eines Lexware Buttons.
Stufe 2: Dem Button wird eine zusätzliche Klasse c-button_primary zugeteilt. Dadurch wird er grün.
Stufe 3: Dem Button wird eine zusätzliche Klasse c-button--arrow-right zugeteilt. Dadurch erhält er einen Pfeil nach rechts.
Der Sinn hinter einem stufenweisen Stylesheet ist, dass Elemente der gleichen Art also z.B. alle Buttons auf einer Seite in ihrem grundsätzlichen Aufbau gleich sind (Schrifgröße, Abstände usw) sich aber z.B. in ihrer Hintergrundfarbe unterscheiden können.
Das Gegenteil wäre ein einstufiges Stylesheet - also für jeden einzelnen Button eine eigenen Klasse button1, button2 oder buttonX, die jeweils alle CSS-Einstellungen enthalten müsste. Das Ergebnis wäre ein wesentlich längeres Stylesheet und zusätzlich müssten alle CSS-Anpassungen an einem Element der gleichen Art (z.B eine größere Schriftart für alle Buttons) in jeder einzelnen Klasse geändert werden. Mit einem stufenweisen Stylesheet muss nur die oberste Klasse (z.B. der Klasse c-button) angepasst werden.
Im Baukasten-Überblick hast du bereits gelesen, wie du Elemente des Baukastens in deine Webflow-Seite einfügst. Damit hast du Grundformen an der Hand. Diese Elemente sind aus vielen Klassen zusammengebaut.
Änderst du etwas an einem Element, das aus dem Baukasten stammt, ohne eine neue CSS-Klasse zu erstellen, änderst du die im Baukasten definierte Form dieses Elements. Fügst du dieses Element erneut ein, sieht es nicht mehr so aus, wie im Baukasten definiert, sondern wie du es verändert hast. Das sollte nicht sein!
Deshalb: Für jede Anpassung an bestehenden Elementen musst du eine neue CSS-Klasse erstellen. Greife ggf. auch auf die im Baukasten vordefinierten Standard-Klassen zurück. Diese findest du in der Navigation unter dem Menüpunkt Standards.
Wichtig: Die im Baukasten definierten Klassen beginnen alle mit c-. Neue, projektspezifische Klassen sollten immer den Präfix lx- bekommen.
Zusätzlich zum zu nutzenden Präfix lx- sind folgende Regeln bei der Benennung von CSS-Klassen zu beachten:
Zugeordnete Klasse: lx-TXTuntgelstrich
Im Moment des Erstellens ist dir noch bewusst, dass du den "unteren" Text "gelb" gefärbt hast und der Text außerdem unterstrichen ist. Änderst du dann aber die Farbe auf Rot, kannst du die Klasse nur noch schwer zuordnen. Außerdem hast du Schriftfarbe und die Unterstreichung in eine CSS-Klasse vermischt.
Zugeordnete Klassen: lx-text-yellow lx-text-underlined
Der Text hat nun den selben Style wie im "falschen" Beispiel. Aber jetzt sind die erstellten Klassen wiederverwendbar und man versteht, was sie tun: Die Klassen können genutzt werden, um den Text anderer Elemente "Gelb" zu färben oder zu unterstreichen
Bevor eigene CSS-Klassen erstellt werden, sollte immer geprüft werden, ob schon entsprechende Standard-Klassen im Baukasten vorhanden sind. Standard-Klassen wurden festgelegt für die Typografie, Buttons, Formulare sowie weitere vordefinierte Klassen.
