SWAP: Ein Portfolio-Theme für Grav

03.02.2017

Schickes und extrem flexibles Portfolio-Theme gefällig? Mit "SWAP" habe ich mal für Grav eine Alternative entwickelt.

Die prämierten Designs von Webseiten wie Awwwwards haben meistens eine Schwäche: Sie leben sehr oft von high-end Fotos und von der inhaltlichen Gestaltung durch einen Profi-Designer. Das ist natürlich sehr schön anzuschauen, aber meistens nutzlos im Alltag. Denn die Leser wollen Inhalte und der durchschnittliche Redakteure kann eine derart edle Bilderwelt schlicht nicht aufrecht erhalten.

Dieses Problem mit vielen Designs ist mir erst bei der Suche nach einem eigenen Portfolio-Theme bewusst geworden. Zumal ich auf der Suche nach einem sehr schlichten und dennoch flexiblen Design ohne Parallax und überflüssigem Schnick Schnack war (heute kaum noch zu finden). Also habe ich mit "SWAP" kurzerhand ein eigenes Theme entwickelt.

"SWAP" basiert auf dem Flat-File-CMS Grav (open-source). Grav hat sich aufgrund seines modularen Seitenkonzepts angeboten: Modulare Seiten bestehen aus verschiedenen Unterseiten, die sich wie Lego-Steine zu einer Seite zusammenfügen. Damit lassen sich beispielsweise komplexe One-Pager realisieren. Auch SWAP nutzt dieses Konzept für die Startseite: Jedes Modul bildet eine Reihe und in jeder Reihe gibt es eine Text-Kachel und eine Design-Kachel. Die Anordnung der Kachel "swapped" bei jeder Reihe von links nach rechts wie bei einem Schachbrett:

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 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 sehr 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. Geplant sind noch weitere Features, Design-Varianten und auch noch eine Auswahl für die Schrifttypen.

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.

Für den Start bietet SWAP schon eine ganze Menge, finde ich. Leider fehlen Grav noch ein paar Features. Zum Beispiel muss man für die Sortierung der Reihen/Modul-Blöcke die Ordner umbenennen, d.h. man kann hier nich über die Administrations-Oberfläche gehen. Die Admin-Oberflläche selbst ist für meinen Geschmack auch etwas überladen und unsortiert, unerfahrene Autoren sind da schnell überfordert. Dennoch, für One-Pager und Portfolio-Seiten ist Grav schon ein ziemlich perfektes System.

Wer SWAP im Live-Einsatz sehen möchte, kann das auf dotheco.de machen.

Wenn du ein Web-Projekt von A-Z erstellen willst, findest du im Themenüberblick viele Artikel zu jedem Schritt.

blog comments powered by Disqus