Breakdance Basics

Webdesign

Ich habe einen DIV, der 3 weitere DIVs beinhaltet. Ich möchte, dass die 3 Divs alle gleich hoch sind; Stichwort stretch.

  1. Wähle das Elternelement (den Container-DIV) aus:
    • Klicke in Breakdance auf den äußeren div, der die drei inneren divs enthält.
  2. Aktiviere Flexbox für das Elternelement:
    • Suche in den Einstellungen für diesen ausgewählten Container-DIV nach Layout-Optionen. Oft heißt dieser Bereich „Layout“, „Anzeige“ (Display), „Container“ oder direkt „Flexbox“.
    • Stelle die Eigenschaft „Display“ (oder „Anzeige“) auf Flex. (Manchmal gibt es auch direkt einen Schalter „Flex-Layout aktivieren“ o.ä.).
  3. Überprüfe die Flex-Richtung (Direction):
    • Stelle sicher, dass die „Direction“ (Richtung) auf Row (Zeile) eingestellt ist, wenn deine drei divs nebeneinander dargestellt werden sollen. Wenn sie untereinander sind und die gleiche Breite haben sollen, wäre es Column, aber für gleiche Höhe ist Row typisch.
  4. Stelle die Ausrichtung der Items ein (Align Items):
    • Suche nach einer Option namens Align Items (Elemente ausrichten, Vertikale Ausrichtung in einer Zeile).
    • Wähle hier die Option Stretch (Strecken, Dehnen).
      • Wichtig: Stretch ist oft der Standardwert für Align Items, wenn du display: flex aktivierst. Es kann also sein, dass es schon funktioniert, sobald du den Container auf Flex stellst. Wenn nicht, musst du diese Einstellung explizit setzen.
      • Damit Stretch funktioniert, dürfen die inneren divs keine eigene, feste Höhe (z.B. height: 200px;) gesetzt haben, die das Strecken verhindern würde. Wenn sie eine haben, entferne diese oder setze sie auf auto.

Zusammenfassend für Breakdance Builder:

  • Parent-DIV (Container):
    • Display: Flex
    • (Optional, falls nicht Standard) Direction: Row
    • Align Items: Stretch (oder eine ähnlich benannte Option für vertikales Strecken der Kind-Elemente)
  • Child-DIVs (deine 3 inneren DIVs):
    • Sollten keine feste Höhe haben, die das Strecken verhindert.

Zeilenumbruch in HTML. Wie ist der Code?

Hallo! Der Code für einen Zeilenumbruch in HTML ist ganz einfach.

Du verwendest dafür das <br>-Tag.

So sieht der Code aus:

HTML

<p>Das ist die erste Zeile.<br>Und das ist die zweite Zeile, nach dem Umbruch.</p>

Ich habe ein Grid-Element. Ich möchte in der Tablet-View die Reihenfolge der Divs tauschen – order first oder reverse order. Wie kann ich das tun?

/* Das ursprünglich dritte Div soll an die erste Stelle (negative Zahl ist sicher) */ 

order: -1;

Seitenbreite

Um die Containerbreite in Breakdance Builder für ein boxed Layout in den Global Settings zu ändern, musst du folgende Schritte befolgen:

  1. Öffne die Global Settings: Klicke im Breakdance Builder auf das Menü-Symbol (drei Punkte) in der oberen rechten Ecke und wähle „Global Settings“ aus.
  2. Gehe zu „Containers“: Wähle die Option „Containers“ innerhalb der Global Settings aus.
  3. Ändere die Containerbreite: Hier kannst du die maximale Breite der inneren Container für deine Sections festlegen. Diese Einstellung bestimmt, wie breit die Inhalte innerhalb der Seiten-Bereiche sind. Durch Verringern der Breite wird ein boxed Layout erzeugt, das bedeutet, dass die Inhalte innerhalb eines bestimmten Bereichs bleiben und nicht die gesamte Seite ausfüllen.

REM 62,5%

In den Global Settings im Bereich CSS den folgenden Code eintragen:

html { font-size: 62.5%; }

Setting the HTML font-size to 62.5% in CSS, often referred to as the „62.5% trick,“ is a common practice to make rem calculations more intuitive. When you set html { font-size: 62.5%; }, it effectively makes 1rem equal to 10px, simplifying conversions between pixels and rems. 

Global Settings Line-Height

Die Line-Height sollte auf etwa 1.5 – 1.6 eingestellt werden.
Global Settings > Typographie > Advanced

Type Scale ca. 1.2 – 1.25

Visualisieren auf https://typescale.com/

Designset

  • Columns / Grid
  • H1 – H4
  • Bodytext Lorem Ipsum
  • Primary Button & Secondary Button
  • Form
  • Schriftfarben und Hintergrundfarbe über Global-Settings