Meine Website

(Inhalte übersichtlich in Boxen = Cards anordnen)

1. Einzelkarte möglich:

{ FlexCards | Card | | Titel | Inhalt | Fuss }
(Breitenparameter leer; Element nimmt sich verfügbare Breite)

Titel

Inhalt

{ FlexCards | Card | 450 | Titel | Inhalt | Fuss }
(Einzelkarte mit 450px Breite)

Titel

Inhalt

Mehrere Einzelkarten werden untereinander angeordnet!

---

2. Karten in Zeile = Reihe anordnen

Dafür werden mehrere Einzelkarten von Container umschlossen = Reihenelement ROW
Bisheriger Aufruf des Plugins (schematisch):
{ Reihenelement ROW | Kartenelemente CARD 1 - n }

Schreibweise für übersichtlichen Einbau nutzen:
{ Reihenelement |
{ Kartenelement 1 }
{ Kartenelement 2 }
}

In kompletter Syntax (hier 3 Kartenelemente, 250px breit):
{ FlexCards | Row |
{ FlexCards | Card | 250 | Titel1 | Inhalt Karte 1 | Fuss 1 }
{ FlexCards | Card | 250 | Titel2 | Inhalt Karte 1 | Fuss 2 }
{ FlexCards | Card | 250 | Titel3 | Inhalt Karte 1 | Fuss 3 }
}

---

Warum Erweiterung des Plugins?
Das Aussehen der Karten ist in der plugin.css geregelt. Standard in Grautönen.
Jede Anpassung (Farbe, Abstände, Ausrichtung, Inhalte platzieren) muß dort eingetragen werden.
Das setzt CSS-Kenntnisse voraus und macht Updates des Plugins schwierig.

Um hier vorgefertigte Gestaltungsvarianten zu nutzen, wurde das Reihenelement um einen Parameter erweitert.
Vorteile:
- kein Eingriff in die plugin.css nötig
- es reicht die Kenntnis Parameternamen (also für: Farbe; Ausrichtung; Kartenabstände etc.)
  (Namen in readme beschrieben)
- Gestaltungsvarianten können modifiziet werden - STANDARD bleibt erhalten
- Gestaltungsvarianten können neu angelegt werden -  STANDARD bleibt erhalten

---

3. Zusätzlicher Parameter am Reihenelement:

Bisheriger Aufruf:
{ FlexCards | Row |
{ FlexCards | Card | Titel | Text | Fuss }
}

Neuer Aufruf ersetzt wie folgt:
{ FlexCards | Row | |
{ FlexCards | Card | Titel | Text | Fuss }
}

Migrationshinweis:
(Wenn FlexCards im Einsatz war, nach Installation FlexCards-2 den zweiten '|' nach Row ergänzen!)

Zusatzparameter nach Row | |
Was kann gestaltet werden?

• Layout - zentriert, links- / rechtsbündig, Kartenabstand
• Stil - Rundung, Schatten, Rahmen
• Farbschema - Rot, Grün, Blau, Beige, Dunkel
• Inhalt - Bilder, Zeilenhöhe, etc.

---

4. Beispiele

Reihe von Karten - Grün, linksbündig
Aufruf:
{ FlexCards|Row| fc-layout-left fc-theme-green |
{ FlexCards | Card | 300 | Titel | Text | Fuß }
{ FlexCards | Card | 300 | Titel | Text | Fuß }
{ FlexCards | Card | 300 | Titel | Text | Fuß }
}

---

Reihe von Karten - Farbschema Sand, Abstand kleiner, Rundung stärker
Aufruf:
{ FlexCards | Row | fc-theme-sand fc-layout-gap-sm fc-frame-round-lg |
{ FlexCards | Card | 500 | Titel | Text1 | Fuß }
{ FlexCards | Card | 500 | Titel | Text2 | Fuß }
}

---

Reihe von Karten - Dunkel, Bildegröße nicht unifiziert
Aufruf:
'{'FlexCards|Row| fc-theme-dark | ... Karten ... '}'

---

Reihe von Karten - Grün, Erstes Bild füllend mit gleicher Höhe
Aufruf:
'{'FlexCards|Row| fc-content-img-top-sm fc-theme-green | ... Karten ... '}'