7 · Gestaltung

Drei Ebenen, von sicher nach frei:

1. design — das Aussehen der ganzen App. Wird geprüft.
2. Modifikatoren — einzelne Bausteine anders. Werden geprüft.
3. stil — echtes CSS. Wird nicht geprüft.

Wer bei 1 und 2 bleibt, kann nichts kaputtmachen. Wer 3 benutzt, kann alles.

Eine Skala für alles

Überall, wo eine Größe gemeint ist, gilt dieselbe Reihe:

keine · klein · normal · gross · riesig · voll

Ob es um Rundungen, Abstände, Schatten, Ränder oder Höhen geht — immer diese sechs Wörter. Das ist der Grund, warum man sich nichts merken muss.

Wo eine Länge sinnvoll ist, geht auch eine Zahl in Pixeln:

  kopfzeile
    hoehe 80

Dasselbe gilt für die Seitenbreite. breite 1280 ist eine Obergrenze: Auf einem großen Bildschirm bleibt die Seite höchstens so breit, auf dem Telefon ist sie trotzdem so schmal wie das Telefon.

Das ist als Ausnahme gedacht, nicht als Regel. Wer überall Zahlen schreibt, verliert genau die Stimmigkeit, für die die Skala da ist.

Ebene 1 · der design-Block

design
  akzent        #c7a74a
  modus         automatisch
  rundung       klein
  breite        riesig
  dichte        normal
  schrift       system
  titelschrift  serifen

  kopfzeile
    hoehe       gross
    hintergrund #0e1a2b
    farbe       weiss
    rand        keine
    fixiert     ja

  karte
    schatten klein
    rand     keine
    dichte   gross

  knopf
    rundung     klein
    hintergrund #c7a74a
    farbe       #0e1a2b

  fusszeile
    hintergrund #0e1a2b
    farbe       #b9c2ce
    dichte      riesig

  menue
    farbe #e8dcb8

  seite
    hintergrund #fbfbfd

Oben, für die ganze App

modus automatisch folgt der Einstellung des Geräts — dieselbe App ist dann hell oder dunkel, je nachdem, was der Betrachter eingestellt hat. Auch in der nativen App.

Eigene Farben für den dunklen Modus

Wer Grund und Schrift selbst festlegt, legt sie meist für hell fest. Im dunklen Modus passen sie dann nicht mehr: Die Schrift wird hell, der Grund bleibt Papierweiß. Dafür gibt es dunkel im design-Block:

design
  modus         automatisch
  akzent        #9b2c1f
  hintergrund   #fbf8f1
  farbe         #1f1d1a

  kopfzeile
    hintergrund #fbf8f1

  dunkel
    akzent      #e2826b
    hintergrund #171512
    farbe       #e9e4d8

    kopfzeile
      hintergrund #171512

• Nur Farben. Oben akzent, hintergrund, farbe; in den Gruppen deren hintergrund und farbe. Rundung, Breite oder Schrift wechseln nicht mit dem Licht und werden im dunkel-Block als Fehler gemeldet.
• Was dort nicht steht, bleibt. Eine dunkle Kopfzeile darf in beiden Modi dunkel sein, ohne dass man sie zweimal hinschreibt.
• Wann er gilt: bei modus automatisch, wenn das Gerät dunkel eingestellt ist, und bei modus dunkel immer. Bei modus hell gilt er nicht — das meldet die Prüfung.

Setzt du Grund oder Schrift fest, lässt den Modus aber automatisch und schreibst keinen dunkel-Block, warnt fibel prüfe.

Die native App bekommt den Block im Design als dark mit.

Ein Knopf zum Umschalten

menue
  verweis "Beispiele" -> /beispiele
  modusschalter

Ein runder Knopf, im Menü ganz rechts: Mond heißt „dunkel machen“, Sonne „hell machen“. Die Wahl merkt sich der Browser und setzt sie beim nächsten Besuch, bevor die Seite gemalt wird — nichts blitzt erst hell auf. Gespeichert wird nur hell oder dunkel, im Browser des Betrachters, nicht auf dem Server.

• Die Wahl des Betrachters geht vor: vor der Einstellung des Geräts und vor modus. modus ist dann nur noch, womit die Seite beim ersten Besuch beginnt.
• Deshalb gilt der dunkel-Block mit Schalter auch unter modus hell. Wer feste Grundfarben setzt und einen Schalter anbietet, braucht ihn — sonst warnt fibel prüfe.
• Die native App folgt der Einstellung des Telefons und lässt den Knopf weg.

Varianten

Nicht jede Karte soll gleich aussehen. Eine Variante ist dieselbe Gruppe mit einem eigenen Namen:

