Fundament
Alle Farben, Schriften, Maße und Basisklassen der Sektionsbibliothek an echten Elementen. Wenn du bei einem neuen Kunden die Werte gesetzt hast, ist das die Seite, auf der du prüfst, ob alles greift.
Oxygen 6.2.0-beta.5 · Präfix vs- · Manrope für Überschriften, Sora für Fließtext · Container 1440 px
Farben
Die Namen sind nach Aufgabe vergeben, nicht nach Farbe. Bei einem Kundenprojekt ändern sich nur die Werte — jede Klasse und jeder Block greift danach automatisch.
Typografie
Die Größen wachsen stufenlos mit dem Fenster. Laufweite und Zeilenabstand sind pro Stufe gesetzt: je größer die Schrift, desto enger die Buchstaben und desto knapper die Zeilen.
Der Vorspann steht direkt unter der Überschrift und fasst in einem Satz zusammen, worum es geht.
Fließtext in Sora. Die Zeilenlänge ist auf 68 Zeichen begrenzt, damit das Auge beim Zeilensprung die Spur hält — auch dann, wenn der Container ringsum 1440 Pixel breit läuft.
Kleingedrucktes, Bildunterschriften, Hinweise.
Schaltflächen
Alle Varianten sind mindestens 48 Pixel hoch und damit sicher zu treffen. Beim Überfahren heben sie sich um zwei Pixel, beim Drücken geben sie leicht nach — die Rückmeldung kommt sofort, nicht erst beim Loslassen.
Karten, Medien, Marker
Die Bausteine, aus denen die späteren Sektionen zusammengesetzt werden.
vs-card
Kartencontainer mit Rahmen, Radius und einem sehr flachen Schatten. Der Innenabstand wächst mit dem Fenster.
vs-stack
Setzt gleichmäßige Abstände zwischen alle Kinder. Mit vs-stack-sm enger, mit vs-stack-lg weiter.
vs-rule
Haarlinie in der Linienfarbe, für Trennungen innerhalb einer Sektion.
Darunter geht es weiter.
vs-media
Bildrahmen mit eigenem Radius, beschnittener Darstellung und einer hellen Grundfläche, solange das Bild noch lädt. In der Bibliothek stehen überall Platzhalter — die werden beim Einrichten eines Kundenprojekts ausgetauscht.
Dunkle Sektion
Diese Sektion trägt nur eine zusätzliche Klasse. Überschrift, Fließtext, Linien, Karten und Vorspann drehen sich von allein — kein Block muss dafür eine zweite Fassung haben.
Maße und Abstände
Alles Wiederkehrende steckt in Variablen. Ein Kundenprojekt setzt die Werte einmal, danach folgt jeder Block automatisch.