CSS-Klassen in Bricks
Ein großer Vorteil vom Bricks Builder ist, dass es ein ausgeklügeltes System für CSS-Klassen gibt, welche man mehreren Elementen anfügen kann und somit zentral Design-Einstellungen auf unterschiedliche Elemente vom selben Typ anwenden kann.
Diese Blöcke haben die gemeinsame CSS-Klasse .sw-block-beispiel :
Hier kannst du direkt Änderungen der CSS-Werte vornehmen (margin ist zu den Seiten 0, die Spalten zwischen den Blöcken sind durch column-gap: 20px; im Elternelement geregelt):
Anlegen von CSS-Klassen in Bricks
Durch Klicken der „Element-ID“ links oben bei den Element-Einstellungen, erscheint ein Fenster bei dem direkt ein Klassenname eingegeben werden kann. Mit Enter oder Klick auf die Diskette wird die Klasse gespeichert.
Sollten bereits Klassen angelegt worden sein, kann hier auch gesucht werden.
Um die Style-Angaben auf die Klasse anzuwenden, muss diese ausgewählt sein – sie wird dann gelb markiert. Alle Einstellungen werden nun auf die Klasse angewandt und hat somit Auswirkungen auf alle Elemente, die der Klasse zugeordnet sind.
Hier wurde in der .sw-block-beispiel das Layout, der Hintergrund und der Rahmen bestimmt. Dies ist auch durch den gelben Indikator ersichtlich. Durch Klick auf den • werden die entsprechenden Styles gelöscht.
Einem Element können auch mehrere Klassen hinzugefügt werden.
Mit dem × kann die Klasse wieder abgewählt werden. Danach werden alle Style-Einstellungen nur dem einen Element zugeordnet.
Soll eine Klasse nicht mehr dem Element zugeordnet werden, kann sie mit dem roten × entfernt werden – das × erscheint, wenn man mit dem Cursor über die entsprechende Klasse fährt.
Wird eine Klasse sicher nicht mehr benötigt, kann sie aus der Liste gelöscht werden – nach dem Klick auf den Mülleimer muss die Aktion nochmals durch Klick auf einen Haken bestätigt werden.