design
  karte
    rand klein
  karte hervorgehoben
    hintergrund #1f1d1a
    farbe       #fbf8f1
    dichte      gross
  knopf leise
    hintergrund keine
    rand        keine
  schild markiert
    hintergrund #9b2c1f
    farbe       weiss

  dunkel
    karte hervorgehoben
      hintergrund #e9e4d8
      farbe       #171512

Auf der Seite steht der Name wie ein Modifikator:

karte hervorgehoben einblenden
  schild "Neu" markiert
  untertitel "Spielwiese"
  knopf "Mehr" -> /spielwiese leise

• Varianten gibt es für karte, kasten, knopf und schild.
• Was die Variante nicht setzt, kommt aus der Gruppe: karte hervorgehoben behält den Rand der gewöhnlichen karte.
• Der Name ist dein eigenes Wort. Eines der Sprache — gross, mitte, dunkel — geht nicht, sonst wäre er auf der Seite nicht mehr von einem Modifikator zu unterscheiden.
• Ein Name, den der design-Block nicht kennt, meldet fibel prüfe bei karte und kasten.
• Im dunkel-Block bekommt eine Variante eigene Farben. Setzt eine Variante nur den Hintergrund oder nur die Schrift und hat kein dunkles Gegenstück, warnt die Prüfung: Die andere Farbe kippt im dunklen Modus.
• Die native App bekommt den Namen am Knoten ("variante": "hervorgehoben") und die Werte im Design unter varianten.

Logo und Menü

design
  kopfzeile
    logo       "/__bilder/logo.svg"
    menue      rechts          # links (Vorgabe), mitte oder rechts
    appname    nein            # nur das Logo, ohne den Namen daneben

• logo ist eine Adresse, die mit / oder https:// beginnt — meist ein Bild aus dem Bilderordner. Die Höhe richtet sich nach der Kopfzeile.
• appname nein lässt den Namen weg. Das Logo trägt ihn dann als Alternativtext, damit ein Vorleseprogramm weiß, wohin es führt.
• menue legt fest, wo die Verweise stehen.
• Auf dem Telefon klappt ein Menü mit vier oder mehr Einträgen hinter einen Knopf. Ohne Javascript bleibt es aufgeklappt und benutzbar. Der Modusschalter zählt nicht mit.
• Auch die eingebauten Seiten — Anmeldung, „gibt es nicht“ — zeigen das Logo.

Gruppen

hintergrund keine heißt durchsichtig — etwa für einen leisen Knopf.

Farben

#rrggbb oder die Namen weiss, schwarz, grau — auf Englisch white, black, gray. Ein unbekannter Farbname wird gemeldet, nicht stillschweigend ignoriert.

Schriften

  schrift       system
  titelschrift  serifen

Du darfst auch einen eigenen Stapel hinschreiben:

  schrift "Inter, system-ui, sans-serif"

Was Fibel nicht tut: Schriften nachladen. Ein Webfont von einem fremden Server bedeutet, dass dieser Server die IP-Adresse jedes Besuchers sieht — das gehört in die Datenschutzerklärung und womöglich hinter eine Einwilligung. So etwas soll nicht nebenbei passieren, weil jemand einen Schriftnamen hingeschrieben hat. Wer einen Webfont will, lädt ihn selbst und bindet ihn über stil ein.

Ebene 2 · Modifikatoren

Stehen am Ende einer Zeile:

titel "Willkommen" mitte gross
hinweis "Kleingedrucktes" klein gedaempft
reihe getrennt
raster gross einblenden

einblenden greift nur, wenn im Betriebssystem nicht „weniger Bewegung" eingestellt ist. Und ohne JavaScript steht ohnehin alles sofort da — es bleibt nie etwas unsichtbar, weil eine Animation ausgeblieben ist.

Layout

Raster

raster gross
  karte
    untertitel "Erstens"
  karte
    untertitel "Zweitens"

So viele Kacheln nebeneinander, wie hineinpassen. klein, gross und riesig bestimmen, wie breit eine Kachel mindestens ist.

Soll es genau so viele Spalten geben, wie du sagst, schreib die Zahl dazu:

raster 3 einblenden
  karte breit
    untertitel "Über zwei Spalten"
  karte
    untertitel "Eine"
  karte voll
    untertitel "Über die ganze Zeile"

• 1 bis 6 Spalten. Auf dem Tablet werden es höchstens zwei, auf dem Telefon eine.
• breit spannt eine Kachel über zwei Spalten, voll über die ganze Zeile — beides nur in einem Raster mit fester Spaltenzahl.

