SWAP: Ein Portfolio-Theme für Grav

Von: Sebastian Schürmanns

SWAP ist ein flexibles Portfolio-Theme für das Flat File CMS Grav. Das Theme ist inzwischen allerdings veraltet, steht aber immer noch über GitHub zur Verfügung.

SWAP ist ein einfaches Portfolio-Theme für das Flat-File-CMS Grav (open-source). Grav hat sich aufgrund seines modularen Seitenkonzepts für SWAP angeboten: Bei Grav können komplexe One-Pager nach dem Lego-Prinzip aus modularen Unterseiten zusammengesetzt werden. Bei SWAP besteht jede Content-Reihe aus einem Modul, das jeweils eine Text-Kachel und eine Design-Kachel enthält. Die Anordnung der Kachel "swapped" bei jeder Reihe von links nach rechts:

SWAP - ein Portfolio-Theme für Grav

Die zweite Design-Variante "nature" betont dagegen stärker die Reihen und weniger die Kachel-Struktur:

SWAP - ein Portfolio-Theme für Grav

Die dritte Variante folgt einem Schachbrett-Muster:

SWAP - ein Portfolio-Theme für Grav

Die Portfolio-Einträge selbst werden unter dem Punkt "Beispiel" aufgelistet und bestehen aus einzelnen Blog-Einträgen. SWAP ist also eine Mischung aus einer One-Pager-Frontseite und einem klassischen Blog-Konzept.

SWAP lässt sich auch von Nicht-Entwicklern flexibel einsetzen. Für die Text-Kachel gibt es derzeit folgende Möglichkeiten:

  • Normaler Text (mit diversen Formatierungen)
  • Zusätzlich ein Call to Action Button
  • Eine Adresse, die automatisch mit Mikroformaten ausgegeben wird.

Für die Design-Kachel gibt es noch deutlich mehr Möglichkeiten:

  • Großes Bild
  • Großes Icon
  • Großer visueller Text
  • Google-Maps-Karte
  • Bar-Chart (zum Beispiel für Skills)
  • Kontakt- und Social-Media-Buttons
  • Text als Check-Liste
  • Call-To-Action-Button
  • Liste der letzten Portfolio-Einträge

Die Design-Kacheln und die Text-Kacheln können beliebig kombiniert werden. Auch die Reihenfolge der einzelnen Blöcke/Reihen auf der Startseite ist beliebig austauschbar. Hinzu kommen Einstellungen für die Gesamtbreite des Themes (900px bis 1200px) und die zwei Design-Varianten "nature" und "default". Für Icons steht die gesamte Palette von Font-Awesome zur Verfügung.

Wer etwas CSS beherrscht, kann in der CSS-Datei auch sehr schnell seinen eigenen Farbcode und sein Design erstellen. Die gesamte CSS-Datei besteht aus gerade mal 650 Zeilen Code (die beiden Design-Varianten inklusive Responsive sind darin schon enthalten). Im CSS-Code ist das Layout (Struktur der Seite und der Elemente) vom Design (Farbgestaltung) getrennt. Man kann also im CSS einfach ein Color-Schema kopieren und eigene Werte eintragen. Tatsächlich sind die beiden sehr unterschiedlichen Designs "default" und "nature" nur über unterschiedliche Color-Angaben erstellt. Wenn man das Default-Design nicht überschreiben will, sollte man seinem eigenen CSS-Design eine eigene Klasse verpassen und die Klasse dann im Grav-Backend zur Auswahl stellen.

Zuletzt aktualisiert: 04.11.2018