Breakpoints, Sections und Container

Die Vorteile von Breakpoints, Sections und Containern liegen in ihrer Fähigkeit, Inhalte effizient zu organisieren, visuelle Hierarchien zu schaffen und das Layout responsiv zu gestalten, indem sie sicherstellen, dass der Inhalt in verschiedenen Breakpoints sauber und konsistent angezeigt wird.

Breakpoints

WKO.at enthält sechs Brakpoints, für den responsiven Aufbau.

Schriftgrößen und Zeilenhöhen von Überschriften
Zeilenüberschriften	xs	sm	md	lg	xl	xxl
Breakpoints	bis 559px	560px	800px	992px	1230px	1424px
Container	100%	480px	720px	912px	1152px	1344px
Komponenten	1-spaltig
	2-spaltig
	3-spaltig

Sections

Sections spielen eine zentrale Rolle im WKO Design, da sie den Inhalt in klar abgegrenzte Bereiche unterteilen und dadurch Struktur und Hierarchie schaffen. Es ist wichtig darauf zu achten, dass aufeinanderfolgende Sections sich farblich unterscheiden und abwechselnd gestaltet werden, um die visuelle Trennung und Lesbarkeit zu fördern.

Hier könnte ein Inhalt, eine vollflächige Komponente oder ein weiterer Spalten Container platziert werden.

<section class="bg--warm-grey-secondary"><!-- optionale Klasse für Hintergrundfarbe -->
    <div class="container">
        <!-- Inhalt, vollflächige Komponente oder Spalten Container -->
    </div>
</section>
<!-- optional weitere Sections -->
<section>
    <div class="container">
        <!-- Inhalt, vollflächige Komponente oder Spalten Container -->
    </div>
</section>
...

eService

Inhalte in eService, Benutzerkonto oder ähnlichen Bereichen werden mit einem zentrierten 2/3 Container dargestellt und beinhalten eine weitere Verschachtelung.

Hier könnte ein Inhalt, eine vollflächige Komponente oder ein weiterer Spalten Container platziert werden.

<section class="bg--dusty-peach-secondary"><!-- optionale Klasse für Hintergrundfarbe -->
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <!-- Inhalt, vollflächige Komponente oder Spalten Container -->
            </div>
        </div>
    </div>
</section>
<!-- optional weitere Sections -->
<section>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <!-- Inhalt, vollflächige Komponente oder Spalten Container -->
            </div>
        </div>
    </div>
</section>
...

Container

Container werden innerhalb von Sections eingesetzt, um darin die Komponenten zu platzieren. Mehrere Container können in einer Section verwendet werden, um komplexere Layouts zu gestalten und so die Organisation der Inhalte zu optimieren.

2/3 und 1/3

2/3 Bereich, für Inhalt/Komponenten

1/3 Bereich, für Inhalt/Komponenten

<div class="row">
    <div class="col-lg-8">
        <!-- 2/3 Bereich, für Inhalt/Komponenten -->
    </div>
    <div class="col-lg-4">
        <!-- 1/3 Bereich, für Inhalt/Komponenten -->
    </div>
</div>

50%

50% Bereich, für Inhalt/Komponenten

<div class="row">
    <div class="col-md-6">
        <!-- 50% Bereich, für Inhalt/Komponenten -->
    </div>
    <div class="col-md-6">
        <!-- 50% Bereich, für Inhalt/Komponenten -->
    </div>
</div>

1/3

1/3 Bereich, für Inhalt/Komponenten

<div class="row">
    <div class="col-md-6 col-lg-4">
        <!-- 1/3 Bereich, für Inhalt/Komponenten -->
    </div>
    <div class="col-md-6 col-lg-4">
        <!-- 1/3 Bereich, für Inhalt/Komponenten -->
    </div>
    <div class="col-md-6 col-lg-4">
        <!-- 1/3 Bereich, für Inhalt/Komponenten -->
    </div>
</div>

25%

25% Bereich, für Inhalt/Komponenten

<div class="row">
    <div class="col-md-6 col-lg-3">
        <!-- 25% Bereich, für Inhalt/Komponenten -->
    </div>
    <div class="col-md-6 col-lg-3">
        <!-- 25% Bereich, für Inhalt/Komponenten -->
    </div>
    <div class="col-md-6 col-lg-3">
        <!-- 25% Bereich, für Inhalt/Komponenten -->
    </div>
    <div class="col-md-6 col-lg-3">
        <!-- 25% Bereich, für Inhalt/Komponenten -->
    </div>
</div>