Bricks Builder – globale CSS Klassen anwenden

Im Bricks Builder können wir globale CSS Klassen erstellen und zuweisen. Dieses bietet sich bei wiederkehrenden Bereichen und Elementen an. Haben wir zum Beispiel mehrere Heros auf verschiedenen Seiten, können wir einen einheitlichen Hintergrund, mit Rändern und Schatten erzeugen.

Wir brauchen einen erstellten Stil nicht übertragen, sondern weisen diesen einfach allen gewünschten Inhalten zu. Auch können wir eine erstellte Regel schnell ändern oder kopieren, auf eine andere Klasse übertragen und Bereiche anpassen. Eine Klasse wird benannt, gestylt und dann einem, bzw. mehreren Elementen zugeordnet. So wie hier im Beispiel der Cards…

fertige boxen alle

Die Elemente – Icon Boxen

Im Beispiel habe ich drei Spalten mit je einem Div, einer Überschrift, einem Text und einem Icon erstellt.

icon cards

Ich beginne mit dem Div, das die 3 Inhalte umschließt und weise diesem meine individuelle CSS Klasse zu “card-container”. Die Klassennamen vergebe ich so, dass sie für mich schlüssig und verständlich sind. Im linken Panel befindet sich oben unter dem Elementnamen ein Eingabefeld. In diesem Feld steht standardmäßig die Element-ID. Klicke ich hier rein, kann ich meine Klasse (ohne Punkt) eingeben.

klasse eingeben

Jetzt, mit aktiver Klasse beginne ich mit dem Stylen und füge rechts und links einen Abstand / Margin von 10px ein, füttere gesamt mit Padding je 25px auf. Das Div bekommt noch eine Hintergrundfarbe, einen dunkleren Rahmen von 1px und einen Box-Radius von 6px. Wenn wir das Div anklicken sehen wir im Panel Elemente die zugewiesenen Klassen.

aktive klasse
drei cards

Ich wähle das mittlere Div aus und klicke in das CSS Eingabefeld, es erscheint meine zuvor eingegebene “card-container” CSS Klasse. Diese klicke ich an und die Spezifikationen werden angewandt. Das Ganze folgt dann noch im dritten Div…

hintergrund dreier

Eine zugewiesene Klasse kann genauso gut wieder entfernt werden, dafür klicken wir mit der Maus auf die Klasse und klicken das kleine “X”.

klasse entfernen

Die Überschriften

Nun kommen die Überschriften dran. Ich klicke die erste Überschrift an und gebe im Eingabefeld wieder meine neue Klasse ein “card-heading”. 15px Margin unten und die Schriftstäre setze ich auf 300. Dieses Klasse weisen ich den beiden anderen Überschriften nun auch zu.

card heading

Der Text

Dem Texte gebe ich die “card-text” Klasse und erhöhe die Schriftgröße auf 18px und weise die Klasse den anderen Texten zu…

text element alle

Die Icons

Ich wähle ein Icon an und gebe ihm die Klasse “card-icon”. Ich gebe dem Icon eine Farbe, einen oberen Abstand von 30px und zentriere es. Ich wähle die beiden weiteren Icons an und weise ihnen die CSS Klasse zu. Die Icons kann ich übrigens, ohne von der Klasse beeinflusst zu werden austauschen.

card icon

Das Eingabefeld

Das globale Klassen Eingabefeld zeigt uns oben die ID des jeweiligen Elementes und darunter die angewandte CSS Klasse und alle weiteren selbst erstellten Klassen.

eingabefeld

Klicke ich ein Element an, sehe ich die zugewiesen Klasse 1 und ob sie gerade in der Bearbeitung aktiv ist 2.

eingabefeld zwei

Bin ich in der aktiven Bearbeitung 2 kann ich z.B. den Hintergrund ändern und die neue Farbe überträgt sich sofort an alle Elemente mit dieser Klasse.

andere farbe

Möchte ich jetzt aber gerne ein Element anders haben, wähle ich oben aus dem Eingabefeld die original ID aus und bearbeite den Hintergrund. Es greift die Hintergrund CSS Regel für die ID.

andere farbe3

CSS Eingabefeld Optionen

  • Klasse mit x entfernen.
  • Per Schloss können die Stile gesperrt werden und sind nicht mehr zu bearbeiten.
  • Mit dem Stift können wir umbenennen.
  • Das Klemmbrett kopiert die Stile.
  • Per Einfügen-Pfeil die Stile in einer anderen Klasse übertragen.
  • Per Kreis die Stile wieder zurücksetzen.
  • Per Mülleimer die Stile löschen.
eingabefeld optionen

Die Boxen mit gleicher Höhe

Wir könnten nun noch die Boxen auf die gleiche Höhe bringen. Da gibt es verschiedene Wege. Hier findest du zwei Möglichkeiten… Um Divs zu sparen wähle ich den längsten Text aus und achte darauf, dass die Klasse “card-text” aktiv ist. Im Panel Stil in Layout gebe ich eine Min. Höhe von ca. 220px ein. Mit dem Wert müsst ihr etwas spielen. Sind die anderen Textelemente noch mit ihrer Klasse aktiv, sollten alle Boxen nun die gleiche Höhe haben.

min hoehe

Gegebenenfalls müssen wir in den mobilen Ansichten nacharbeiten und den Wert anpassen. Dabei immer darauf achten, dass die Klasse aktiv ist.

Ein anderen Weg ist, mit einem zusätzlichen Div zu arbeiten. Ich wähle zuerst den Container aus, indem die drei Divs mit den Inhalten liegen und gehe im Panel Inhalt auf “Ausrichtung Querachse” “Strecken”.

container strecken2

Dann füge ich in das Div mit meinen Inhalten ein weiteres Div ein und schiebe den Text und das Icon in dieses neue Div.

zusatz divs

Ich wähle das Div aus und gebe ihm die Klasse “card-inner-container”. Diesem gebe ich nun eine Höhe von 100%.

inner div hoehe

Die Klasse gebe ich an alle drei inneren Divs und gehe in den Tab “Inhalt” auf “Ausrichtung Hauptachse” und wähle “Abstand dazwischen”. Die Höhe der Boxen richtet sich nun dank Flexbox nach dem längsten Text und die Icons werden am unteren Rand platziert während der Text oben bleibt.

card inner

Auch hier müssen wir in der mobilen Ansicht nacharbeiten. Dafür reicht es aber, in der “Mobile landscape” Ansicht den inneren Div anzuwählen und bei aktiver “card-inner-container” die Höhe auf “Auto” zu setzen.

hoehe auto

Ach ja, der einfachste Weg wäre, die Textlänge einfach anzugleichen 🙂

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.