Kacheln, die weit unterhalb liegen, werden gar nicht erst gesetzt und gemalt — lange Listen bleiben dadurch flüssig. Übertragen werden sie trotzdem; seitenweises Nachladen gibt es noch nicht.

Spalten

spalten
  seitenleiste klein
    karte
      untertitel "Filter"
  haupt
    ...
  seitenleiste
    ...

haupt nimmt den Rest, seitenleiste bleibt schmal und beim Scrollen stehen. Beliebig viele, auf beiden Seiten — die Reihenfolge im Programm entscheidet. Unter 860 Pixel wird daraus ein Untereinander.

Auf dem Telefon rückt haupt dabei nach oben, die Seitenleisten folgen. Zwei Modifikatoren ändern das:

spalten
  seitenleiste "Filter" klappbar zuerst
    ...
  haupt
    ...

• klappbar: Auf dem Telefon wird die Seitenleiste ein Abschnitt zum Aufklappen, beschriftet mit dem Text dahinter (ohne Text: „Mehr“). Auf breiten Bildschirmen ist sie immer offen. Ohne Javascript bleibt sie offen.
• zuerst: Auf dem Telefon bleibt die Seitenleiste vor dem Hauptteil stehen.

Bühne

buehne "/__datei/abc.jpg" voll mitte dunkel parallax
  hinweis "Erfahrung. Qualität. Vertrauen."
  titel "Karat"
  knopf "Ansehen" -> /katalog

Der einzige Baustein, der aus der Textbreite ausbricht und die ganze Fensterbreite nimmt. Der Inhalt darin bleibt trotzdem in der Textbreite und steht bündig mit dem Rest der Seite — sonst liefe die Schrift quer über den ganzen Bildschirm.

Steht die Bühne ganz oben auf der Seite, schliesst sie direkt an die Kopfzeile an. hell legt einen Schleier in der Farbe des Seitenhintergrunds über das Bild, im dunklen Modus also einen dunklen.

Siehe Bausteine für die Modifikatoren.

Abschnitt

design
  abschnitt
    dichte gross
  abschnitt getoent
    hintergrund #f4ecdf
  abschnitt nacht
    hintergrund #1f1d1a
    farbe       #fbf8f1

seite /
  buehne gross hell
    titel "Fibel"

  abschnitt getoent
    ueberschrift "Was drin ist"
    raster
      ...

  abschnitt nacht mitte
    ueberschrift "Probier es aus"

Ein Band über die volle Fensterbreite wie die Bühne, aber ohne Bild und Schleier. Damit bekommt eine Seite Rhythmus: ein getönter Streifen, ein dunkler, dazwischen Papier.

• Farbe, Rand und Luft stehen im design-Block — in der Gruppe abschnitt und ihren Varianten, auch im dunkel-Block.
• dichte ist hier die Luft oben und unten, das Dreifache der Skala. klein, gross und riesig am Baustein ändern sie ebenfalls.
• Der Inhalt bleibt in der Textbreite und bündig mit dem Rest der Seite.
• Abschnitte nebeneinander, direkt nach einer Bühne, ganz oben und ganz unten auf der Seite stehen ohne Lücke.

Das Menü springt zu den Abschnitten

menue
  verweis "Merkmale" -> /#merkmale
  verweis "Beispiele" -> /#beispiele

seite /
  abschnitt "merkmale" getoent
    ...
  abschnitt "beispiele"
    ...

Der Text vor den Modifikatoren ist eine Sprungmarke: kleine Buchstaben, Ziffern und Bindestriche. Ein Verweis -> /#merkmale springt auf der Startseite dorthin und öffnet sie von jeder anderen Seite aus an dieser Stelle. Ist die Kopfzeile fixiert, bleibt das Menü beim Scrollen stehen und markiert den Abschnitt, in dem man gerade ist. Eine Sprungmarke, die es auf der Zielseite nicht gibt, meldet fibel prüfe.

Ebene 3 · der Notausgang

stil "eigenes.css"

stil ".f-card:hover { transform: translateY(-2px) }"

Entweder eine Datei neben der .fibel-Datei oder CSS direkt in Anführungszeichen. Beides wird ans erzeugte Stylesheet angehängt und gewinnt damit.

Dieser Teil wird nicht geprüft. Ein Tippfehler darin fällt niemandem auf, bis man hinsieht. Und was hier steht, gilt nur im Browser — die native App kennt kein CSS.

Die Klassennamen

Wer den Notausgang benutzt, braucht sie. Sie sind absichtlich stabil:

Die Farben liegen als CSS-Variablen bereit: --accent, --bg, --fg, --muted, --card, --line. Wer die benutzt statt eigener Werte, bleibt in hell und dunkel stimmig.

Weiter: Wörter