SS4 Config » Spalten

Section-Container und Spalten

Der Inhalt jeder "Page" ist eine "Section" deren Breite wahlweise eingerichtet werden kann. Zur Verfügung stehen folgende Container-Breiten:

screenshot

Container-Breite und Spalten werden getrennt eingerichtet. Es ist eine Frage der Gestaltung, in welcher Breite wie viele Spalten sinnvoll sind. In der Ansicht für das Smartphone werden die Spalten unter 768px Breite aufgehoben.

Spalten

Der Inhalt des Section-Containers kann in mehreren Spalten dargestellt werden. Der Spalten-Umbruch wird mit CSS ausgeführt, er ist damit weitgehend automatisiert. Block-Elemente wie Titel, Listen, Absätze werden auf die Spalten verteilt. Bilder passen sich der jeweiligen Breite an.

Der Abstand der Spalten ist fix (Ausbau möglich!), eine gepunktete Linie, Farbe Silver, trennt die Spalten.

spalten

Bilder in Spalten

Wenn Bilder in Spalten eingefügt werden, passen diese sich der maximalen Spaltenbreite an. Die Bilder bleiben im Fluss der Spalte. Es ist daher erforderlich, die Bilder für ihre grösste Ausdehnung abzuspeichern.

Urnersee

Listen in Spalten

Eine Liste wird direkt in den Text geschrieben, sie wird innerhalb eines Absatzes dargestellt.

Punkt Eins
Punkt Zwei
Punkt Drei

Spalten auf Smartphone

Auf einer Bildschirmgrösse unter 768 Pixel, werden alle Spalteneinstellungen auf eine reduziert. Die Spaltenlinie und der Spaltenabstand wird zurückgesetzt.

spalten smartphone

Browsergeschichten

Die üblichen Verdächtigen melden sich zurück. Die CSS-Eigenschaften für das Formatieren der Umbrüche für "columns", "break-inside", "break.before", "break-after" u.a. werden nicht von allen Browsern unterstützt. In der Dokumentation zu Firefox, sind diese CSS3-Eigenschaften zur Implementation empfohlen, aber im Moment noch wirkungslos. Safari, Chrome und Explorer unterstützen diese Eigenschaften. Auf den ca. 32 verschiedenen Smartphone-Browser spielt das keine Rolle, da wird der Inhalt in einer einzigen Spalte dargestellt.